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">
  <h1>A Balloon Ascension at Midnight</h1>
  <p>We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime.</p>

<p>After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth.</p>

<p>I might add that these facts were but vaguely known to me before I had been introduced, by a mutual friend, to this nouveau siècle young sportsman, and had accepted his invitation to accompany him in his next aerial voyage.</p>

<p>When we reached the vacant lot at the huge gas works of St. Denis, where our balloon was being inflated, I could not help feeling a bit alarmed at the sight of that little bubble—only a few hundred cubic metres—and the very small basket which were soon to take us up in the air.</p>

<p>All the éclat, the ceremonial, and the emotional “good-bys” that usually accompany the “let her go!” of a balloon, were totally lacking when the “Rolla” left the earth. The start was effected in a quiet and business like manner, and the act seemed so natural to the people who were helping us off, that their demeanor on this occasion had a beneficial and soothing effect on my excited nerves.</p>

<p>A few minutes after midnight, when the last little sacks of sand ballast had been hung out over the edge of our wicker-basket, when a final glance had been given to the ropes, the net, the valve, etc.,—with a careless au revoir from the foreman of the gas-works, and a parting joke from the cocher who had driven us there,—the dark forms, whose hands were holding us down, silently stepped back, and with a gentle and graceful swing the “Rolla” started off on its sixth ascension.</p>

<p>Had we taken with us another small sack of ballast, our balloon could not have left the earth. In other words, its ascensional force was almost balanced by the weight it was expected to carry. After rising a few hundred feet, and finding a cooler current, which slightly condensed the gas, the “Rolla” ceased to ascend. We were met by a gentle breeze from the north west, and began to cross Paris, a couple of hundred yards above the city.</p>

<p>It would take the pen of a Carlyle to describe our mysterious flight over Paris at midnight. The impression was so startling that for an hour we never spoke above a whisper.</p>

<p>Owing to the increasing coolness of the atmosphere, our balloon had a slight, though constant, tendency to descend. But we easily kept our altitude by occasionally throwing overboard a spoonful or two of ballast.</p>

<p>After ascertaining that we would not come in contact with the towers of Notre Dame or the sharp edges of the Eiffel Tower, we decided to keep the same distance, and let the breeze do the rest.</p>
              body {
  font: 1.2em/1.3 'Lora', serif;

h1 {
  font: 220% 'Patua One', cursive;
  font-weight: normal;

h1+p::first-letter {
  font-weight: bold;
  -webkit-initial-letter: 4 3;
  initial-letter: 4 3;

.wrapper {
  max-width: 700px;
  margin: 40px auto;
🕑 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 ..................