thomasgwatson/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;
  font-size: 14px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover{
  color: #ff0;
}

body {
  margin: 0;
  padding: 0;
}

header {
  padding: 10px;
  background-color: #333;
}

footer {
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
}

ul {
  list-style: none
}

nav {
  float: right;
}

nav li{
  float: left;
  margin: 7px;
  padding: 7px;
}

.features h3 {
  text-align: center
}

.features div{
  display: inline-block;
  border-right: dotted 1px #333;
  width: 32.5%;
  margin: 2px;
}

.features div:last-child{
  border-right: none
}


.brand {
  font-family: "Lato", Verdana, sans-serif;
  font-weight: 600;
  font-size: 3em;
}

.brand a:hover {
  text-decoration: underline;
  color: yellow;
}

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

.marketing {
  padding: 10px;
  margin: 1em 0;
  color: white;
  background-color: #555;
}

/*
hover over links changes color to yellow                      <a>
hover over title link also changes it to underline            <span class="brand"><a>
Header has 100% width                                         <header>
otherwise links are styled white, with no style applied       <a>
Header has darker grey background color                       <header>
Navigation is floated to the right                            <nav><ul>
Elements within the navigation are floated to the left        <nav><li>
Container occupies about 85% of page width                    <div class="container">
Bottom para/div has white text                                <div class="marketing">
Bottom para/div has lighter grey background color             <div class="marketing">
Bottom para/div occupies about 85% of container width         <div class="marketing">
Top para/div has white text                                   <div class="marketing">
top para/div has lighter grey background color                <div class="marketing">
top para/div occupies about 85% of container width            <div class="marketing">
Change font or boldness of title                              <span class="brand">
Middle paras are black text                                   <div class="features">
Middle paras-div is white background                          <div class="features">
Middle paras-div occupies about 85% of container width        <div class="features">
Middle paras are a list, with minimalist borders between them <div class="features">
*/
	<!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;
	font-size: 14px;
	}

	a {
	color: white;
	text-decoration: none;
	}

	a:hover{
	color: #ff0;
	}

	body {
	margin: 0;
	padding: 0;
	}

	header {
	padding: 10px;
	background-color: #333;
	}

	footer {
	padding: 10px;
	background-color: #333;
	color: white;
	text-align: center;
	}

	ul {
	list-style: none
	}

	nav {
	float: right;
	}

	nav li{
	float: left;
	margin: 7px;
	padding: 7px;
	}

	.features h3 {
	text-align: center
	}

	.features div{
	display: inline-block;
	border-right: dotted 1px #333;
	width: 32.5%;
	margin: 2px;
	}

	.features div:last-child{
	border-right: none
	}


	.brand {
	font-family: "Lato", Verdana, sans-serif;
	font-weight: 600;
	font-size: 3em;
	}

	.brand a:hover {
	text-decoration: underline;
	color: yellow;
	}

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

	.marketing {
	padding: 10px;
	margin: 1em 0;
	color: white;
	background-color: #555;
	}

	/*
	hover over links changes color to yellow <a>
	hover over title link also changes it to underline <span class="brand"><a>
	Header has 100% width <header>
	otherwise links are styled white, with no style applied <a>
	Header has darker grey background color <header>
	Navigation is floated to the right <nav><ul>
	Elements within the navigation are floated to the left <nav><li>
	Container occupies about 85% of page width <div class="container">
	Bottom para/div has white text <div class="marketing">
	Bottom para/div has lighter grey background color <div class="marketing">
	Bottom para/div occupies about 85% of container width <div class="marketing">
	Top para/div has white text <div class="marketing">
	top para/div has lighter grey background color <div class="marketing">
	top para/div occupies about 85% of container width <div class="marketing">
	Change font or boldness of title <span class="brand">
	Middle paras are black text <div class="features">
	Middle paras-div is white background <div class="features">
	Middle paras-div occupies about 85% of container width <div class="features">
	Middle paras are a list, with minimalist borders between them <div class="features">
	*/