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.
<div class="c-container">
<p>
One November night in the year 1782, so the story runs, two
brothers sat over their winter fire in the little French town of
Annonay, watching the grey smoke-wreaths from the hearth curl up
the wide chimney. Their names were Stephen and Joseph
Montgolfier, they were papermakers by trade, and were noted as
possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a
memorable night, as it was to prove—hundreds of millions of
people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact; but on
this particular occasion, as Stephen, the younger of the
brothers, sat and gazed at the familiar sight, the question
flashed across his mind, “What is the hidden power that makes
those curling smoke-wreaths rise upwards, and10 could I not
employ it to make other things rise also?”
</p>
<div class="c-tabs">
<div class="c-tabs__header">
<button type="button" class="c-tabs__tab is-active js-tab" data-panel="1">
Origin of Ballooning
</button>
<button type="button" class="c-tabs__tab js-tab" data-panel="3">
Vincent Lunardi
</button>
<button type="button" class="c-tabs__tab js-tab" data-panel="3">
Famous Balloon Voyages
</button>
</div>
<div class="c-tabs__panels">
<div class="c-tabs__panel is-active js-panel" data-panel="1">
<article class="c-article">
<div class="c-article__content">
<figure class="c-article__image">
<img src="https://www.gutenberg.org/files/54799/54799-h/images/i_010.jpg" width="148px" height="177px" />
</figure>
<p>
One November night in the year 1782, so the
hen and there the brothers resolved on an
experiment. They made themselves a small
fire of some light fuel in a little tin tray
or chafing-dish, and over the smoke of it
they held a large paper-bag. And to their
delight they saw the bag fill out and make a
feeble11 attempt to rise. They were surely
on the eve of some great invention; and yet,
try as they would, their experiment would
not quite succeed, because the smoke in the
bag always became too cool before there was
enough in it to raise it from the table. But
presently, while they were thus engaged, a
neighbour of theirs, a widow lady, alarmed
by seeing smoke issuing from their window,
entered the room, and after watching their
fruitless efforts for some while, suggested
that they should fasten the tray on to the
bottom of the bag. This was done, with the
happy result that the bag immediately rose
up to the ceiling; and in this humble
fashion the first of all balloons sailed
aloft.
</p>
</div>
</article>
</div>
<div class="c-tabs__panel js-panel" data-panel="2">
<article class="c-article">
<div class="c-article__content">
<figure class="c-article__image">
<img src="https://www.gutenberg.org/files/54799/54799-h/images/i_033.jpg" width="148px" height="182px" />
</figure>
<p>
Lunardi was at this time secretary to the
Neapolitan Ambassador. He was keenly
interested in the subject of ballooning, and
presently became fired with a desire to
repeat in England those aerial experiments
which were creating such a sensation on the
Continent. He was only a poor man, and great
difficulties stood in the way of
accomplishing his object. He had to excite
public interest in his venture, to collect
subscriptions to defray the cost of his
balloon, which was to be a “Charlier,” and
to find a suitable site in London for the
inflation and ascent.
</p>
</div>
</article>
</div>
<div class="c-tabs__panel js-panel" data-panel="3">
<article class="c-article">
<div class="c-article__content">
<figure class="c-article__image">
<img src="https://www.gutenberg.org/files/54799/54799-h/images/i_045.jpg" width="148px" height="228px" />
</figure>
<p>
The most celebrated event in all his career,
however, was the voyage of the Great Nassau
Balloon, in November 1836. This voyage
created a tremendous sensation at the time,
and has always been considered one of the
most adventurous enterprises in the whole
history of aeronautics. How it came about
was as follows:—
</p>
<p>
he managers of the Vauxhall Gardens, London,
had made, with Mr. Green’s assistance, a
very large and fine balloon of crimson silk,
which stood eighty feet high and held 90,000
cubic feet of gas, and which would carry, if
needed, more than twenty persons.
</p>
</div>
</article>
</div>
</div>
</div>
<p>
"So, my friend, you are tired? Get to bed. There is the surest
rest. I may not have the pleasure to talk to-night, since there
are many labours to me; but you will sleep, I pray." I passed to
my room and went to bed, and, strange to say, slept without
dreaming. Despair has its own calms. 31 May.--This morning when
I woke I thought I would provide myself with some paper and
envelopes from my bag and keep them in my pocket, so that I
might write in case I should get an opportunity, but again a
surprise, again a shock!
</p>
<p>
Every scrap of paper was gone, and with it all my notes, my
memoranda, relating to railways and travel, my letter of credit,
in fact all that might be useful to me were I once outside the
castle. I sat and pondered awhile, and then some thought
occurred to me, and I made search of my portmanteau and in the
wardrobe where I had placed my clothes.
</p>
<p>
The suit in which I had travelled was gone, and also my overcoat
and rug; I could find no trace of them anywhere. This looked
like some new scheme of villainy....
</p>
</div>
/* ========================================================================== */
/* SETTINGS */
/* ========================================================================== */
:root {
--space-base: 1.5em;
--border-radius-base: 4px;
--duration-base: 150ms;
--easing-base: cubic-bezier(0.4, 0, 0.2, 1);
--root-bg: rgba(238 238 238 / 1);
--root-color: rgba(68 68 68 / 1);
--root-font-size: 16px;
--root-font-family: Georgia, Times, serif;
--container-max-width: 60em;
--container-column-gap: var(--space-base);
--container-column-count: 3;
--container-column-rule-color: rgba(0 0 0 / 0.15);
--tabs-bg: rgba(225 225 225 / 1);
--tabs-radius: var(--border-radius-base);
--tabs-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--tabs-header-bg: rgba(34 34 34 / 1);
--tabs-header-color: rgba(255 255 255 / 1);
--tabs-tab-padding: var(--space-base);
--tabs-tab-indicator-bg: var(--tabs-bg);
--tabs-tab-indicator-shape: 50% 0%, 0% 100%, 100% 100%;
--tabs-tab-indicator-width: var(--space-base);
--tabs-tab-indicator-height: 0.75em;
--tabs-tab-panel-padding: var(--space-base);
--article-image-gutter: var(--tabs-tab-padding);
--article-image-radius: var(--border-radius-base);
--article-image-border-color: rgba(0 0 0 / 0.15);
--article-drop-letter-font-size: 6em;
}
/* ========================================================================== */
/* GLOBAL */
/* ========================================================================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: var(--root-padding);
font: var(--root-font-size) / 1.65 var(--root-font-family);
color: var(--root-color);
background-color: var(--root-bg);
}
p + p {
margin-top: var(--space-base);
}
/* ========================================================================== */
/* COMPONENT: CONTAINER */
/* ========================================================================== */
.c-container {
column-gap: var(--container-column-gap);
column-rule: 1px solid var(--container-column-rule-color);
column-count: var(--container-column-count);
max-width: var(--container-max-width);
margin: 0 auto;
padding: 3em var(--container-column-gap);
}
/* ========================================================================== */
/* COMPONENT: TABS */
/* ========================================================================== */
.c-tabs {
overflow: hidden;
box-shadow: var(--tabs-shadow);
background: var(--tabs-bg);
border-radius: var(--tabs-radius);
}
.c-container .c-tabs {
column-span: all;
margin-top: var(--container-column-gap);
margin-bottom: var(--container-column-gap);
}
.c-tabs__header {
flex-direction: row;
align-items: center;
display: flex;
overflow: hidden;
color: var(--tabs-header-color);
background-color: var(--tabs-header-bg);
}
.c-tabs__tab {
position: relative;
padding: var(--tabs-tab-padding);
border: none;
display: block;
overflow: hidden;
color: inherit;
cursor: pointer;
text-transform: uppercase;
background-color: transparent;
}
.c-tabs__tab:after {
--notchTranslateY: 100%;
position: absolute;
bottom: -1px;
left: 50%;
display: block;
width: var(--tabs-tab-indicator-width);
height: var(--tabs-tab-indicator-height);
clip-path: polygon(var(--tabs-tab-indicator-shape));
background-color: var(--tabs-tab-indicator-bg);
transform: translateX(-50%) translateY(var(--notchTranslateY));
transition: transform var(--duration-base) var(--easing-base);
content: "";
}
.c-tabs__tab.is-active:after {
--notchTranslateY: 0;
}
.c-tabs__panels {
overflow: hidden;
}
.c-tabs__panel {
padding: var(--tabs-tab-panel-padding);
display: none;
}
.c-tabs__panel.is-active {
display: block;
}
/* ========================================================================== */
/* COMPONENT: ARTICLE */
/* ========================================================================== */
.c-article {
overflow: hidden;
}
.c-article__content:first-letter {
float: left;
padding-top: 0.125em;
padding-right: 0.125em;
font-size: var(--article-drop-letter-font-size);
line-height: 0.5;
text-indent: 0;
}
.c-article__image {
float: right;
margin-left: var(--article-image-gutter);
}
.c-article__image img {
max-width: 100%;
border-radius: var(--article-image-radius);
border: 1px solid var(--article-image-border-color);
}
(function () {
// CSS Class Names
const tabClass = "js-tab";
const panelClass = "js-panel";
const activeClass = "is-active";
// Doc Ready Handler
const ready = (fn) =>
document.readyState !== "loading"
? fn()
: document.addEventListener("DOMContentLoaded", fn);
ready(() => {
// Elements
const tabsEls = document.querySelectorAll(`.${tabClass}`);
const panelEls = document.querySelectorAll(`.${panelClass}`);
// Handler: Tab Action Click
// Clear other active tabs and panels and select clicked tab and its
// associated panel.
const handleTabClick = (e) => {
// Pseudo event delegation :)
if (!e.target.matches(`.${tabClass}`)) return;
// Clear any existing state
tabsEls.forEach((t) => t.classList.remove(activeClass));
panelEls.forEach((t) => t.classList.remove(activeClass));
// Activate Clicked Tab
e.target.classList.add(activeClass);
// Activate Panel
panelEls
.item(Array.from(tabsEls).indexOf(e.target))
.classList.add(activeClass);
};
document.addEventListener("click", handleTabClick, false);
});
})();
Also see: Tab Triggers