Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="wrapper">

  <header class="mainheader">
    <h1>The Dominion of the Air <span>The Story of Aerial Navigation</span></h1>
    <p>Excerpts from the book by J.M. Bacon</p>
  </header>


  <div class="panel">
    <h4>Chapter listing</h4>
    <ul>
      <li><a href="#">The Dawn of Aeronautics</a></li>
      <li><a href="#">The Invention of the Balloon</a></li>
      <li><a href="#">The First Balloon Ascent in England</a></li>
      <li><a href="#">The Development of Balloon Philosophy</a></li>
      <li><a href="#">Some Famous Early Voyagers</a></li>
      <li><a href="#">Charles Green and the Nassau Balloon</a></li>
      <li><a href="#">John Wise - The American Aeronaut</a></li>
      <li><a href="#">The Balloon in the Service of Science</a></li>
      <li><a href="#">Some Noteworthy Ascents</a></li>
      <li><a href="#">The Highest Ascent on Record</a></li>
    </ul>
  </div>

  <div class="content">
    <h2>The First Balloon Ascent in England</h2>
    <p>Following his own account, Lunardi's first act on finding himself fairly above the town was to fortify himself with some glasses of wine, and to devour the leg of a chicken. He describes the city as a vast beehive, St. Paul's and other churches standing
      out prominently; the streets shrunk to lines, and all humanity apparently transfixed and watching him. A little later he is equally struck with the view of the open country, and his ecstasy is pardonable in a novice. The verdant pastures eclipsed
      the visions of his own lands. The precision of boundaries impressed him with a sense of law and order, and of good administration in the country where he was a sojourner.</p>

    <p>By this time he found his balloon, which had been only two-thirds full at starting, to be so distended that he was obliged to untie the mouth to release the strain. He also found that the condensed moisture round the neck had frozen. These two statements
      point to his having reached a considerable altitude, which is intelligible enough. It is, however, difficult to believe his further assertion that by the use of his single oar he succeeded in working himself down to within a few hundred feet of
      the earth. The descent of the balloon must, in point of fact, have been due to a copious outrush of gas at his former altitude. Had his oar really been effective in working the balloon down it would not have needed the discharge of ballast presently
      spoken of to cause it to reascend. Anyhow, he found himself sufficiently near the earth to land a passenger who was anxious to get out. His cat had not been comfortable in the cold upper regions, and now at its urgent appeal was deposited in a corn
      field, which was the point of first contact with the earth. It was carefully received by a country-woman, who promptly sold it to a gentleman on the other side of the hedge, who had been pursuing the balloon. </p>
  </div>

  <footer class="mainfooter">
    <p>This book is available to read in full on <a href="https://www.gutenberg.org/files/861/861-h/861-h.htm">the Project Gutenburg website</a>.</p>
  </footer>

</div>
              
            
!

CSS

              
                .mainheader {
  grid-area: header;
}
.content {
  grid-area: content;
}
.panel {
  grid-area: sidebar;
}
.mainfooter {
  grid-area: footer;
}

.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    "header"
    "content"
    "sidebar"
    "footer"
}

@media (min-width: 550px) {
  
  
  .wrapper {
    grid-template-columns: 30% 65%;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer"
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console