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

              
                <div class="main">
  <h1 class="text-center">Stephen Hawking</h1>
  <h2 class="text-center">A Brilliant Theoretical Physicist</h2>
  <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Physicist_Stephen_Hawking_in_Zero_Gravity_NASA.jpg" alt="Stephen Hawking" />
    <figcaption>Hawking taking a zero-gravity flight in a "Vomit Comet"</figcaption>
  </figure>
  <div>
    <h3>Here's a timeline of Stephen Hawking:</h3>
    <ul  class="timeline">
      <li><span class="year">1942</span>Born on January 8, 1942 in Oxford, England</li>
      <li><span class="year">1958</span>Attended St. Alban School until graduating in 1958, where he was a good student &mdash; but not great</li>
      <li>Hawking then attended college at Oxford. His passion was math, his degree was in natural sciences</li>
      <li>At Oxford, Hawking coxed a rowing team. Why? His words: <strong><q>To relieve immense boredom</q></strong></li>
      <li><span class="year">1962</span> Hawking graduated from Oxford and went to Cambridge for his PhD. When he started, <strong>symptoms of Lou Gehrig's disease began</strong></li>
      <li>Hawking was diagnosed with the deteriorating disease and given <strong>two to three years to live</strong></li>
      <li><span class="year">1965</span> Using a cane to get down the aisle, Hawking <strong>married his wife, Jane</strong></li>
      <li>He received his PhD athe age of <strong>23</strong></li>
      <li>And he embarked upon lifelong research and <strong>teaching at Cambridge</strong></li>
      <li><span class="year">1968</span> At age 26, Hawking was in a wheelchair full-time</li>
      <li>And he had two children with his wife by the time he was 27</li>
      <li><span class="year">1970</span> His illness worsened, his research intensified</li>
      <li><span class="year">1974</span> He proved that black holes aren't vacuums, coining the term Hawking Radiation.</li>
      <li>He used his remaining speech capabilities to accept the first of what would be many honors</li>
      <li><span class="year">1975</span> The <strong>Pius XI Gold Medal for Science</strong> for black hole discoveries</li>
      <li><span class="year">1976</span> The <strong>Hughes Medal</strong> for outstanding original ideas</li>
      <li><span class="year">1978</span>  <strong>Albert Einstein Award,</strong> for extended studies on Einstein's work</li>
      <li><span class="year">1985</span> <strong>Lost ability to speak.</strong> Began using a machine to talk for him, at first with a working finger, and later with a muscle in his cheek</li>
      <li><span class="year">1988</span> Published <strong>A Brief History of Time.</strong> Since then; 25 million copies sold, translated in 40 different languages.</li>
      <li>Winner of the <strong>Wolf Prize</strong> for assisting mankind</li>
      <li><span class="year">1989</span> <strong>Prince of Asturias Award</strong> for notable discoveries</li>
      <li><span class="year">1994</span> Discusses his personal life alongside lectures on thermodynamics of black holes and more in 1994's <strong>Black Holes and Baby Universes other Essays</strong> </li>
      <li><span class="year">2006</span> <strong>Copley Medal of the Royal Society</strong> for outstanding scientific research</li>
      <li><strong>Divorced 2nd wife</strong> and grew close to his family in 2006. Co-published a science book for children with his daugter, Lucy</li>
      <li><span class="year">2007</span> At age 65: Hawking experienced space simulation at Kennedy Space Center</li>
      <li><span class="year">2009</span> Hawking given highes civilian honor in the U.S.: <strong>Presidential Medal of Freedom</strong></li>
      <li><span class="year">2010</span> Co-authored <strong>The Grand Design</strong></li>
      <li>Before Hawking, the oldest ALS patients made it to 32 and 39 years of age</li>
      <li>He's considered one of the most influential minds of out time. <strong>And he was supposed to die 40 years ago</strong></li>
    </ul>
  </div>
  <blockquote class="text-center">
    <q>My goal is simple. It is a complete understanding of the universe, why it is as it is and why it exists at all.</q>
    <cite>&mdash; Stephen Hawking</cite>
  </blockquote>
  <footer class="text-center">
    If you have time, you should read more about this brilliant scientist on his <a href="https://en.wikipedia.org/wiki/Stephen_Hawking">Wikipedia entry</a>.
  </footer>
</div>
              
            
!

CSS

              
                body {
  font-family: Roboto, Helvetica, sans-serif;
}

.main {
  width: 90%;
  background-color: #e7e7e7;
  margin: 0 auto;
  padding: 1em;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

.text-center {
  text-align: center;
}

h1,
h2 {
  font-weight: 100;
}

figure {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 3px;
}

figure img {
  width: 100%;
}

figure figcaption {
  padding: .5em;
}
.timeline{
  list-style: none;
  position: relative;
}
.timeline:before{
  width: 2px; 
  height: calc(100% - 1em);
  left: calc(1em - 2px);
 }
.timeline li{
  position: relative;
  margin: 3em 0;
}
.timeline .year{
  margin-right: 1em;
  color: #1976D2;
}
.timeline .with-margin{
  padding-left: 3.6em;
}
.timeline:before,
.timeline li:before{
  content:"";
  position: absolute;
  background-color: #1976D2;
  top: 0;
  bottom: 0;
  margin: auto;
}
.timeline li:before{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: -30px;
  
}
.timeline .with-year:before{
  width: 20px;
  height: 20px;
  left: -35px;
}
blockquote q {
  font-size: 1.2em;
}

blockquote cite {
  color: #999;
}
              
            
!

JS

              
                $(document).ready(function(){
  $(".timeline li:has(span.year)").addClass("with-year");
  $("li:not(:has(>span.year))").addClass("with-margin");
});
              
            
!
999px

Console