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.
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<header>
<h1>Land <span>of the</span> Lost</h1>
<img src="mountain-range-front.png">
</header>
<main>
<p>From this point he marched two stages—ten parasangs—to the river Psarus, which is two hundred feet broad, and from the Psarus he marched a single stage—five parasangs—to Issi, the last city in Cilicia. It lies on the seaboard—a prosperous, large and flourishing town. Here they halted three days, and here Cyrus was joined by his fleet. There were thirty-five ships from Peloponnesus, with the Lacedaemonian admiral Pythagoras on board. These had been piloted from Ephesus by Tamos the Egyptian, who himself had another fleet of twenty-five ships belonging to Cyrus. These had formed Tamos's blockading squadron at Miletus, when that city sided with Tissaphernes; he had also used them in other military services rendered to Cyrus in his operations against that satrap. There was a third officer on board the fleet, the Lacedaemonian Cheirisophus, who had been sent for by Cyrus, and had brought with him seven hundred hoplites, over whom he was to act as general in the service of Cyrus. The fleet lay at anchor opposite Cyrus's tent. Here too another reinforcement presented itself. This was a body of four hundred hoplites, Hellenic mercenaries in the service of Abrocomas, who deserted him for Cyrus, and joined in the campaign against the king.</p>
<p>From Issi, he marched a single stage—five parasangs—to the gates of Cilicia and Syria. This was a double fortress: the inner and nearer one, which protects Cilicia, was held by Syennesis and a garrison of Cilicians; the outer and further one, protecting Syria, was reported to be garrisoned by a body of the king's troops. Through the gap between the two fortresses flows a river named the Carsus, which is a hundred feet broad, and the whole space between was scarcely more than six hundred yards. To force a passage here would be impossible, so narrow was the pass itself, with the fortification walls stretching down to the sea, and precipitous rocks above; while both fortresses were furnished with gates. It was the existence of this pass which had induced Cyrus to send for the fleet, so as to enable him to lead a body of hoplites inside and outside the gates; and so to force a passage through the enemy, if he were guarding the Syrian gate, as he fully expected to find Abrocomas doing with a large army. This, however, Abrocomas had not done; but as soon as he learnt that Cyrus was in Cilicia, he had turned round and made his exit from Phoenicia, to join the king with an army amounting, as report said, to three hundred thousand men.</p>
<p>From this point Cyrus pursued his march, through Syria a single stage—five parasangs—to Myriandus, a city inhabited by Phoenicians, on the sea-coast. This was a commercial port, and numerous merchant vessels were riding at anchor in the harbour. Here they halted seven days, and here Xenias the Arcadian general, and Pasion the Megarian got on board a trader, and having stowed away their most valuable effects, set sail for home; most people explained the act as the outcome of a fit of jealousy, because Cyrus had allowed Clearchus to retain their men, who had deserted to him, in hopes of returning to Hellas instead of marching against the king; when the two had so vanished, a rumour spread that Cyrus was after them with some ships of war, and some hoped the cowards might be caught, others pitied them, if that should be their fate.</p>
</main>
@font-face {
font-family: 'Sucrose Bold Two';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2') format('woff2');
}
@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');
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg) no-repeat;
padding-top: 61.93333333%;
background-size: cover;
font-family: 'Sucrose Bold Two';
}
header img {
position: absolute;
top: 0;
right: 0;
width: 45.8%;
}
header h1 {
position: fixed;
top: 2rem;
right: 2rem;
font-size: 12vw;
line-height: .8;
margin-top: 0;
text-align: center;
}
header h1 span {
display: block;
font-size: 8.75vw;
}
main {
background: #fff;
position: relative;
border: 1px solid #fff;
font-family: 'IM Fell French Canon Pro';
font-size: 1.4rem;
padding: 2rem 25%;
line-height: 1.6;
}
@media all and (max-width: 400px) {
main { padding: 2rem; }
}
Also see: Tab Triggers