rwarbelow/index.html

## index.html
<!doctype html>
<html>

  <head>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/normalize/2.1.0/normalize.css">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,900">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">
  </head>

  <body>
    <header>
      <span class="brand"><a href="/">HipSTIRR</a></span>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <div class="container">

      <div class="marketing">
        <h2>Are You a HipSTIRR?</h2>
        <p>
          Artisan brunch aesthetic mcsweeney's, lo-fi typewriter occupy wes anderson swag hashtag odd future iphone portland mixtape. Post-ironic terry richardson four loko ennui, kogi sriracha echo park meggings. Aesthetic wes anderson marfa trust fund. Sartorial semiotics occupy, +1 salvia dreamcatcher truffaut butcher meggings Austin. Fixie retro banh mi brunch. Cray before they sold out etsy meh salvia banh mi. Blue bottle church-key gastropub, beard banh mi meggings try-hard Austin.
        </p>
      </div>

      <div class="features">
        <div>
          <h3><span class="icon-beer"></span> PBR</h3>
          <p>
            Locavore iphone polaroid sustainable helvetica portland. Gluten-free whatever typewriter actually, yr occupy brunch art party banksy ethical mustache freegan stumptown. Small batch readymade vinyl, hoodie mcsweeney's literally locavore. Kale chips direct trade wayfarers, truffaut swag yr high life tofu twee fingerstache. Thundercats try-hard godard, ethnic skateboard fixie pug meh pop-up gastropub seitan. Pinterest retro VHS, etsy street art.
          </p>
        </div>

        <div>
          <h3><span class="icon-coffee"></span> Sightglass</h3>
          <p>
            Jean shorts tonx narwhal wes anderson. Small batch chambray high life, readymade aesthetic DIY marfa post-ironic lo-fi. Letterpress actually quinoa squid semiotics. Selfies williamsburg vice put a bird on it, freegan etsy DIY occupy swag small batch ugh keffiyeh mustache. Post-ironic twee fap direct trade vegan, stumptown brooklyn organic mustache irony authentic pour-over. Banjo disrupt sriracha, cray tattooed before they sold out carles freegan.
          </p>
        </div>

        <div>
          <h3><span class="icon-food"></span> Locavore</h3>
          <p>
            Scenester cosby sweater sustainable terry richardson, pork belly ugh organic try-hard wayfarers beard cray keytar tousled wolf mixtape. Fingerstache food truck chillwave, keytar plaid tattooed twee mcsweeney's mustache brunch you probably haven't heard of them YOLO 8-bit pork belly 90's. Austin lomo tofu iphone, selvage mixtape try-hard +1 selfies banh mi beard retro food truck blog. Craft beer pitchfork direct trade small batch PBR tousled raw denim.
          </p>
        </div>
      </div>

      <div class="marketing">
        <h2>Got it?</h2>
        <p>
          Mustache master cleanse 8-bit helvetica. Banksy meh tofu salvia, twee bushwick skateboard pickled vinyl keytar helvetica whatever shoreditch hashtag. Retro chambray banh mi gastropub hashtag. PBR blue bottle fap small batch. Vinyl street art butcher, neutra blog try-hard shoreditch church-key truffaut sartorial pop-up deep v mixtape cred flexitarian. Fingerstache cosby sweater cliche iphone keffiyeh, DIY next level. VHS deep v gentrify selvage, pop-up ennui vinyl helvetica mumblecore.
        </p>
      </div>

    </div>

    <footer>
      Copyright &copy; 2013, I Knew it Before You, LLC
    </footer>
  </body>

</html>

## main.css
html {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  padding-left: 10px;
  background-color: black;
  height: 90px;
}

header ul {
  float: right;
  padding-top: 20px;
  font-weight: bold;
}

.brand {
  font-family: "Lato", Verdana, sans-serif;
  font-size: 3em;
  float: left;
  padding: 15px;
}

.brand a:hover {
  text-decoration: none;
  color: #ff0;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.marketing {
  padding: 10px;
  margin: 1em 0;
}

