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

JavaScript

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

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.

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.

HTML

            
              <style>
  .gray-background {background-color: gray;}

</style>


<div class="fluid container gray-background">

  <h1 style="font-size: 400%" class="text-center">Benjamin Franklin</h1>
  <h3 class="text-center"> Founding Father of the United States</h3>
  <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/BenFranklinDuplessis.jpg">

  <h4>
  Here's some of Benjamin Franklin's accomplishments: </h4>

  <ul>
    <li> 1706: Born on 17 Jan. in Boston, the tenth son of a soap maker. </li>
    <li> 1718: At the age of 12 he was apprenticed to his brother James, a printer. </li>
    <li> 1721: James starts Boston's first newspaper. Wanting to write for the paper at the age of 15, Benjamin begins writing the Silence Dogood letters. </li>
    <li> 1723: Ran away from his apprenticeship due to harsh treatment from his brother. </li>
    <li> 1723: Arrived in Philadelpha on 06 Oct. has a chance meeting with future wife Debora Read. </li>

    <li> 1728: First child, William, is born. The mothert is unknown. </li>
    <li> 1729: Bought the Pennsylvania Gazette. Among other firsts this paper was the first to publish a political cartoon, it was authored by Ben himself.</li>
    <li> 1730: Marries childhood sweetheart Deborah Read. </li>
    <li>1731: Helped launch The Library Company. The nations first subscription library.</li>
    <li> 1733: Started publishing Poor Richard's Almanac. </li>
    <li> 1736: Organized Philadelphia's Union Fire Company, the first in the city.</li>
    <li> 1743: Helped launch the American Philosophical Society. The first learned society in America.</li>
    <li>1743: Invented the Franklin Stove to warm houses. Because it was for the public good he never took out a patent. Other inventions: swim fins; glass armonica (a musical instrument); bifocal glasses; lightning rods. </li>
    <li>1751: Brought together the group that would form the Pennsylvania Hospital.</li>
    <li>1752: Helped found the Philadelphia Contribution For Insurance Against Loss By Fire.</li>
    <li>1765: Persuaded England to repeal the Stamp Act. Began working in earnest on his 1754 plan for a United Colonies.</li>
    <li> 1776: Signed the Declaration of Independence.</li>
    <li> 1778: Secured the Treaty of Alligance with France and arranged for loans and persuaded the French they were doing the right thing supporting the colonies in their fight for independence.</li>
    <li> 1783: Signed the Treaty of Paris ending the Revolutionary War. </li>
    <li> 1789: Last public act was to write an anti-slavery treatise.</li>
    <li> 1790: Dies 17 April at the age of 84. 20,000 people attend his funeral.</li>
  </ul>
    <H4 class="text-center">
    Click to read more about <a  href="https://en.wikipedia.org/wiki/Benjamin_Franklin" style="color: palegreen;" target="_blank">Benjamin Franklin</a>.</h4>
</div>
<h5 class="text-center"> Written and coded by George Miller </h5>
            
          
!

CSS

            
              body {
  Margin-top: 60px;
}
            
          
!

JS

            
              
            
          
!
999px

Console