matt-barker
7/19/2016 - 9:04 AM

CSS and HTML code for career foundry web developer course

CSS and HTML code for career foundry web developer course

about_styles.css
content_copyfile_download
* { box-sizing: border-box; }

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

.header {
  margin-bottom: 25px;
}

.header h1 {
  text-align: center;
}

.image {
  /*display: inline-block;*/
  float: left;
}

.column {
  display: inline-block;
  float: left;
  width: 30%;
  padding-right: 10px;
}

.main-text {
        clear: both;
        padding-top: 60px;
}

.about-image {
  width: 100%;
}

.intro {
  padding: 30px 50px;
}

.skills {
  padding-left: 20px;
}
.skills h3 {
  margin-top: 0;
}

.fixed-position-element {
  position: fixed;
  width: 120px;
  top: 100px;
  right: 10px;
  border: 2px solid;
}

.relative-position-element {
  position: relative;
  width: 180px;
  left: 100px;
  border: 2px solid;
}

.absolute-position-element {
  
  position: absolute;
  width: 180px;
  left: 300px;
  top: 230px;
  border: 2px solid;
}
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>