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


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


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.


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.


                <div class="debugging"> <a href="#" class="button js-toggle-all">Toggle all</a> <a href="#" class="button js-toggle-grid">Toggle grid</a> <a href="#" class="button js-toggle-type">Toggle type</a> <a href="#" class="button js-toggle-breakpoints">Toggle breakpoints</a>            </div>
        <div class="page">
            <p>A responsive typographic baseline for the web. </p>
            <p>Don't forget to adjust your cap heights on a per-font basis!</p>
            <h2>The Horror in Clay</h2>
            <p>The most merciful thing in the world, I think, is the inability of the human mind to correlate all its contents. We live on a placid island of ignorance in the midst of black seas of infinity, and it was not meant that we should voyage far.
                The sciences, each straining in its own direction, have hitherto harmed us little; but some day the piecing together of dissociated knowledge will open up such terrifying vistas of reality, and of our frightful position therein, that we
                shall either go mad from the revelation or flee from the deadly light into the peace and safety of a new dark age.</p>
            <p>Theosophists have guessed at the awesome grandeur of the cosmic cycle wherein our world and human race form transient incidents. They have hinted at strange survival in terms which would freeze the blood if not masked by a bland optimism.
                But it is not from them that there came the single glimpse of forbidden aeons which chills me when I think of it and maddens me when I dream of it. That glimpse, like all dread glimpses of truth, flashed out from an accidental piecing
                together of separated things—in this case an old newspaper item and the notes of a dead professor. I hope that no one else will accomplish this piecing out; certainly, if I live, I shall never knowingly supply a link in so hideous a chain.
                I think that the professor, too, intended to keep silent regarding the part he knew, and that he would have destroyed his notes had not sudden death seized him.</p>
                <li>That is not dead which can eternal lie</li>
                <li>And with strange aeons even death may die.</li>
            <div class="sidebar">
                <h3>Mystery derelict found at sea</h3>
                <p><em>Vigilant</em> Arrives With Helpless Armed New Zealand Yacht in Tow. One Survivor and Dead Man Found Aboard. Tale of Desperate Battle and Deaths at Sea. Rescued Seaman Refuses Particulars of Strange Experience. Odd Idol Found in His
                    Possession. Inquiry to Follow.</p>
                <p>The Morrison Co.'s freighter <em>Vigilant</em>, bound from Valparaiso, arrived this morning at its wharf in Darling Harbour, having in tow the battled and disabled but heavily armed steam yacht Alert of Dunedin, N.Z., which was sighted
                    April 12th in S. Latitude 34° 21', W. Longitude 152° 17', with one living and one dead man aboard.</p>
            <h2>The Tale of Inspector Legrasse</h2>
            <p>The older matters which had made the sculptor's dream and bas-relief so significant to my uncle formed the subject of the second half of his long manuscript. Once before, it appears, Professor Angell had seen the hellish outlines of the nameless
                monstrosity, puzzled over the unknown hieroglyphics, and heard the ominous syllables which can be rendered only as "Cthulhu"; and all this in so stirring and horrible a connection that it is small wonder he pursued young Wilcox with queries
                and demands for data.</p>
            <p>This earlier experience had come in 1908, seventeen years before, when the American Archaeological Society held its annual meeting in St Louis. Professor Angell, as befitted one of his authority and attainments, had had a prominent part in
                all the deliberations, and was one of the first to be approached by the several outsiders who took advantage of the convocation to offer questions for correct answering and problems for expert solution.</p>
            <p>The chief of these outsiders, and in a short time the focus of interest for the entire meeting, was a commonplace-looking middle-aged man who had travelled all the way from New Orleans for certain special information unobtainable from any
                local source. His name was John Raymond Legrasse, and he was by profession an inspector of police. With him he bore the subject of his visit, a grotesque, repulsive, and apparently very ancient stone statuette whose origin he was at a
                loss to determine.</p>
            <h2>The Madness from the Sea</h2>
            <h3>In his house at R'lyeh dead Cthulhu waits dreaming.</h3>
            <p>And now, in response to a general and urgent demand, Inspector Legrasse related as fully as possible his experience with the swamp worshippers; telling a story to which I could see my uncle attached profound significance. It savoured of the
                wildest dreams of myth-maker and theosophist, and disclosed an astonishing degree of cosmic imagination among such half-castes and pariahs as might be least expected to possess it.</p>
                <p>Of such great powers or beings there may be conceivably a survival… a survival of a hugely remote period when… consciousness was manifested, perhaps, in shapes and forms long since withdrawn before the tide of advancing humanity… forms
                    of which poetry and legend alone have caught a flying memory and called them gods, monsters, mythical beings of all sorts and kinds&hellips;</p> <cite>—Algernon Blackwood</cite> </blockquote> <pre>
