Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p><a href="#bottom" id="top"><strong>Click here</strong> to journey to the bottom of the page…</a></p>
<section>
  <h1>A Journey Into The Interior of the Earth</h1>
  <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jules-verne-autograph.svg" alt="Jules Verne"></h2>
  <h3><span>Chapter II</span>A Mystery To Be Solved At Any Price</h3>
<p>That study of his was a museum, and nothing else. Specimens of everything known in mineralogy lay there in their places in perfect order, and correctly named, divided into inflammable, metallic, and lithoid minerals.</p>

<p>How well I knew all these bits of science! Many a time, instead of enjoying the company of lads of my own age, I had preferred dusting these graphites, anthracites, coals, lignites, and peats! And there were bitumens, resins, organic salts, to be protected from the least grain of dust; and metals, from iron to gold, metals whose current value altogether disappeared in the presence of the republican equality of scientific specimens; and stones too, enough to rebuild entirely the house in Königstrasse, even with a handsome additional room, which would have suited me admirably.</p>

<p>But on entering this study now I thought of none of all these wonders; my uncle alone filled my thoughts. He had thrown himself into a velvet easy-chair, and was grasping between his hands a book over which he bent, pondering with intense admiration.</p>

<p>“Here’s a remarkable book! What a wonderful book!” he was exclaiming.</p>

<p>These ejaculations brought to my mind the fact that my uncle was liable to occasional fits of bibliomania; but no old book had any value in his eyes unless it had the virtue of being nowhere else to be found, or, at any rate, of being illegible.</p>

<p>“Well, now; don’t you see it yet? Why I have got a priceless treasure, that I found his morning, in rummaging in old Hevelius’s shop, the Jew.”</p>

<p>“Magnificent!” I replied, with a good imitation of enthusiasm.</p>

<p>What was the good of all this fuss about an old quarto, bound in rough calf, a yellow, faded volume, with a ragged seal depending from it?</p>

<p>But for all that there was no lull yet in the admiring exclamations of the Professor.</p>

<p>“See,” he went on, both asking the questions and supplying the answers. “Isn’t it a beauty? Yes; splendid! Did you ever see such a binding? Doesn’t the book open easily? Yes; it stops open anywhere. But does it shut equally well? Yes; for the binding and the leaves are flush, all in a straight line, and no gaps or openings anywhere. And look at its back, after seven hundred years. Why, Bozerian, Closs, or Purgold might have been proud of such a binding!”</p>

<p>While rapidly making these comments my uncle kept opening and shutting the old tome. I really could do no less than ask a question about its contents, although I did not feel the slightest interest.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Édouard_Riou_Illustration.png" id="professor" alt="A black-and-white painting of a haughty man smoking a pipe in a 19th century library">
<p>“And what is the title of this marvellous work?” I asked with an affected eagerness which he must have been very blind not to see through.</p>

<p>“This work,” replied my uncle, firing up with renewed enthusiasm,
“this work is the Heims Kringla of Snorre Turlleson, the most famous
Icelandic author of the twelfth century! It is the chronicle of the
Norwegian princes who ruled in Iceland.”</p>

<p>“Indeed;” I cried, keeping up wonderfully, “of course it is a German translation?”</p>

<p>“What!” sharply replied the Professor, “a translation! What should I do with a translation? This is the Icelandic original, in the magnificent idiomatic vernacular, which is both rich and simple, and admits of an infinite variety of grammatical combinations and verbal modifications.”</p>

<p>“Like German.” I happily ventured.</p>

<p>“Yes,” replied my uncle, shrugging his shoulders; “but, in addition to all this, the Icelandic has three numbers like the Greek, and irregular declensions of nouns proper like the Latin.”</p>

<p>“Ah!” said I, a little moved out of my indifference; “and is the type good?”</p>

<p>“Type! What do you mean by talking of type, wretched Axel? Type! Do you take it for a printed book, you ignorant fool? It is a manuscript, a Runic manuscript.”</p>

<p>“Runic?”</p>

<p>“Yes. Do you want me to explain what that is?”</p>

<p>“Of course not,” I replied in the tone of an injured man. But my uncle persevered, and told me, against my will, of many things I cared nothing about.</p>

<p>“Runic characters were in use in Iceland in former ages. They were invented, it is said, by Odin himself. Look there, and wonder, impious young man, and admire these letters, the invention of the Scandinavian god!”</p>

<p>Well, well! not knowing what to say, I was going to prostrate myself before this wonderful book, a way of answering equally pleasing to gods and kings, and which has the advantage of never giving them any embarrassment, when a little incident happened to divert conversation into another channel.</p>

<p>This was the appearance of a dirty slip of parchment, which slipped out of the volume and fell upon the floor.</p>

<p>My uncle pounced upon this shred with incredible avidity. An old document, enclosed an immemorial time within the folds of this old book, had for him an immeasurable value.</p>

<p>“What’s this?” he cried.</p>

<p>And he laid out upon the table a piece of parchment, five inches by three, and along which were traced certain mysterious characters.</p>

<p>Here is the exact facsimile. I think it important to let these strange signs be publicly known, for they were the means of drawing on Professor Liedenbrock and his nephew to undertake the most wonderful expedition of the nineteenth century.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cryptogramme-runes.png" alt="Diagram of a series of runes" id="runes">
</section>
<p><a href="#top" id="bottom"><strong>Click here</strong> to jump back up to the top…</a></p>
              
            
!

CSS

              
                @font-face {
    font-family: 'IM Fell French Canon Pro';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body { 
  font-family: IM Fell French Canon Pro;
  scroll-behavior: smooth;
  margin: 3rem;
  > p:first-of-type, >p:last-of-type {
    font-style: italic;
    font-size: 1.2rem;
    a {
      text-decoration: none;
      color: #222; 
      font-weight: bolder;
    }
  }
  >p:last-of-type {
    text-align: right;
  }
}
section { 
  max-width: 40rem;
  line-height: 1.4;
  margin: 0 auto;
  h1 {
    font-size: 3rem;
  }
  h2 {
    text-align: center;
    margin: 0;
  img {
    width: 40%;
    min-width: 200px;
  }
  }
  h3 { 
    font-size: 2.3rem;
    text-align: center;
    span {
      display: block;
      &:after {
        content: ":";
      }
    }
  }
  p {
      font-size: 1.4rem;
  }
  img#runes {
    display: block;
    max-width: 100%;
  }
  #professor {
    float: right;
    margin-left: 3rem;
    width: 17.8rem;
    @media all and (max-width: 600px) {
      float: none;
      display: block;
      width: 75%;
      margin: 0 auto;
    }
  }
}
              
            
!

JS

              
                var anchorLink = document.querySelector("a[href='#bottom']"),
target = document.getElementById("bottom");
anchorLink.addEventListener("click", function(e) {
    if (window.scrollTo) {
        e.preventDefault();
        window.scrollTo({"behavior": "smooth", "top": target.offsetTop});
    }
})
              
            
!
999px

Console