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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css
  2. https://codepen.io/rachelandrew/pen/7e10b01d33826401e0bf8e07ce95ac4b/

External JavaScript

This Pen doesn't use any external JavaScript resources.