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 style="max-width: 90%; margin: 0 auto; padding: 20px; background-color: #d3d3d3; border-radius: 5px;">
<main id="main">
  <h1 id="title">James Clerk Maxwell</h1>
  <p>The man who unified electricity and magnetism</p>
  <figure id="img-div">
    <img 
         id="image" 
         src="https://upload.wikimedia.org/wikipedia/commons/e/ec/James_clerk_maxwell.jpg" 
         alt="Maxwell"
         />
    <figcaption id="img-caption">James Clerk Maxwell
    </figcaption>
  </figure>
  <section id="tribute-info">
    <h3 id="headline">The life of Maxwell:</h3>
    <ul>
      <li><b>1831</b> - Born in Edinburgh, Scotland on June 13.</li>
      <li><b>1841</b> - Begins attending Edinburgh Academy.</li>
      <li><b>1842</b> - Attends Robert Davidson's demonstration of electric propulsion and magnetic force on Feb. 12.</li>
      <li><b>1842</b> - Wins Edinburgh Academy's scripture biography prize.</li>
      <li><b>1844</b> - Wins Edinburgh Academy's mathematical medal, as well as, first prize in English and poetry.</li>
      <li><b>1845</b> - Wrote his first scientific paper called "Oval Curves".</li>
      <li><b>1847</b> - Started attending the University of Edinburgh at age 16.</li>
      <li><b>1849</b> - Contributes two papers for Transactions of the Royal Society of Edinburgh called "On the Equilibrium of Elastic Solids" and "Rolling Curves".</li>
      <li><b>1850</b> - Leaves Scotland to attend the University of Cambridge. First studying at Peterhouse, later, transferring to Trinity.</li>
      <li><b>1851</b> - Begins studying under William Hopkins.</li>
      <li><b>1854</b> - Graduates from Trinity with a degree in mathematics. Reads his paper"On the Transformation of Surfaces by Bending" to the Cambridge Philosophical Society.</li>
      <li><b>1855</b> - Writes "Experiments on Colour" and presents it to the Royal Society of Edinburgh in March. Later, in October, he was made a fellow of Trinity.</li>
      <li><b>1856</b> - Leaves Cambridge for a professorship at Aberdeen.</li>
      <li><b>1858</b> - Marries Katherine Mary Dewar.</li>
      <li><b>1859</b> - Awarded the Adams prize for his essay "On the stability of the motion of Saturn's rings."</li>
      <li><b>1860</b> - Gets laid off from Aberdeen, but, is granted the Chair of Natural Philosophy at King's College, London. Him and his wife move to London. He is awarded the Royal Society's Rumford Medal for his work on color.</li>
      <li><b>1861</b> - Publishes his two-part paper "On physical lines of force". He also demonstrated the world's first color photo.</li>
      <li><b>1862</b> - Calculated that the speed of propagation of electromagnetic fields were equal to the speed of light.</li>
      <li><b>1865</b> - Resigns from his chair at King's College.</li>
      <li><b>1871</b> - Returns to Cambridge to become the first Cavendish Professor of Physics. He also wrote the textbook <u>Theory of Heat</u>.</li>
      <li><b>1873</b> - Publishes textbook <u>A Treatise of Electricity and Magnetism</u>.</li>
      <li><b>1876</b> - Wrote the treatise <u>Matter and Motion</u>.</li>
      <li><b>1879</b> - Dies of abdominal cancer at age 48.</li>
    </ul>
    </div>
    <h3>
      To learn more about Maxwell go to his 
      <a id="tribute-link" href="https://en.m.wikipedia.org/wiki/James_Clerk_Maxwell" target="_blank">Wiki</a>.</h3>
    </section>
  </main>
              
            
!

CSS

              
                html {
  font-size: 10px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Helvetica Neue", Arial, sans-serif, Times;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 6px;
}
h1 {
  font-size: 4rem;
  margin-bottom: 0;
}
ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}
@media(max-width:460px) {
#main {
  margin:0;}
}
img { 
  max-width:100%; 
  display: block; 
  height: auto; 
  margin:0 auto;
}
#img-div {
  background: rgb( 30,30,30);
  padding: 10px;
  margin: 0;
  border-radius: 2px;
}
#img-caption {
  margin: 15px 0 5px 0;
  color: white;
}
              
            
!

JS

              
                
              
            
!
999px

Console