<!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>