css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <html>
  <body class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="text-center display-1 get-space-lots">Isaac Newton</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <img src="http://blog.mediander.com/wp-content/uploads/2015/12/IsaacNewton.jpg" id="main-portrait" class="img-fluid rounded-circle mx-auto d-block" alt="image of isac newton">
      </div>
      <div id="intro" class="col-lg-12 lead">
        <p>Born in 1643 in Woolsthorpe, England, Sir Isaac Newton began developing his influential theories on light, calculus and celestial mechanics while on break from Cambridge University. Years of research culminated with the 1687 publication of “Principia,” a landmark work that established the universal laws of motion and gravity. Newton’s second major book, “Opticks,” detailed his experiments to determine the properties of light. Also a student of Biblical history and alchemy, the famed scientist served as president of the Royal Society of London and master of England’s Royal Mint until his death in 1727.</p>
      </div>
      </div>
      
        <blockquote class="blockquote text-center get-space-lots">
          <p class="mb-0">We build too many walls and not enough bridges.</p>
          <footer class="blockquote-footer">Isac Newton <cite title="Source Title"><a           href="https://www.brainyquote.com/quotes/quotes/i/isaacnewto129998.html" target="_blank">brainyquote.com</a></cite></footer>
        </blockquote>   
    <h2 style="margin-bottom: 5rem" class="text-center">Major accomplishments of Isaac Newton</h2>
     
    <!-- start new card deck -->
   
    <div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="https://i.ytimg.com/vi/3J5HCAf61N0/maxresdefault.jpg" alt="image illustrating motion">
    <div class="card-body">
      <h4 class="card-title">Newton’s three laws of motion laid the foundation of classical mechanics</h4>
      <p class="card-text">Newton first compiled his three laws of motion, inertia, F = ma and action-reaction, in his 1687 work Principia. They describe the relationship between a body and the forces acting upon it, and its motion in response to those forces. Newton’s laws were verified by experiment and observation for over 200 years and they still remain excellent approximations at the scales and speeds of everyday life. They laid the foundation of classical mechanics due to which it is also widely known as Newtonian mechanics. Classical mechanics describes the motion of bodies under the influence of a system of forces and, since Newton, has remained a principal field of study in mathematics as well as physics.</p>
     
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://wallinsider.com/wp-content/uploads/2017/08/Gravitational-Force-Wallpapers-6.jpg" alt="image illustrating gravity">
    <div class="card-body">
      <h4 class="card-title">He was the first to formulate the notion of gravity as a universal force</h4>
      <p class="card-text">In Principia, Newton formulated his law of universal gravitation which states that any two bodies in the universe attract each other with a force that is directly proportional to the product of their masses and inversely proportional to the square of the distance between them. Among other things, the revolutionary law helped in explaining phenomena such as the tides and trajectories of comets. Newton’s universal gravitation law was superseded by Einstein’s theory of general relativity later, but it continues to be used as an excellent approximation of the effects of gravity in most applications.</p>
      
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://pbs.twimg.com/media/DD9H1H1XkAALblt.jpg" alt="image of pricipia">
    <div class="card-body">
      <h4 class="card-title">Newton’s Principia is one of the most important works in the history of science</h4>
      <p class="card-text">On 5th July 1687 Newton’s Philosophiæ Naturalis Principia Mathematica, simply known as Principia, was first published. In it, with his theory of calculus and laws of motion and universal gravitation, Newton provided a revolutionary new mathematical description of the Universe. Apart from other things, he combined his laws to explain Kepler’s laws of planetary motion. Newton thus removed the last doubts about the validity of the heliocentric model of the Solar System. Principia was instrumental in enabling the industrial revolution that followed soon and is still useful in non-relativistic technologies of the modern world. It is regarded not only as Newton’s most important work but also the fundamental work for the whole of modern science.</p>
     
    </div>
  </div>
</div>
    
    <!-- stop new card deck -->
    
    
    
    <div class="jumbotron get-space-lots">
  <h1 class="display-3">Still want more?</h1>
  <p class="lead">There are many interesting sites about Isaac Newton, start by checking out his biography!</p>
  <hr class="my-4">
  
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="https://www.biography.com/people/isaac-newton-9422656" target="_blank" role="button">Science away!</a>
  </p>
</div>
    
    
    
  </body>
</html>
            
          
!
            
              body {
  margin-top: 2rem;
}

.get-space {
  margin: 2rem 0rem 2rem 0rem;
}

.get-space-lots {
  margin: 5rem 0rem 5rem 0rem;
}

#main-portrait {
  height: 26rem;
}

#intro {
  margin-top: 5rem;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console