css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

              <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>
              .wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;

  @media (min-width: 550px) {

    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col] 1fr );
      grid-template-rows: repeat(5, [row] auto) ;
      grid-column-gap: 1em;
      grid-row-gap: 15px;

    .mainheader {
      grid-column: col / span 12;
      grid-row: row ;

    .mainfooter {
      grid-column: col / span 12;
      grid-row: row 3 ;

    .content {
      grid-column: col 5 / span 8;
      grid-row: row 2 ;

    .panel {
      grid-column: col / span 4;
      grid-row: row 2 ;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................