<code>.the-eye {
color: midnight;
            <h4>Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn</h4>
            <p>Legrasse had one point in advance of Professor Webb, for several among his mongrel prisoners had repeated to him what older celebrants had told them the words meant. This text, as given, ran something like this:</p>
            <h5>In his house at R'lyeh dead Cthulhu waits dreaming.</h5>
            <p>And now, in response to a general and urgent demand, Inspector Legrasse related as fully as possible his experience with the swamp worshippers; telling a story to which I could see my uncle attached profound significance. It savoured of the
                wildest dreams of <em>myth-maker</em> and <em>theosophist</em>, and disclosed an astonishing degree of cosmic imagination among such half-castes and pariahs as might be least expected to possess it.</p>
                <li>1925—Dream and Dream Work of H. A. Wilcox, 7 Thomas St., Providence, R. I.</li>
                <li>Narrative of Inspector John R. Legrasse, 121 Bienville St., New Orleans, La., at 1908 A. A. S. Mtg.—Notes on Same, & Prof. Webb's Acct.</li>
                <li>Atlantis and the Lost Lemuria, W. Scott-Elliot</li>
            <p>On 1 November 1907, there had come to New Orleans police a frantic summons from the swamp and lagoon country to the south. The squatters there, mostly primitive but good-natured descendants of Lafitte's men, were in the grip of stark terror
                from an unknown thing which had stolen upon them in the night. It was voodoo, apparently, but voodoo of a more terrible sort than they had ever known; and some of their women and children had disappeared since the malevolent tom-tom had
                begun its incessant beating far within the black haunted woods where no dweller ventured. There were insane shouts and harrowing screams, soul-chilling chants and dancing devil-flames; and, the frightened messenger added, the people could
                stand it no more.</p>
            <h6>The Great Old Ones</h6>
            <p>He talked of his dreams in a strangely poetic fashion; making me see with terrible vividness the damp Cyclopean city of slimy green stone—whose geometry, he oddly said, was all wrong—and hear with frightened expectancy the ceaseless, half-mental
                calling from underground: <em>"Cthulhu fhtagn, Cthulhu fhtagn."</em></p>
            <h1>Heading level 1</h1>
            <h2>Heading level 2</h2>
            <h3>Heading level 3</h3>
            <h4>Heading level 4</h4>
            <h5>Heading level 5</h5>
            <h6>Heading level 6</h6>
            <p>Paragraph with <b>bold</b>, <i>italic</i>, <a href="#top">link</a> and <code>code</code> styles.</p>
                <p>Blockquote text</p><cite>Citation</cite></blockquote>
                <li>Ordered list element one</li>
                <li>Ordered list element two</li>
                <li>Ordered list element three</li>
                <li>Unordered list element one</li>
                <li>Unordered list element two</li>
                <li>Unordered list element three</li>




                var toggleAll = document.querySelector('.js-toggle-all');
            var toggleGrid = document.querySelector('.js-toggle-grid');
            var toggleType = document.querySelector('.js-toggle-type');
            var toggleBreakpoints = document.querySelector('.js-toggle-breakpoints');
            var rootEl = document.querySelector('html');
            var all;
            toggleAll.addEventListener("click", function(e)
                if (all == true)
            toggleGrid.addEventListener("click", function(e)
            toggleType.addEventListener("click", function(e)
            toggleBreakpoints.addEventListener("click", function(e)
            // will set toggle all state to off / on if all are on or off
            function checkState()
                if (rootEl.className.indexOf('no-debug-grid') == -1 && rootEl.className.indexOf('no-debug-type') == -1 && rootEl.className.indexOf('no-debug-breakpoints') == -1)
                    all = false;
                if (rootEl.className.indexOf('no-debug-grid') != -1 && rootEl.className.indexOf('no-debug-type') != -1 && rootEl.className.indexOf('no-debug-breakpoints') != -1)
                    all = true;