A Pen by Jesse Showalter.

index.html

<header>
  <p>Hi I'm</p>
  <h1>Jesse</h1>
</header>
<section>
  <h2>Introduction</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur <a href="#">recusandae laboriosam</a> molestiae omnis eius! Maxime labore veritatis id reiciendis sapiente, quidem esse facere quos odit, dolorem ducimus fuga, quaerat voluptates!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Tenetur recusandae laboriosam molestiae omnis</strong> eius! Maxime labore veritatis id reiciendis sapiente, quidem esse facere quos odit, dolorem ducimus fuga, quaerat voluptates!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur recusandae laboriosam molestiae omnis eius! Maxime labore veritatis id reiciendis sapiente, quidem esse facere quos odit, dolorem ducimus fuga, quaerat voluptates!</p>
</section>
<section>
  <h2>Where I'm From</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam numquam in quae, earum dolorum, quo nemo, minima voluptatum dolores neque nobis voluptate omnis nesciunt placeat et aliquam a sunt maxime.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Maxime, obcaecati quisquam quaerat.</strong>  A numquam, deleniti necessitatibus rerum iusto nisi officia! Illum nostrum possimus numquam natus facilis, qui explicabo in pariatur.</p>
</section>
<section>
  <h2>More About Me</h2>
  <h3>What are your favorite Hobbies?</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore excepturi expedita iure, nihil laudantium aut quibusdam quae?</p>
  
  <h3>What are your favorite Hobbies?</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore excepturi expedita iure, nihil laudantium aut quibusdam quae?</p>
  
  <h3>What are your favorite Hobbies?</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore excepturi expedita iure, nihil laudantium aut quibusdam quae?</p>
  
  <h3>What are your favorite Hobbies?</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore excepturi expedita iure, nihil laudantium aut quibusdam quae?</p>
</section>
<footer>
  <p>Say hi to me on these social networks</p>
  <ul>
    <li><a href="#">Github</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Google+</a></li>
  </ul>
  <p>Cover Image via <a href="#">Unsplash</a></p>
</footer>

style.scss

//Mixins
@mixin headlines{
  text-transform:uppercase;
  font-family:'helvetica' sans-serif;
  font-weight:900;
  color:#222;
}

// Global Styles
a:link, a:visited{
  color:#53A0CC;
  font-weight:900;
  text-decoration:none;
}

a:hover{
  color:#617A67;
} 

strong{
  font-weight:900;
}

//Header Styles
header{
  background:url("http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c319226cefb_1.JPG");
  background-size:cover;
  text-align:center;
  color:#FFF;
  padding:8rem 0;
  margin-bottom:2rem;
  
  p{
    font-size:1.2rem;
  }
  
  h1{
    @include headlines;
    color:white;
    font-size:6rem;
    opacity:0.9;
    text-shadow:1px 1px 0px #284473, 2px 2px 0px #284473, 3px 3px 0px #284473;
  }
}

//Section Styles
section{
  margin:0 auto;
  width:75%;
  
  h2{
    @include headlines;
    font-size:1.3rem;
    margin-bottom:2rem;
  }
  
  h3{
    color:#53A0CC;
    margin-bottom:1rem;
  }
  
  p{
    margin-bottom:2rem;
    font-family:'helvetica' sans-serif;
    font-weight:100;
    font-size:1.05rem;
    line-height:1.5rem;
  }
}

// Footer Styles
footer{
  color:#fff;
  background:#222;
  text-align:center;
  padding:4rem 0;
  margin-top:4rem;
  font-family:'helvetica' sans-serif;
  font-weight:100;
  font-size:1.05rem;
  line-height:1.5rem;
  
  ul{
    margin:1.3rem 0;
  } 
  
  li{
    display:inline;
  }
}

Thinkful-About-Page.markdown

Thinkful About Page

A Pen by Jesse Showalter on CodePen.

License.