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

              
                <!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet'>
</head>
<body>
  <main id="main">
    <h1 id="title">Sir Isaac Newton</h1>
    <center>
    <div id="img-div">

      <img src="https://www.biography.com/.image/t_share/MTE1ODA0OTcxNzM3MTIyMzE3/sir-isaac-newton-9422656-1-402.jpg" id="image" alt="sir Isaac Newton" id="image">

      <p id="img-caption">Sir Issac Newton (1643- 1726)</p>
    </div>
    </center>

    <div>
      <h2>The well-known scientist</h2>
      <p>Sir Issac Newton (1643- 1726) was an English mathematician, physicist and scientist. He is widely regarded as one of the most influential scientists of all time, developing new laws of mechanics, gravity and laws of motion. His work Principia Mathematica
        (1687) laid the framework for the Scientific Revolution of the Seventeenth Century. A great polymath, Newton’s investigations also included areas of optics, religion and alchemy.
      </p>
      <h2>Early life of Newton</h2>
      <p>Sir Isaac Newton was born on Christmas Day, in 1643, to a relatively poor farming family. His father died three months before he was born. His mother later remarried, but her second husband did not get on with Isaac; leading to friction between
        Isaac and his parents. The young Isaac attended school at King’s School, Grantham in Lincolnshire (where his signature is still inscribed on the walls.) Isaac was one of the top students, but before completing his studies his mother withdrew him
        from school, so Isaac could work as a farmer. It was only through the intervention of the headmaster that Isaac was able to return to finish his studies; he passed his final exams with very good results and was able to go to Trinity College, Cambridge.
      </p>

    </div>
    <article>
      <h2>Mathematical achievement of Newton</h2>
      <ul>
        <li>Generalized binomial theorem</li>
        <li>Newton’s identities,</li>
        <li>Newton’s method,</li>
        <li>Classified cubic plane curves (polynomials of degree three in two variables),</li>
        <li>Substantial contributions to the theory of finite differences,</li>
        <li>Use of fractional indices</li>
        <li>Used geometry to derive solutions to Diophantine equations.</li>
        <li>Used power series with confidence and to revert power series.</li>
        <li>Discovered a new formula for pi.</li>

      </ul>
    </article>

    <p>To read more about this amazing scientist click <a href="https://www.biographyonline.net/scientists/isaac-newton.html" target="_blank" id="tribute-link">here</a></p>
  </main>
</body>
</html>
              
            
!

CSS

              
                body{
   scroll-behaviour:smooth;
}
main{
  background-color:;
}
h1#title{
  text-align:center;
  font-size:50px;
}
div#img-div{
  background-color:#a2b9bc;
  text-align:center;
  padding:10px;
  height:;
  width:
}
img{
  height:300px;
  width:100%;
  display:block;
}
div{
  background-color:#a2b9bc;
  margin:40px 70px 20px 70px;
  padding:20px 50px 20px 50px;
}
article{
  margin:20px 70px 10px 70px;
  padding:10px 100px 10px 100px;
  background-color:#a2b9bc;
}
p{
  text-align:center;
}
@media(max-width:800px){
 
  h2{
    font-size:16px;
  }
  p{
    font-size:12px;
  }
  div,article{
    margin:20px;
    padding:20px;
  }
}
#title{
  font-family:Sanchez;
}
              
            
!

JS

              
                
              
            
!
999px

Console