Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="masthead">
  <p class="masthead_intro">Hi I'm</p>
  <h1 class="masthead_heading">Sierra!</h1>
</header>
<main>
  <section class="intro">
    <h2>Introduction</h2>
    <p class="intro_moto">I might be quiet but over look me at your own risk. Coding and listening to audiobooks are my passions.</p>
    <p>I was born visually impaired, but I have never let this stop me from pursuing my dreams. It might sound cliche, but I view my vision as a blessing. I sit on the border between the fully-sighted and the blind world. My life experiences have shown me the power of accessibility to information. Everyone has a right to pursue information; however, their access may be blocked by a physical, cultural, mental, or language barrier.</p>
    <p>When I was very young, I discided to become a librarian, believing this would help me increase the accessibility of books to the blind and visually impaired community. Although I still admire the work of librarians around the world, my passion has drawn me toward web development. The Internet is an ever-growing repository of information. Although the last few years have seen a considerable effort to make the Internet accessible to people with disabilities, there are still sites and services that remain inaccessible to the blind and visually impaired. I hope to improve my coding and design skills, so I can aid in making the entire Internet open to all. </p>
  </section>
  <section class="location">
    <h2>Where I am From</h2>
    <p>I was born in Ogden, Utah. My Father moved the family to St. Louis, Missouri when I was 11 when he accepted a job at Boeing.</p>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199412.48571346482!2d-90.38354712369397!3d38.653016917602905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8b4a9faed8ef9%3A0xbe39eaca22bbe05b!2sSt+Louis%2C+MO!5e0!3m2!1sen!2sus!4v1463707885409" frameborder="0" style="border:0;width:400px;height: 200px;" allowfullscreen></iframe>
  </section>
  <section class="aboutMe">
    <h2>More About Me</h2>
    <h3>Hobbies</h3>
    <p>Although I dabble in a lot of different hobbies, from weaving to gaming to watching Anime. My one constant past-time is listening to audiobooks. I probably listen to one to two audiobooks per week. </p>
    <h3>Dream Job?</h3>
    <p>As I mentioned in the introduction area, I want to hone my skills as a web developer. My dream job would involve making the web a more accessible place for people with disabilities.</p>
    <h3>Recently I read</h3>
    <img class="aboutMe_read_cover" src="https://d.gr-assets.com/books/1379437095l/17562900.jpg" alt="book cover" alt="book cover" />
    <div class="aboutMe_read_details">
      <p>Night Broken: <span>Mercy Thompson, Book 8</span></p>
      <p class="aboutMe_read_author">by <a href="http://www.patriciabriggs.com/" target=_Blank>Patricia Briggs</a></p>
    </div>
  </section>
</main>
<footer class="content_footer">
  <p>Say hi to me on these social networks:</p>
  <ul class="social_footer">
    <li>
      <a href="https://github.com" target=_Blank>Github</a>
    </li>
    <li>
      <a href="https://twitter.com" target=_Blank>Twitter</a
    </li>
    <li>
      <a href="https://plus.google.com" target=_Blank>Google+</a>
    </li>
  </ul>
  <p>Cover Image via <a href="https://unsplash.com/photos/TLJImI78VRg" target=_Blank>Unsplash</a></p>
</footer>
              
            
!

CSS

              
                html, body {
  margin: 0%;
  padding: 0%;
  font-size: 100%;
  font-family: 'Josefinsans';
}

section {
  padding: 0.5em 1em;
}

a:link {
  text-decoration: none;
  color: #8CAFBE;
}

a:active, a:visited, a:hover {
  text-decoration: underline;
  color: #41758E;
}

.masthead, .content_footer {
  text-align: center;
}

.masthead {
  background: url("https://images.unsplash.com/photo-1432117068802-b224427256a5?format=auto&auto=compress&dpr=2&crop=entropy&fit=crop&w=1199&h=799&q=80") 20% 45%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  border-top: 1em solid #3F2A20;
  padding: 0.5em 0;
  width: 100%;
  overflow: hidden;
}

.masthead_intro {
  margin-bottom: 0.1em; /* 0.1em * 16px = 1.6px */
  font-size: 2em;
}

.masthead_heading {
  margin-top: -0.1em; /* -0.2em * 16px = 3.2px */
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
  font-size: 6em; /* 6em * 16px = 96px */
}

main {
  margin: 2em auto; /* 2em * 16px = 64px */
  max-width: 80%;
}

main h2 {
  font-family: 'Josefin Slab', cursive;
  margin-top: 2em;
}

main p {
  font-weight: 300;
  letter-spacing: 0.05em;
  text-align: justify;
}

.intro > .intro_moto {
  text-align: center;
  font-style: italic;
  color: #41758E;
}

.location p {
  display: inline-block;
  width: 40%;
  margin: 0 2%;
  vertical-align: top;
}

.location iframe {
  display: inline-block;
  margin: 0 2%;
  margin-left: 10%;
  vertical-align: middle;
}

.aboutMe h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.aboutMe h3, .aboutMe p {
  margin-left: 2%;
}

.aboutMe_read_cover {
  display: inline-block;
  width: 10%;
  vertical-align: middle;
  margin-left: 4%;
}

.aboutMe_read_details {
  display: inline-block;
  width: 40%;
  padding: 0 2em;
}

.aboutMe_read_details p {
  margin: 0.5em;
}

.aboutMe_read_details span {
  font-style: italic;
}

.content_footer {
  background-color: #3F2A20;
  overflow: hidden;
  color: #FFFFFF;
  padding: 1.5em;
}

.social_footer {
  list-style-type: none;
  padding: 0%;
}

.social_footer > li {
  display: inline-block;
  padding: 0 1em;
}


              
            
!

JS

              
                
              
            
!
999px

Console