Pen Settings



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


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


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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


                <script src=""></script>

<div class="container" id="main">
  <div class="jumbotron">
    <h1 class="text-center" id="title">Stephen Hawking</h1>
    <h2 class="text-center"><em>The man who explained time and universe</em></h2>
     <figure class="figure img-thumbnail">
          <div id="img-div"><img id="image" class="img-responsive img-fluid" src="" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption id="img-caption" class="caption text-center">Hawking taking a zero-gravity flight in a reduced-gravity aircraft, 2007</figcaption></div>
<div class="centered-content" id="tribute-info">
    <h3>Here's a time line of Stephen Hawking's life:</h3>
<li><strong>1942</strong> - Born on 8 January in Oxford </li>
<li><strong> 1953 to 1958</strong> - Attends St Albans school in North London, where he develops a passion for mathematics. His father wants him to study medicine.</li>
<li><strong> 1959 to 1962</strong> - Specialises in physics at University College Oxford. Graduates with a first class degree in natural sciences.</li>
<li><strong>1963</strong> - Begins research in cosmology and general relativity at the University of Cambridge. He is diagnosed with an "incurable disease" at the age of 21, which is later found to be Amyotrophic Lateral Sclerosis, a rare progressive disease that effects movement and speech. He continues with his research.</li>
<li><strong>1966</strong> - Completes his doctorate and is awarded a fellowship at Gonville and Caius College, Cambridge. He works on singularities in the theory of general relativity and applies his ideas to the study of black holes. Collaborates with mathematician Roger Penrose, who was working at Birkbeck College in London.</li>
<li><strong>1970</strong> - Discovers a remarkable property: by using quantum theory and general relativity he is able to show that black holes can emit radiation.</li>
<li><strong>1973</strong> - Joins the department of applied mathematics and theoretical physics at Cambridge. In the same year he discovers, to his disbelief, that black holes could leak energy and particles into space, and even explode in a fountain of high-energy sparks.</li>
<li><strong>1974</strong> - His breakthrough discovery is published in the journal Nature, in a paper entitled Black hole Explosion?</li>
<li><strong>1977</strong> - Appointed professor of gravitational physics at Cambridge.</li>
<li><strong>1979</strong> - Appointed Lucasian professor of mathematics at Cambridge (a chair held by Sir Isaac Newton in 1663). Elected as a fellow of the Royal Society.

<li><strong>1982</strong> - Awarded a CBE by the Queen.</li>
<li><strong>1988</strong> - Publishes A Brief History of Time: From the Big Bang to Black Holes, a classic introduction to today's most important scientific ideas about the cosmos. Recorded in the 1998 Guinness Book of Records as an all-time bestseller.</li>
<li><strong>1989</strong> - Made a companion of honour.</li>
<li><strong>1993</strong> - Publishes Black Holes and Baby Universes, and other Essays, a collection of scientific articles exploring ways in which the universe may be governed.</li>
<li><strong>1998</strong> - Publishes Stephen Hawking's Universe: The Cosmos Explained, a book about the basis of our existence and of everything around us.</li>
<li><strong>2001</strong> - PReleases Universe in a Nutshell in the UK, a book that unravels the mysteries of recent breakthroughs in physics.</li>
<li><strong>2002</strong> - Releases On the Shoulders of Giants, The Great Works of Physics and Astronomy, an exploration of some of the greatest visionaries in the history of science including Copernicus, Kepler, Galileo, Newton and Einstein.

Publishes The Theory of Everything: The Origin and Fate of the Universe, a book that presents the most complex theories of physics past and present. </li>
<li><strong>2004</strong> - Hawking announces that he has solved the Black Hole paradox, which has been a troubling scientists for years. He presents his most recent findings at the international conference on general relativity and gravitation in Dublin.</li>
<li><strong>2007</strong> - Hawking and his daughter Lucy published George's Secret Key to the Universe, a children's book designed to explain theoretical physics in an accessible fashion and featuring characters similar to those in the Hawking family.[197] The book was followed by sequels in 2009, 2011, 2014 and 2016</li>
<li><strong>2016</strong> - Hawking helped launch Breakthrough Initiatives, an effort to search for extraterrestrial life.[212] Hawking created Stephen Hawking: Expedition New Earth, a documentary on space colonisation, as a 2017 episode of Tomorrow's World.</li>
<li><strong>2018</strong> - Died 14 March 2018 (aged 76) at
Cambridge, England</li>
  <blockquote class="blockquote">
    <p class="mb-0">"On the whole, the public shows good taste in its choice of idols. Einstein and Hawking earned their status as superstars, not only by their scientific discoveries but by their outstanding human qualities. Both of them fit easily into the role of icon, responding to public adoration with modesty and good humor and with provocative statements calculated to command attention. Both of them devoted their lives to an uncompromising struggle to penetrate the deepest mysteries of nature, and both still had time left over to care about the practical worries of ordinary people. The public rightly judged them to be genuine heroes, friends of humanity as well as scientific wizards."<br><br>
<footer class="blockquote-footer"><cite>Freeman Dyson, "The ‘Dramatic Picture’ of Richard Feynman", The New York Review of Books (July 14, 2011)</cite></footer></blockquote>
<h2>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="" target="_blank">Wikipedia entry</a>.</h2>
      </div><!-- end jumbotron-->
<h5 class="text-center text-light">Written and coded by <a href="" target="_blank">Sébastien Camberou.</a></h5>

</div><!--end container-->



  margin-top : 60px;
  background-image : url("")

img {
  display: block;

  margin-left: 15%;
  margin-right: 15%;


                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.