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="panel">
  <h2>Chapter Six: Ascents by Messrs Glaisher and Coxwell</h2>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery6.jpg" alt="single balloon" class="image1">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery2.jpg" alt="Balloons, Bristol habour" class="image2">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery5.jpg" alt="Balloons passing some cranes" class="image3">
  <div class="content">
  <p>We now come to that point in our subject where it is appropriate to give more detailed and graphic accounts of the recent doings of aeronauts. An extremely interesting description of a scientific balloon ascent is given by the celebrated aeronaut, Mr Glaisher, in a pamphlet, from which we shall make a few extracts. (See Note 1.) His description is illustrative of the subject of ballooning, and contains the salient points of several ascents.</p>

<p>He asks us to imagine the balloon somewhat more than half inflated, eager for flight, with only one link connecting it with earth, namely, a rope attached to an instrument, called a liberating iron catch. When all the ballast, instruments, etcetera, were placed in the car, Mr Coxwell brought the balloon to a nice and even balance, so that the addition of twenty pounds would have prevented it from rising.</p>

<p>As the moment for departure drew near, friends became impatient, and every one anxiously watched the final arrangements, which were made by Mr Coxwell, on whom was laid the important duty of letting go. His hand was on the catch, his countenance was fixed, and his expression stern, as he gazed up into the heavens. He was waiting for the right moment, for the sky was partially cloudy, and it was necessary to wait until the balloon was midway between the cloud that had just passed and the next that was approaching, so that the aeronauts might have a clear sky, and be able to see the earth they were about to quit for a time. Nor was this all; he knew that in every wind, however strong it might be, there are periods of calm. If he could start in one of these he would avoid much rotatory motion. The deciding, therefore, of the exact moment for making a fair start was not so easy a matter as one might suppose.</p>

<p>Some one at this critical time, with the characteristic eagerness of poor human nature to “put its finger in the pie,” cried out “Now!” and another shouted “Pull!” but Mr Coxwell, regardless of every one, decided for himself; and, just when the wind lulled and the sun shone bright, and the balloon stood proudly erect, he pulled the trigger and they were free.</p>

<p>But they were more than free. They were suddenly in profound repose, for—however high the wind may be, however agitated the balloon, swaying to and fro with sudden and violent action, despite the efforts of many hands that endeavour to restrain it,—no sooner do aeronauts quit their hold of earth, than, in an instant, all agitation ceases and they are in perfect stillness, without any sense of motion whatever; and this freedom continues throughout the entire flight—except, indeed, when they sink so low as to come into contact with mother earth, when the serenity of their flight is terribly and violently interrupted, as shall be seen in the case of another balloon voyage hereafter to be described.</p>




  </div>
  
</div>
            
          
!
            
              * { box-sizing: border-box; }
body {
  padding: 40px;
  background-color: rgb(255,255,255);
  color: rgb(61, 63, 112);
  font: 1.2em/1.4 "Open Sans", sans-serif;
}

p {
  margin: 0;
  padding: 0 0 1rem 0;
}

img {
  max-width: 100%;
  display: block;
}

.panel {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr 1fr 3fr;
  grid-template-rows: 
    minmax(100px, auto) 
    minmax(50px, auto)  
    minmax(250px, auto) 
    minmax(50px, auto) 
    minmax(150px, auto);
}

.panel img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.panel .image1 {
  grid-column:1;
  grid-row: 1;
}

.panel .image2 {
  grid-column:1 / 3;
  grid-row: 3;
}

.panel .image3 {
  grid-column:2;
  grid-row: 5;
}

.panel h2 {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 1rem;
}

.panel  .content {
  grid-column: 3;
  grid-row: 1 / 6;
  padding: 0 1rem;
  column-count: 2;
}
            
          
!
999px
🕑 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.

Console