Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
161 lines (160 sloc) 5.14 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<title>Colors</title>
<meta name="author" content="mrmrs">
<meta name="description" content="A nicer color palette for the web. Download as css, sass, stylus, or plain text.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="site.css">
</head>
<body>
<section>
<header class="pvxl">
<h1 class="mega title tc man">Examples</h1>
</header>
<h2 class="pvl thin f1">Backgrounds</h2>
<div class="bg-navy pvl white">
<h1 class="title">NAVY</h1>
<h2 class="thin title small">#001f3f</h2>
</div>
<div class="bg-blue pvl">
<h1 class="title">BLUE</h1>
<h2 class="thin title small">#0074d9</h2>
</div>
<div class="bg-aqua pvl">
<h1 class="title">AQUA</h1>
<h2 class="thin title small">#7fdbff</h2>
</div>
<div class="bg-teal pvl">
<h1 class="title">TEAL</h1>
<h2 class="thin title small">#39cccc</h2>
</div>
<div class="bg-olive pvl">
<h1 class="title">OLIVE</h1>
<h2 class="thin title small">#3d9970</h2>
</div>
<div class="bg-green pvl">
<h1 class="title">GREEN</h1>
<h2 class="thin title small">#2ecc40</h2>
</div>
<div class="bg-lime pvl">
<h1 class="title">LIME</h1>
<h2 class="thin title small">#01ff70</h2>
</div>
<div class="bg-yellow pvl">
<h1 class="title">YELLOW</h1>
<h2 class="thin title small">#ffdc00</h2>
</div>
<div class="bg-orange pvl">
<h1 class="title">ORANGE</h1>
<h2 class="thin title small">#ff851b</h2>
</div>
<div class="bg-red pvl">
<h1 class="title">RED</h1>
<h2 class="thin title small">#ff4136</h2>
</div>
<div class="bg-maroon pvl">
<h1 class="title">MAROON</h1>
<h2 class="thin title small">#85144b</h2>
</div>
<div class="bg-fuchsia pvl">
<h1 class="title">FUCHSIA</h1>
<h2 class="thin title small">#f012be</h2>
</div>
<div class="bg-purple pvl">
<h1 class="title">PURPLE</h1>
<h2 class="thin title small">#b10dc9</h2>
</div>
<div class="bg-white pvl">
<h1 class="title">WHITE</h1>
<h2 class="thin title small">#ffffff</h2>
</div>
<div class="bg-silver pvl">
<h1 class="title">SILVER</h1>
<h2 class="thin title small">#dddddd</h2>
</div>
<div class="bg-gray pvl">
<h1 class="title">GRAY</h1>
<h2 class="thin title small">#aaaaaa</h2>
</div>
<div class="bg-black pvl white">
<h1 class="title">BLACK</h1>
<h2 class="thin title small">#111111</h2>
</div>
</section>
<section>
<h2 class="thin f1 pvl">Text</h2>
<div class="navy pvl">
<h1 class="title">NAVY</h1>
<h2 class="thin title small">#001f3f</h2>
</div>
<div class="blue pvl">
<h1 class="title">BLUE</h1>
<h2 class="thin title small">#0074d9</h2>
</div>
<div class="aqua pvl">
<h1 class="title">AQUA</h1>
<h2 class="thin title small">#7fdbff</h2>
</div>
<div class="teal pvl">
<h1 class="title">TEAL</h1>
<h2 class="thin title small">#39cccc</h2>
</div>
<div class="olive pvl">
<h1 class="title">OLIVE</h1>
<h2 class="thin title small">#3d9970</h2>
</div>
<div class="green pvl">
<h1 class="title">GREEN</h1>
<h2 class="thin title small">#2ecc40</h2>
</div>
<div class="lime pvl">
<h1 class="title">LIME</h1>
<h2 class="thin title small">#01ff70</h2>
</div>
<div class="yellow pvl">
<h1 class="title">YELLOW</h1>
<h2 class="thin title small">#ffdc00</h2>
</div>
<div class="orange pvl">
<h1 class="title">ORANGE</h1>
<h2 class="thin title small">#ff851b</h2>
</div>
<div class="red pvl">
<h1 class="title">RED</h1>
<h2 class="thin title small">#ff4136</h2>
</div>
<div class="maroon pvl">
<h1 class="title">MAROON</h1>
<h2 class="thin title small">#85144b</h2>
</div>
<div class="fuchsia pvl">
<h1 class="title">FUCHSIA</h1>
<h2 class="thin title small">#f012be</h2>
</div>
<div class="purple pvl">
<h1 class="title">PURPLE</h1>
<h2 class="thin title small">#b10dc9</h2>
</div>
<div class="black pvl">
<h1 class="title">BLACK</h1>
<h2 class="thin title small">#111111</h2>
</div>
<div class="bg-black gray pvl">
<h1 class="title">GRAY</h1>
<h2 class="thin title small">#aaaaaa</h2>
</div>
<div class="bg-black silver pvl">
<h1 class="title">SILVER</h1>
<h2 class="thin title small">#dddddd</h2>
</div>
<div class="bg-black white pvl">
<h1 class="title">WHITE</h1>
<h2 class="thin title small">#ffffff</h2>
</div>
</section>
</body>
</html>