HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<header id="top">
<h1>The Star</h1>
<h2><cite>H.G. Wells</cite></h2>
</header>
<main>
<article>
<p>It was on the first day of the New Year that the announcement was made, almost simultaneously from three observatories, that the motion of the planet Neptune, the outermost of all the planets that wheel about the sun, had become very erratic. Ogilvy had already called attention to a suspected retardation in its velocity in December. Such a piece of news was scarcely calculated to interest a world the greater portion of whose inhabitants were unaware of the existence of the planet Neptune, nor outside the astronomical profession did the subsequent discovery of a faint remote speck of light in the region of the perturbed planet cause any very great excitement. Scientific people, however, found the intelligence remarkable enough, even before it became known that the new body was rapidly growing larger and brighter, that its motion was quite different from the orderly progress of the planets, and that the deflection of Neptune and its satellite was becoming now of an unprecedented kind.
</p>
<p>Few people without a training in science can realise the huge isolation of the solar system. The sun with its specks of planets, its dust of planetoids, and its impalpable comets, swims in a vacant immensity that almost defeats the imagination. Beyond the orbit of Neptune there is space, vacant so far as human observation has penetrated, without warmth or light or sound, blank emptiness, for twenty million times a million miles. That is the smallest estimate of the distance to be traversed before the very nearest of the stars is attained. And, saving a few comets more unsubstantial than the thinnest flame, no matter had ever to human knowledge crossed this gulf of space, until early in the twentieth century this strange wanderer appeared. A vast mass of matter it was, bulky, heavy, rushing without warning out of the black mystery of the sky into the radiance of the sun. By the second day it was clearly visible to any decent instrument, as a speck with a barely sensible diameter, in the constellation Leo near Regulus. In a little while an opera glass could attain it.
</p>
<p>On the third day of the new year the newspaper readers of two hemispheres were made aware for the first time of the real importance of this unusual apparition in the heavens. 'A Planetary Collision,' one London paper headed the news, and proclaimed Duchaine's opinion that this strange new planet would probably collide with Neptune. The leader writers enlarged upon the topic; so that in most of the capitals of the world, on January 3rd, there was an expectation, however vague of some imminent phenomenon in the sky; and as the night followed the sunset round the globe, thousands of men turned their eyes skyward to see--the old familiar stars just as they had always been.
</p>
<p> Until it was dawn in London and Pollux setting and the stars overhead grown pale. The Winter's dawn it was, a sickly filtering accumulation of daylight, and the light of gas and candles shone yellow in the windows to show where people were astir. But the yawning policeman saw the thing, the busy crowds in the markets stopped agape, workmen going to their work betimes, milkmen, the drivers of news-carts, dissipation going home jaded and pale, homeless wanderers, sentinels on their beats, and in the country, labourers trudging afield, poachers slinking home, all over the dusky quickening country it could be seen--and out at sea by seamen watching for the day--a great white star, come suddenly into the westward sky!
</p>
<p> Brighter it was than any star in our skies; brighter than the evening star at its brightest. It still glowed out white and large, no mere twinkling spot of light, but a small round clear shining disc, an hour after the day had come. And where science has not reached, men stared and feared, telling one another of the wars and pestilences that are foreshadowed by these fiery signs in the Heavens. Sturdy Boers, dusky Hottentots, Gold Coast Negroes, Frenchmen, Spaniards, Portuguese, stood in the warmth of the sunrise watching the setting of this strange new star.
</p>
<p> And in a hundred observatories there had been suppressed excitement, rising almost to shouting pitch, as the two remote bodies had rushed together; and a hurrying to and fro, to gather photographic apparatus and spectroscope, and this appliance and that, to record this novel astonishing sight, the destruction of a world. For it was a world, a sister planet of our earth, far greater than our earth indeed, that had so suddenly flashed into flaming death. Neptune it was, had been struck, fairly and squarely, by the strange planet from outer space and the heat of the concussion had incontinently turned two solid globes into one vast mass of incandescence. Round the world that day, two hours before the dawn, went the pallid great white star, fading only as it sank westward and the sun mounted above it. Everywhere men marvelled at it, but of all those who saw it none could have marvelled more than those sailors, habitual watchers of the stars, who far away at sea had heard nothing of its advent and saw it now rise like a pigmy moon and climb zenithward and hang overhead and sink westward with the passing of the night.
</p>
<p> And when next it rose over Europe everywhere were crowds of watchers on hilly slopes, on house-roofs, in open spaces, staring eastward for the rising of the great new star. It rose with a white glow in front of it, like the glare of a white fire, and those who had seen it come into existence the night before cried out at the sight of it. "It is larger," they cried. "It is brighter!" And, indeed the moon a quarter full and sinking in the west was in its apparent size beyond comparison, but scarcely in all its breadth had it as much brightness now as the little circle of the strange new star.
</p>
<p>"It is brighter!"" cried the people clustering in the streets. But in the dim observatories the watchers held their breath and peered at one another. "<em>It is nearer</em>," they said. "<em>Nearer!</em>"
</p>
<a href="https://commapress.co.uk/resources/online-short-stories/the-star-h.g.-wells/" target="_blank">Continue reading...</a>
</article>
<div class="back-to-top-wrapper">
<a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
</div>
</main>
<footer>
<p>© ACME</p>
</footer>
// Learn about this technique:
// @link https://moderncss.dev/pure-css-smooth-scroll-back-to-top/
$color: #254568;
$main-width: 50rem;
// How far of a scroll travel within <main> prior to the
// link appearing
$scrollLength: 100vh;
* {
box-sizing: border-box;
}
// Smooth scrolling IF user doesn't have a preference due to motion sensitivities
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
main {
// leave room for the "scroll track"
padding: 0 3rem;
// required to make sure the `absolute` positioning of
// the anchor wrapper is indeed `relative` to this element vs. the body
position: relative;
max-width: $main-width;
margin: 2rem auto;
// Optional, clears margin if last element is a block item
*:last-child {
margin-bottom: 0;
}
}
.back-to-top-wrapper {
// uncomment to visualize "track"
// outline: 1px solid red;
position: absolute;
top: $scrollLength;
right: 0.25rem;
bottom: -5em;
width: 3em;
pointer-events: none;
}
.back-to-top-link {
// `fixed` is fallback
position: fixed;
// preferred positioning, requires prefixing for most support, and not supported on Safari
// @link https://caniuse.com/#search=position%3A%20sticky
position: sticky;
// reinstate clicks
pointer-events: all;
// achieves desired positioning within the viewport
// relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
top: calc(100vh - 5rem);
// basic styling
display: inline-block;
text-decoration: none;
font-size: 2rem;
line-height: 3rem;
text-align: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
padding: 0.25rem;
// "pretty" styles, including states
border: 1px solid $color;
background-color: scale-color($color, $lightness: 85%);
transition: transform 80ms ease-in;
&:hover,
&:focus {
transform: scale(1.1);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px scale-color($color, $lightness: 35%);
}
}
body {
font-family: "Baloo 2", sans-serif;
min-height: 100vh;
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto auto;
// Remove default browser margin
margin: 0;
}
header,
footer {
display: grid;
place-items: center;
background-color: $color;
color: #fff;
}
header {
background-image: url(https://images.unsplash.com/photo-1513628253939-010e64ac66cd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
h1 {
font-size: 4rem;
text-align: center;
}
p {
font-size: 1.125rem;
line-height: 1.5;
}
Also see: Tab Triggers