matt-barker/about.html

## about.html
<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>About | Matt Barker</title>

      <!--[if lt IE 9]>
        <script src="dist/html5shiv.js"></script>
      <![endif]-->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="css/about_styles.css">
  </head>

  <body>
    <div class="container">
       <div class="absolute-position-element">
      <p><strong>I'm an absolute position element.<br>My position is absolute, but is relative to the     next parent with relative positioning.</strong></p>
      </div>
      <div class="header">
        <h1><strong>About</strong> Me.</h1>
      </div>
      <div class="image column">
        <img class="about-image" src="img/html-photo.jpg" alt="HTML on a laptop">
      </div>
      <div class="intro column">
        <p>
          I am a budding web developer currently making the transition from case management development to web developer.
        </p>
      </div><!-- end intro column-->
      <div class="skills column">
        <h3>My skills</h3>
        <ul id="skill-list">
          <li>A skill</li>
          <li>Another skill</li>
          <li>So many skills</li>
          <li>Skill overload</li>
        </ul>
      </div><!-- end skills column-->
      <div class="main-text">
        <h3>More about me...</h3>
        <p>
          Irony actually occupy, drinking vinegar post-ironic pop-up chillwave +1 green juice four dollar toast. Wayfarers sartorial cardigan, leggings gentrify shoreditch put a bird on it. Knausgaard literally pug twee. Retro gentrify organic, tofu single-origin coffee flexitarian waistcoat fingerstache skateboard artisan. Bushwick waistcoat meh narwhal distillery sartorial. Four dollar toast celiac roof party PBR&B pinterest, readymade post-ironic skateboard ramps man bun fanny pack scenester tattooed photo booth truffaut. Echo park ethical cornhole heirloom authentic.
        </p>
      </div><!-- end main-text -->
      <div class="fixed-position-element">
      <p><strong>I'm a fixed position element.<br>I stay in the same place relative to the viewport.</strong></p>
      </div>
      <div class="relative-position-element">
      <p><strong>I'm a relative position element.<br>My position is relative to where I <em>should</em>   be on the page. In my case, that's 100px from the left of my parent element (div container).</strong></p>
      </div>
    </div><!-- end container -->

  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>About \| Matt Barker</title>

	<!--[if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/about_styles.css">
	</head>

	<body>
	<div class="container">
	<div class="absolute-position-element">
	<p><strong>I'm an absolute position element.<br>My position is absolute, but is relative to the next parent with relative positioning.</strong></p>
	</div>
	<div class="header">
	<h1><strong>About</strong> Me.</h1>
	</div>
	<div class="image column">
	<img class="about-image" src="img/html-photo.jpg" alt="HTML on a laptop">
	</div>
	<div class="intro column">
	<p>
	I am a budding web developer currently making the transition from case management development to web developer.
	</p>
	</div><!-- end intro column-->
	<div class="skills column">
	<h3>My skills</h3>
	<ul id="skill-list">
	<li>A skill</li>
	<li>Another skill</li>
	<li>So many skills</li>
	<li>Skill overload</li>
	</ul>
	</div><!-- end skills column-->
	<div class="main-text">
	<h3>More about me...</h3>
	<p>
	Irony actually occupy, drinking vinegar post-ironic pop-up chillwave +1 green juice four dollar toast. Wayfarers sartorial cardigan, leggings gentrify shoreditch put a bird on it. Knausgaard literally pug twee. Retro gentrify organic, tofu single-origin coffee flexitarian waistcoat fingerstache skateboard artisan. Bushwick waistcoat meh narwhal distillery sartorial. Four dollar toast celiac roof party PBR&B pinterest, readymade post-ironic skateboard ramps man bun fanny pack scenester tattooed photo booth truffaut. Echo park ethical cornhole heirloom authentic.
	</p>
	</div><!-- end main-text -->
	<div class="fixed-position-element">
	<p><strong>I'm a fixed position element.<br>I stay in the same place relative to the viewport.</strong></p>
	</div>
	<div class="relative-position-element">
	<p><strong>I'm a relative position element.<br>My position is relative to where I <em>should</em> be on the page. In my case, that's 100px from the left of my parent element (div container).</strong></p>
	</div>
	</div><!-- end container -->

	</body>
	</html>