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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
  <h1 id="title">Stephen Hawking</h1>
  <div>1942 - 2018</div>
  <div id="img-div">
    <img id="image" src="https://images.theconversation.com/files/210786/original/file-20180316-104659-v12zb.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip">
    <div id="img-caption">
          Stephen Hawking ahead of a lecture - Asturias. 
    </div>
  </div>
  <hr>
  <div id="tribute-info">
    <h3 class="introduction"><u>Who is Stephen Hawking?</u></h3>
    <p>Stephen Hawking <em>(January 8, 1942 to March 14, 2018)</em> was a British scientist, <em>professor</em> and <em>author</em> who performed groundbreaking work in <strong>physics and cosmology</strong>, and whose books helped to make science accessible to everyone. At age <em>21</em>, while studying cosmology at the <strong>University of Cambridge</strong>, he was diagnosed with <u>amyotrophic lateral sclerosis (ALS)</u>. Part of his life story was depicted in the 2014 film <em>The Theory of Everything</em>
    <h3 class="introduction"><u>Stephen Hawking’s Books:</u></h3>
    <ul>
      <p>Over the years, Stephen Hawking wrote or co-wrote a total of 15 books. A few of the most noteworthy include:</p>
      <li>A Brief History of Time:</li>
      <p>In <strong>1988</strong> Hawking catapulted to international prominence with the publication of<em>A Brief History of Time</em>. The short, informative book became an account of cosmology for the masses and offered an overview of space and time, the existence of God and the future. The work was an instant success, spending more than four years atop the London Sunday Times' best-seller list. Since its publication, it has sold millions of copies worldwide and been translated into more than 40 languages. </p>
      <li>The Universe in a Nutshell:</li>
        <p>A Brief History of Time also wasn't as easy to understand as some had hoped. So in <em>2001</em>, Hawking followed up his book with <strong>The Universe in a Nutshell</strong>, which offered a more illustrated guide to cosmology's big theories.</p>
        <li>A Briefer History of Time:</li>
        <p>In <em>2005</em>, Hawking authored the even more accessible <strong>A Briefer History of Time</strong>, which further simplified the original work's core concepts and touched upon the newest developments in the field like string theory.   

Together these three books, along with Hawking's own research and papers, articulated the physicist's personal search for science's Holy Grail: a single unifying theory that can combine cosmology <em>(the study of the big)</em> with quantum mechanics <em>(the study of the small)</em> to explain how the universe began. This kind of ambitious thinking allowed Hawking, who claimed he could think in 11 dimensions, to lay out some big possibilities for humankind. He was convinced that time travel is possible, and that humans may indeed colonize other planets in the future.</p>
        <li>The Grand Design:</li>
        <p>In <em>September 2010</em>, Hawking spoke against the idea that God could have created the universe in his book <strong>The Grand Design</strong>. Hawking previously argued that belief in a creator could be compatible with modern scientific theories. In this work, however, he concluded that the <em>Big Bang</em> was the inevitable consequence of the laws of physics and nothing more. <em><u>"Because there is a law such as gravity, the universe can and will create itself from nothing,"</u></em> Hawking said. <em><u>"Spontaneous creation is the reason there is something rather than nothing, why the universe exists, why we exist."</u></em></p>
    </ul>
      <h3 class="introduction"><u>TV and Film Appearances:</u></h3>
    <ul>
      <li><strong>In 2012</strong>, Hawking showed off his humorous side on American television, making a guest appearance on <em>The Big Bang Theory</em>.</li>
      <li><strong>In November of 2014</strong>, a film about the life of Stephen Hawking and Jane Wilde was released. <em>The Theory of Everything</em></li>
      <li><strong>In May 2016</strong>, Hawking hosted and narrated <em>Genius</em>, a six-part television series which enlists volunteers to tackle scientific questions that have been asked throughout history.</li>
      <li><strong>In 2011</strong>, Hawkings had participated in a trial of a new headband-styled device called the <em>iBrain</em>. The device is designed to "read" the wearer's thoughts by picking up "waves of electrical brain signals,"</li>
      <li><strong>In 2014</strong>, Hawking, among other top scientists, spoke out about the possible dangers of artificial intelligence, or AI, calling for more research to be done on all of possible ramifications of AI.</li>
      <li><strong>In July 2015</strong>, Hawking held a news conference in London to announce the launch of a project called Breakthrough Listen. Funded by Russian entrepreneur Yuri Milner, Breakthrough Listen was created to devote more resources to the discovery of extraterrestrial life.</li>
    </ul>
     <footer> 
       <p id="footer">"However difficult life may seem, there is always something you can do and succeed at"</p>
      Want to know more about the greatest Stephen Hawking give a visit to : 
       <a id="tribute-link" href="https://www.bbc.co.uk/news/world-43395807" target="_blank">This Site.</a>
    </footer>
  </div>
</div> 

              
            
!

CSS

              
                html,body{
  font-family: Trebuchet MS, sans-serif;
  color: black;
  text-align: center;
  min-width: 300px;
}
#main {
  background: #eee9cd;
  border: 10px solid black;
  border-radius: 5px;
  margin: 20px auto;
  padding: 20px;
}
#title{
  font-family: Garamond;
  font-weight: bold;
}
div {
  margin: 10px;
  padding: 5px;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}
#img-div {/*should be centered withim its parents element*/
  margin-top: 10px;
  margin: -3px;
  width: 100%;
  border: 3px solid #eee9cd;
  background: #eee9cd;
  border-radius: 10px;
}
#img-caption {
  font-weight: bolder;
  margin-bottom: 5px;
}
#tribute-info {
  margin: auto;
  padding: auto;
  text-align: center;
}
h3{
  font-family: Garamond;
  font-weight: bold;
}
.introduction, ul > p{
  text-align: left;
  font-family: ;
  font-size: 20px;
}
ul{
  margin: 10px;
}
li {
  margin: 0 auto;
  max-width: 1500px;
  text-align: left;
}
#footer{
  font-weight: bold;
}
#tribute-link{
  color: #ff4040;
  font-style: italic;
  text-decoration: none;
  font-weight: bold;
}
#tribute-link:hover{
  background-color: #7c4f4f;
  font-weight: bold;
  color: white;
}
              
            
!

JS

              
                // !! 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. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - 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. 

              
            
!
999px

Console