Tribute to Stephen Hawking

index.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>

script.js

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

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

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

.main {
  width: 90%;
  background-color: #e7e7e7;
  margin: 0 auto;
  padding: 1em;
}

.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;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />

Tribute to Stephen Hawking.markdown

Tribute to Stephen Hawking

FreeCodeCamp.com Challenge: Build a Tribute Page

A Pen by Farooq on CodePen.

License.