.brand a {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

ul li {
  float: left;
  list-style-type: none;
}

ul a {
  color: white;
  text-decoration: none;
  padding: 30px;
}

ul a:hover {
  color: #ff0;
}

.marketing {
  color: white;
  background-color: #333;
  margin-top: 20px;
  clear: both;
}

footer {
  clear: both;
  text-align: center;
  width: 100%;
  background-color: black;
  color: white;
}

.features div {
  float: left;
  padding: 20px;
  padding-bottom: 30px;
  width: 29%;
  margin-bottom: 40px;
}

.features div:nth-child(2){
  border-left: 1px dotted black;
  border-right: 1px dotted black;
}

div h3 {
  text-align: center;
}
	<!doctype html>
	<html>

	<head>
	<link rel="stylesheet" href="http://cdn.jsdelivr.net/normalize/2.1.0/normalize.css">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,900">
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">
	</head>

	<body>
	<header>
	<span class="brand"><a href="/">HipSTIRR</a></span>
	<nav>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	</header>

	<div class="container">

	<div class="marketing">
	<h2>Are You a HipSTIRR?</h2>
	<p>
	Artisan brunch aesthetic mcsweeney's, lo-fi typewriter occupy wes anderson swag hashtag odd future iphone portland mixtape. Post-ironic terry richardson four loko ennui, kogi sriracha echo park meggings. Aesthetic wes anderson marfa trust fund. Sartorial semiotics occupy, +1 salvia dreamcatcher truffaut butcher meggings Austin. Fixie retro banh mi brunch. Cray before they sold out etsy meh salvia banh mi. Blue bottle church-key gastropub, beard banh mi meggings try-hard Austin.
	</p>
	</div>

	<div class="features">
	<div>
	<h3><span class="icon-beer"></span> PBR</h3>
	<p>
	Locavore iphone polaroid sustainable helvetica portland. Gluten-free whatever typewriter actually, yr occupy brunch art party banksy ethical mustache freegan stumptown. Small batch readymade vinyl, hoodie mcsweeney's literally locavore. Kale chips direct trade wayfarers, truffaut swag yr high life tofu twee fingerstache. Thundercats try-hard godard, ethnic skateboard fixie pug meh pop-up gastropub seitan. Pinterest retro VHS, etsy street art.
	</p>
	</div>

	<div>
	<h3><span class="icon-coffee"></span> Sightglass</h3>
	<p>
	Jean shorts tonx narwhal wes anderson. Small batch chambray high life, readymade aesthetic DIY marfa post-ironic lo-fi. Letterpress actually quinoa squid semiotics. Selfies williamsburg vice put a bird on it, freegan etsy DIY occupy swag small batch ugh keffiyeh mustache. Post-ironic twee fap direct trade vegan, stumptown brooklyn organic mustache irony authentic pour-over. Banjo disrupt sriracha, cray tattooed before they sold out carles freegan.
	</p>
	</div>

	<div>
	<h3><span class="icon-food"></span> Locavore</h3>
	<p>
	Scenester cosby sweater sustainable terry richardson, pork belly ugh organic try-hard wayfarers beard cray keytar tousled wolf mixtape. Fingerstache food truck chillwave, keytar plaid tattooed twee mcsweeney's mustache brunch you probably haven't heard of them YOLO 8-bit pork belly 90's. Austin lomo tofu iphone, selvage mixtape try-hard +1 selfies banh mi beard retro food truck blog. Craft beer pitchfork direct trade small batch PBR tousled raw denim.
	</p>
	</div>
	</div>

	<div class="marketing">
	<h2>Got it?</h2>
	<p>
	Mustache master cleanse 8-bit helvetica. Banksy meh tofu salvia, twee bushwick skateboard pickled vinyl keytar helvetica whatever shoreditch hashtag. Retro chambray banh mi gastropub hashtag. PBR blue bottle fap small batch. Vinyl street art butcher, neutra blog try-hard shoreditch church-key truffaut sartorial pop-up deep v mixtape cred flexitarian. Fingerstache cosby sweater cliche iphone keffiyeh, DIY next level. VHS deep v gentrify selvage, pop-up ennui vinyl helvetica mumblecore.
	</p>
	</div>

	</div>

	<footer>
	Copyright © 2013, I Knew it Before You, LLC
	</footer>
	</body>

	</html>
	html {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	header {
	padding-left: 10px;
	background-color: black;
	height: 90px;
	}

	header ul {
	float: right;
	padding-top: 20px;
	font-weight: bold;
	}

	.brand {
	font-family: "Lato", Verdana, sans-serif;
	font-size: 3em;
	float: left;
	padding: 15px;
	}

	.brand a:hover {
	text-decoration: none;
	color: #ff0;
	}

	.container {
	width: 80%;
	margin: 0 auto;
	}

	.marketing {
	padding: 10px;
	margin: 1em 0;
	}

	.brand a {
	color: white;
	font-weight: 600;
	text-decoration: none;
	}

	ul li {
	float: left;
	list-style-type: none;
	}

	ul a {
	color: white;
	text-decoration: none;
	padding: 30px;
	}

	ul a:hover {
	color: #ff0;
	}

	.marketing {
	color: white;
	background-color: #333;
	margin-top: 20px;
	clear: both;
	}

	footer {
	clear: both;
	text-align: center;
	width: 100%;
	background-color: black;
	color: white;
	}

	.features div {
	float: left;
	padding: 20px;
	padding-bottom: 30px;
	width: 29%;
	margin-bottom: 40px;
	}

	.features div:nth-child(2){
	border-left: 1px dotted black;
	border-right: 1px dotted black;
	}

	div h3 {
	text-align: center;
	}