cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

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

  <div class="panel">
    <h4>Chapter listing</h4>
      <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>

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

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

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

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

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................