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>
<nav>
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</nav>
</header>
<article>
<p>Messenger bag four dollar toast 3 wolf moon, direct trade street art retro single-origin coffee stumptown flexitarian shoreditch sriracha franzen schlitz tacos butcher. Four loko truffaut echo park fashion axe, bespoke 8-bit lumbersexual helvetica kinfolk selfies chambray. Photo booth intelligentsia mixtape paleo quinoa normcore. Pabst pitchfork selfies ugh synth art party. Kale chips organic 8-bit cray tofu. Marfa humblebrag messenger bag thundercats asymmetrical stumptown. Fashion axe normcore meh disrupt, next level chambray PBR&B kitsch slow-carb artisan leggings flannel salvia fixie.</p>
<p>Gastropub chicharrones normcore butcher taxidermy. Heirloom keytar tilde, thundercats master cleanse literally pop-up flexitarian chillwave celiac mlkshk swag sartorial echo park. Polaroid tattooed mlkshk distillery taxidermy health goth. Craft beer bushwick everyday carry yuccie, kinfolk fashion axe bespoke small batch before they sold out hoodie ennui literally freegan chia cred. Pork belly crucifix kombucha, cardigan lomo shoreditch wayfarers PBR&B. You probably haven't heard of them small batch retro shoreditch iPhone, disrupt squid pitchfork cardigan green juice XOXO. Sustainable lumbersexual ugh post-ironic neutra ennui tofu.</p>
<p>Tacos crucifix photo booth, dreamcatcher knausgaard whatever wayfarers taxidermy pour-over humblebrag iPhone cray etsy authentic quinoa. Offal forage wayfarers, brunch polaroid meditation keffiyeh fixie cliche pop-up cred disrupt meh. Occupy truffaut organic master cleanse, vice mixtape everyday carry brunch post-ironic DIY cornhole pinterest leggings. Food truck offal williamsburg chicharrones. Fanny pack cliche vinyl, four dollar toast brunch squid kale chips mustache health goth typewriter taxidermy XOXO bushwick gluten-free. Asymmetrical kogi chia wolf. Gluten-free salvia deep v, kitsch chillwave before they sold out plaid mumblecore twee hashtag echo park roof party trust fund vinyl.</p>
<p>Pickled cliche yuccie direct trade, dreamcatcher pabst waistcoat godard quinoa farm-to-table ramps etsy skateboard lo-fi. Forage selvage authentic, brooklyn pork belly tofu pop-up trust fund tousled asymmetrical keytar YOLO organic twee portland. Cliche helvetica narwhal thundercats tumblr. Locavore mixtape cardigan, kickstarter selfies listicle direct trade photo booth. Pitchfork butcher everyday carry, 90's keffiyeh pork belly street art meggings green juice whatever fingerstache. XOXO raw denim migas, 3 wolf moon green juice pitchfork irony franzen. Swag flexitarian etsy, tousled cray knausgaard put a bird on it normcore fixie blog butcher church-key.</p>
<p>90's offal pug, small batch yuccie tote bag normcore mumblecore wayfarers street art next level kogi venmo portland photo booth. Flannel YOLO mumblecore slow-carb dreamcatcher microdosing cardigan. Swag four dollar toast chicharrones butcher master cleanse organic sartorial. Pickled pug kinfolk, normcore next level vegan cardigan sriracha. Quinoa PBR&B pitchfork squid chillwave, cardigan actually stumptown. Bushwick truffaut leggings, hashtag 8-bit literally wolf cardigan yr echo park. Vegan selfies meditation, locavore shabby chic deep v sriracha typewriter you probably haven't heard of them keytar dreamcatcher chicharrones swag.</p>
<p>Offal locavore listicle bespoke, put a bird on it single-origin coffee sustainable keffiyeh hammock craft beer kinfolk. Brunch sustainable photo booth, heirloom tote bag fanny pack forage pop-up kickstarter keytar authentic brooklyn cred kale chips occupy. Lomo green juice ethical poutine. Tumblr master cleanse chicharrones vegan wayfarers four dollar toast. Actually banh mi retro chia ugh, flexitarian messenger bag paleo roof party chicharrones. Kogi literally ethical paleo offal VHS. 90's tattooed sustainable, ugh fanny pack mixtape pabst sartorial vinyl.</p>
<p>Yr portland four loko thundercats salvia, beard schlitz blog sustainable kombucha fap microdosing cardigan. Slow-carb seitan hammock leggings four dollar toast. Before they sold out normcore sartorial disrupt organic. Artisan swag seitan, pug poutine 90's small batch franzen sriracha polaroid bespoke. Health goth kickstarter lomo gluten-free, listicle offal twee jean shorts banjo. Kogi vinyl williamsburg next level, iPhone chillwave vegan health goth messenger bag microdosing blue bottle four loko offal cliche. Microdosing asymmetrical authentic fashion axe.</p>
<p>Mustache freegan literally tofu plaid, godard post-ironic. Street art viral stumptown, marfa synth williamsburg microdosing kombucha twee meggings kale chips. +1 drinking vinegar lumbersexual tumblr YOLO cray. Narwhal deep v church-key artisan, celiac chicharrones leggings single-origin coffee. Food truck skateboard drinking vinegar, hammock health goth mlkshk authentic portland. Synth cardigan roof party mumblecore chillwave, master cleanse chambray. Scenester viral semiotics, literally leggings chambray franzen forage.
Normcore fashion axe direct trade freegan photo booth, keytar polaroid beard XOXO master cleanse next level DIY microdosing wayfarers ethical. Tote bag swag helvetica lo-fi, ethical tofu keytar raw denim. You probably haven't heard of them deep v everyday carry 8-bit, blog PBR&B 3 wolf moon pork belly stumptown tilde. Offal meditation health goth, wayfarers artisan shoreditch iPhone truffaut occupy. Art party photo booth pug sartorial vinyl. Butcher direct trade venmo bespoke deep v, letterpress helvetica listicle. Pug raw denim tacos franzen sriracha actually, pabst VHS readymade authentic.</p>
<p>Roof party kombucha taxidermy yuccie truffaut. Tattooed taxidermy 90's bicycle rights trust fund, franzen aesthetic banh mi 3 wolf moon deep v quinoa cred small batch. Flannel plaid 8-bit, brunch ethical keytar yuccie farm-to-table. Single-origin coffee franzen vegan, swag fashion axe mustache freegan gluten-free. Dreamcatcher authentic actually cliche shabby chic. Bicycle rights lomo meditation chia, fashion axe single-origin coffee sriracha forage before they sold out beard. Meditation tote bag wayfarers, disrupt austin pork belly kogi mumblecore 3 wolf moon chia.</p>
<p>Dreamcatcher craft beer chambray echo park try-hard hammock. Ethical health goth fashion axe, whatever schlitz narwhal brooklyn direct trade. 8-bit food truck migas, kitsch squid health goth semiotics put a bird on it franzen artisan schlitz. Semiotics artisan church-key, cliche aesthetic asymmetrical williamsburg hashtag. Marfa cardigan shabby chic mustache plaid, DIY health goth pop-up seitan 8-bit. Fixie pickled beard, butcher tacos polaroid art party blog synth. Meh mlkshk typewriter thundercats fashion axe pabst, artisan health goth williamsburg.</p>
<p>IPhone disrupt paleo gastropub ethical. Pitchfork pork belly taxidermy, wayfarers meggings direct trade kale chips twee XOXO. Trust fund intelligentsia wolf sustainable put a bird on it pabst chillwave, four dollar toast organic taxidermy raw denim art party sriracha everyday carry keffiyeh. Selfies crucifix cold-pressed, williamsburg taxidermy food truck hammock. Listicle twee shoreditch, mlkshk squid normcore synth narwhal locavore iPhone. Schlitz skateboard vinyl fap cray gluten-free, drinking vinegar yuccie before they sold out. Roof party church-key cronut, keytar lo-fi stumptown banjo 3 wolf moon.
Direct trade locavore hella, banh mi migas vice health goth letterpress asymmetrical hammock bespoke master cleanse. Cray gluten-free tote bag hammock, lo-fi cred small batch pickled cold-pressed post-ironic wayfarers cliche. Taxidermy brunch synth thundercats wayfarers. Master cleanse flannel marfa gentrify sriracha humblebrag. 90's gentrify kickstarter offal DIY four dollar toast. Whatever salvia occupy, aesthetic hoodie bitters chartreuse 90's mlkshk chillwave put a bird on it viral cornhole retro. Fap poutine four loko tilde, offal direct trade forage selvage four dollar toast 3 wolf moon.</p>
</article>
<footer><p>Oh look a footer</p></footer>
<div class="news-wrap">
<div class="news">
<div class="news-content">
<form>
<label>Email</label>
<input type="email" placeholder="enter email">
<input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
header { background: purple;}
footer {
background: magenta;
p { padding:0 20px; color: white;}
}
header, footer {
padding: 10px 0;
max-width:680px;
margin:0 auto;
ul { list-style: none; }
li {
display: inline;
padding: 0 10px;
color: white;
&:first-of-type {
padding-left: 0;
}
}
}
article {
max-width: 600px;
margin:2em auto;
}
.show {
display: block !important;
}
.news {
background: forestgreen;
padding: 50px;
position: fixed;
display: none;
bottom:20px;
right: 20px;
label {
color: white;
padding: 0 10px 0 0;
}
input[type="email"] {
padding:8px;
border-radius: 4px;
border: none;
outline: none;
}
input[type="submit"] {
background: white;
border: none;
font-size: 1em;
padding: 8px;
border-radius: 4px;
margin-left: 10px;
}
}
$(document).scroll(function() {
var y = $(this).scrollTop(),
news = $('.news');
if (y > 600) {
news.fadeIn();
} else {
news.fadeOut();
}
});
Also see: Tab Triggers