matt-barker
7/18/2016 - 12:43 PM

HTML code for about page (Career Foundry web developer course)

HTML code for about page (Career Foundry web developer course)

about.html
content_copyfile_download
<!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>