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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
<main>
<p>Candy canes tiramisu cake lollipop pudding icing jujubes. Gummi bears jujubes ice cream chocolate bar gummi bears danish chocolate bar cake. Fruitcake candy canes toffee muffin jelly beans. Tootsie roll ice cream marzipan cotton candy powder danish pudding cupcake.</p>
<p>Caramels jujubes sugar plum sweet toffee jelly oat cake. Cookie halvah bear claw bear claw carrot cake soufflé soufflé dragée. Candy tootsie roll bonbon marshmallow chocolate cake bonbon cheesecake tootsie roll caramels. Marzipan jelly-o lemon drops donut.</p>
<div class='banner'></div>
<p>Candy sesame snaps bear claw cookie. Tart marzipan dessert gummies. Marzipan dragée wafer croissant cake. Biscuit muffin carrot cake.</p>
<p>Fruitcake donut icing gummi bears. Donut cake jujubes wafer chocolate bar cotton candy carrot cake. Bear claw tart sweet powder cake. Gummies ice cream dessert cupcake pudding jelly-o.</p>
<div class='banner'></div>
<p>Marshmallow cupcake marzipan topping tootsie roll jelly-o cake liquorice. Toffee cotton candy danish tiramisu bonbon caramels liquorice halvah. Biscuit donut bear claw chupa chups pudding biscuit powder sweet roll donut. Tart candy canes marzipan.</p>
<p>Sugar plum pastry bonbon danish apple pie. Cookie cheesecake candy canes chocolate powder dessert fruitcake jelly. Powder halvah sweet sugar plum lollipop.</p>
<p>Powder bonbon chocolate caramels cheesecake soufflé. Cake icing icing ice cream pudding jelly carrot cake ice cream tiramisu. Candy canes wafer marzipan pie chocolate bar dessert jujubes. Biscuit oat cake donut icing brownie.</p>
<div class='banner'></div>
<p>Dragée marzipan lollipop sesame snaps chocolate bar toffee jelly. Croissant cupcake sesame snaps tiramisu gummi bears ice cream sugar plum cotton candy. Soufflé cake gummi bears muffin soufflé soufflé marshmallow macaroon. Caramels caramels lemon drops.</p>
<p>Croissant oat cake cake. Cheesecake liquorice muffin chocolate cake candy canes powder muffin tiramisu. Candy canes donut jelly beans jelly beans cotton candy jelly beans muffin. Candy apple pie dessert soufflé tiramisu.</p>
<div class='banner'></div>
<p>Ice cream gingerbread gummi bears pastry dragée muffin. Apple pie cake cake. Chupa chups dessert jelly pastry wafer tootsie roll toffee lemon drops lollipop.</p>
<p>Jelly cookie wafer gummi bears caramels toffee. Jelly beans chocolate fruitcake. Lollipop halvah halvah cake tiramisu.</p>
<p>Powder halvah sweet marzipan croissant. Tootsie roll carrot cake cheesecake biscuit jelly sugar plum oat cake. Lemon drops bear claw marshmallow chocolate cake biscuit gummies.</p>
<p>Tootsie roll carrot cake lollipop pastry fruitcake sesame snaps tootsie roll icing. Soufflé cake croissant candy. Donut wafer candy cookie jujubes marshmallow. Biscuit tart donut gummi bears.</p>
<p>Cake donut pudding toffee apple pie sweet roll. Liquorice chocolate bar jujubes jelly-o chupa chups carrot cake dragée macaroon carrot cake. Sesame snaps carrot cake cotton candy danish ice cream caramels bonbon. Apple pie icing brownie dessert marshmallow tootsie roll muffin.</p>
<div class='banner'></div>
<p>Jelly-o jujubes candy jujubes jujubes dragée muffin tiramisu cheesecake. Halvah candy biscuit fruitcake jelly beans pie sugar plum. Wafer jelly beans tiramisu jelly toffee sweet jujubes cake.</p>
<p>Wafer brownie chocolate bar gummies tiramisu jelly-o carrot cake dragée gummies. Dessert chocolate cake sesame snaps macaroon. Oat cake cookie candy canes sweet roll sweet lemon drops sweet roll cake donut.</p>
<p>Liquorice cotton candy tiramisu jelly beans. Pastry candy tiramisu. Marzipan chupa chups tiramisu. Jelly beans candy canes tart.</p>
<div class='banner'></div>
<p>Cake sugar plum pie gingerbread croissant jelly-o. Chocolate bar gummi bears cookie sesame snaps chocolate liquorice halvah jelly-o. Tiramisu cupcake pudding oat cake.</p>
<p>Toffee danish tootsie roll chupa chups bear claw icing. Ice cream cake wafer halvah pastry bear claw toffee. Apple pie pudding pastry cookie brownie tootsie roll.</p>
<div class='banner'></div>
<p>Soufflé gingerbread gingerbread cake powder tart carrot cake soufflé soufflé. Chocolate halvah tart tootsie roll apple pie. Sugar plum marzipan carrot cake tart pastry tiramisu topping chupa chups. Toffee bonbon cupcake chupa chups muffin jelly ice cream.</p>
<p>Carrot cake jujubes liquorice ice cream carrot cake croissant pudding tootsie roll. Jelly cake candy dragée apple pie topping lollipop. Gummies dessert pie pie chocolate bar candy. Toffee icing chocolate ice cream cupcake.</p>
<div class='banner'></div>
<p>Marzipan lemon drops pastry chupa chups fruitcake caramels jujubes. Jelly beans lemon drops gingerbread macaroon toffee bear claw carrot cake macaroon. Cake topping brownie jujubes pastry chocolate pudding croissant.</p>
<p>Wafer jelly-o chupa chups cake bear claw. Cake biscuit sweet chocolate bar apple pie cake tiramisu apple pie. Powder dragée liquorice oat cake toffee cake gummies jelly-o. Wafer fruitcake pastry marshmallow carrot cake bear claw donut.</p>
<p>Cake chupa chups lemon drops sesame snaps cheesecake tiramisu caramels. Cake caramels sweet gummies tootsie roll danish gingerbread biscuit topping. Icing icing gummies chocolate bar cupcake sesame snaps lollipop danish sweet. Gummies wafer bear claw jelly cookie.</p>
<div class='banner'></div>
<p>Dessert dragée pudding oat cake sweet chocolate cake chocolate cake sesame snaps. Bonbon dessert croissant dragée. Pie chupa chups chocolate cake apple pie.</p>
<p>Chupa chups jujubes macaroon candy canes lollipop candy canes donut. Candy pie ice cream pie ice cream cake soufflé danish cotton candy. Chocolate cake chupa chups apple pie jujubes pie lemon drops oat cake danish.</p>
<p>Wafer caramels soufflé wafer cheesecake sweet roll jelly soufflé. Lollipop chupa chups marzipan halvah bear claw topping cake candy. Jelly-o halvah caramels. Oat cake pie biscuit oat cake danish macaroon pie pie.</p>
<p>Pastry gummi bears gummi bears croissant pudding marshmallow bonbon soufflé. Sugar plum biscuit gummies caramels tiramisu donut marzipan brownie. Chocolate cake tiramisu oat cake. Gingerbread dragée tiramisu chocolate bar jelly candy canes bonbon candy canes.</p>
<p>Jelly beans bear claw marzipan dessert. Cupcake caramels candy canes. Sweet dessert macaroon gummi bears biscuit pie pudding. Toffee pie tootsie roll macaroon jelly dessert donut fruitcake wafer.</p>
<div class='banner'></div>
<p>Chocolate cotton candy apple pie ice cream icing jelly beans cake topping. Bonbon gummies ice cream marshmallow biscuit. Brownie cookie icing.</p>
<p>Topping oat cake liquorice. Cake gummi bears macaroon chupa chups cheesecake croissant chocolate bar. Cake brownie jujubes tiramisu sweet sweet cheesecake.</p>
<div class='banner'></div>
<p>Candy canes donut pastry jelly beans donut jujubes macaroon donut carrot cake. Cotton candy pastry cheesecake lollipop cheesecake. Bonbon gingerbread soufflé jujubes.</p>
<p>Jelly sugar plum tart chocolate. Macaroon cotton candy chupa chups biscuit gummies chupa chups dragée. Gummi bears halvah muffin.</p>
<p>Lollipop powder chocolate bar bonbon marzipan jelly-o. Gingerbread pudding topping chocolate cake bonbon. Pastry pudding brownie chocolate bar. Gummi bears liquorice macaroon dessert lemon drops biscuit cake dessert.</p>
<div class='banner'></div>
<p>Candy biscuit croissant. Wafer tart sweet roll croissant sugar plum. Sugar plum tootsie roll pie lemon drops. Sweet roll tootsie roll marzipan cake.</p>
<p>Cake candy canes chupa chups jelly beans jelly beans carrot cake caramels ice cream tiramisu. Pie macaroon sugar plum. Jelly tootsie roll marzipan pastry candy canes tart. Sweet roll carrot cake tiramisu jelly-o donut chocolate icing chupa chups.</p>
<div class='banner'></div>
<p>Bear claw sesame snaps jujubes sugar plum wafer. Cake marshmallow marshmallow marzipan bear claw muffin topping. Cookie dragée soufflé.</p>
<p>Tiramisu donut toffee pie liquorice topping. Sesame snaps ice cream marshmallow cake lollipop. Lollipop tiramisu ice cream cupcake sugar plum cupcake.</p>
</main>
* { margin: 0 }
html { background: gainsboro }
body { overflow-x: hidden }
main {
margin: 0 auto;
padding: .875em .5em;
max-width: 32em;
background: whitesmoke;
font: 1.25em/ 1.375 segoe script, comic sans ms, cursive;
* + * { margin-top: 1.375em }
}
.banner {
margin-left: calc(50% - 50vw);
width: 100vw; height: 62.5vmin;
min-height: 15em;
background: linear-gradient(#000, transparent, #000),
var(--img) 50%/ cover;
background-attachment: fixed;
background-blend-mode: multiply;
&:nth-of-type(1) {
--img: url(https://images.unsplash.com/photo-1509456592530-5d38e33f3fdd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
&:nth-of-type(2) {
--img: url(https://images.unsplash.com/photo-1536056298178-a36a9ba0b0f5?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
&:nth-of-type(3) {
--img: url(https://images.unsplash.com/photo-1481391243133-f96216dcb5d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(4) {
--img: url(https://images.unsplash.com/photo-1547675999-f71c79b90fb6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(5) {
--img: url(https://images.unsplash.com/photo-1476097297040-79e9e1603142?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
&:nth-of-type(6) {
--img: url(https://images.unsplash.com/photo-1469533667357-006056eaf780?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
&:nth-of-type(7) {
--img: url(https://images.unsplash.com/photo-1546896687-bb1645078119?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(8) {
--img: url(https://images.unsplash.com/photo-1499969942143-ad2a66bc72dc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(9) {
--img: url(https://images.unsplash.com/photo-1519676867240-f03562e64548?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(10) {
--img: url(https://images.unsplash.com/photo-1506084868230-bb9d95c24759?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(11) {
--img: url(https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(12) {
--img: url(https://images.unsplash.com/photo-1530915493757-0677252ffeee?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
&:nth-of-type(13) {
--img: url(https://images.unsplash.com/photo-1525124541374-b7eaf79d0dbf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}
}
Also see: Tab Triggers