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.
<nav>
<ul>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
<li>sidenav item</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam earum id expedita rerum repudiandae alias suscipit dignissimos sapiente veniam amet. Dolores praesentium, velit dignissimos officia aut ex voluptatibus minima deleniti, accusantium temporibus vitae voluptas voluptatum eum quasi autem natus iusto quis unde repellendus molestiae officiis! Pariatur tempore sed perspiciatis deserunt nihil accusantium nostrum aliquid explicabo similique molestias rerum distinctio, quia, omnis voluptatem alias excepturi impedit quas facere iure quaerat beatae assumenda dolore. Illo doloremque aliquid ea, animi adipisci ratione ipsam? Rem, placeat. Cupiditate esse blanditiis vel ipsa, impedit quia accusamus odio. Alias voluptatem impedit, commodi sequi ratione animi vitae ad aut vero facere voluptatibus quod assumenda voluptates tenetur beatae explicabo amet rerum harum distinctio ullam enim ea velit eveniet! Est, sunt beatae maxime dicta voluptatibus cupiditate architecto nihil, earum dolore adipisci quas sequi cumque error quasi veniam. Blanditiis aut repudiandae perferendis praesentium ducimus aliquid laborum, quidem impedit autem eveniet quis, eligendi officia tempore minus quas ab error mollitia labore. Tempora impedit ad accusantium dignissimos repudiandae assumenda quae consequatur facere, provident illo architecto ipsum tenetur quam, deleniti commodi reprehenderit facilis tempore, officiis molestiae. Inventore earum voluptas accusamus ducimus illo placeat facere repellendus quod optio vero, suscipit nostrum dignissimos commodi labore laudantium tempore. Unde numquam laudantium deserunt illo qui? Autem illum nihil quod, fugit provident, vero labore, atque similique possimus consequuntur enim quaerat molestias maiores hic quia dicta unde optio veniam animi dolorem sint. Aut, eos asperiores praesentium qui excepturi quam facilis? Facilis, nostrum ad? Porro in officiis numquam quibusdam magni ut quaerat quas iusto tenetur similique minima sunt corporis itaque eaque alias, voluptatibus non culpa odit asperiores! Voluptas consequuntur vitae ipsam a. Natus sed illo illum modi atque recusandae dicta necessitatibus. Doloremque earum deleniti corporis fugit quod ipsa nesciunt possimus quasi sint expedita delectus, hic consequuntur repudiandae maxime. Vitae, laboriosam. Sint ipsum quam in, totam commodi saepe temporibus fugiat nulla nam molestias dolore provident aliquid vitae blanditiis corporis, optio officiis atque enim, accusamus quia. Assumenda veritatis sit soluta suscipit tenetur? Minima quae iusto fugiat explicabo neque ullam, quaerat voluptas enim libero doloremque unde assumenda nemo aspernatur laudantium possimus deleniti ad corrupti magnam quos quis. Ad repellat magni accusamus ab eaque deserunt dignissimos, laborum quia cupiditate repellendus impedit. Ad praesentium quis voluptatibus labore corrupti cum atque unde velit tempora! Non, nemo. Tempore perferendis ratione quaerat. Qui sit ad culpa, ratione laboriosam reiciendis ipsum doloremque totam minus eligendi cum saepe odio, quo et incidunt voluptatem numquam sequi! Natus cupiditate eligendi voluptatem accusantium ab officia unde animi explicabo nihil tempora veritatis, necessitatibus sapiente nobis fugit atque omnis est. Inventore adipisci enim suscipit voluptates deserunt reprehenderit ratione. Sit reiciendis provident labore dolores laudantium nemo, minima fugit quisquam sed accusantium, voluptates nihil mollitia animi eum eius in sunt itaque. Similique nesciunt cupiditate fugit molestias ipsum, corporis sint delectus sapiente architecto explicabo modi exercitationem a officia voluptas est fuga inventore non velit saepe? Similique, eligendi. Cupiditate iste inventore quisquam quis alias, voluptatum iure et ipsum, praesentium impedit animi eveniet dicta? Corporis praesentium nesciunt harum asperiores saepe ad! Veniam asperiores voluptates ea aspernatur consequuntur natus laborum ipsa amet omnis impedit perspiciatis vel fuga accusantium dolor velit voluptas nemo quibusdam tempore ipsum qui possimus ad, quo incidunt. Accusantium cumque, neque nulla omnis error in vero fuga? Deserunt laboriosam quod, consequatur doloribus maxime quae sunt eaque, accusantium nisi nesciunt dolorem, amet unde. Deleniti, esse atque quam, repellat obcaecati, dolore veritatis velit minus laudantium expedita provident vel consectetur sed ipsam beatae itaque assumenda recusandae cupiditate quibusdam perspiciatis omnis asperiores? At nobis facere dolorem odio aperiam, quasi culpa perspiciatis voluptas esse est totam necessitatibus magnam dolor laudantium doloremque consequatur ea quam repellat corporis maiores. Nulla nisi voluptatum qui illum veniam molestias, placeat voluptatem nostrum aspernatur, provident quos neque voluptatibus earum accusantium quaerat ab eius deleniti error! Iusto iste obcaecati ut amet voluptate explicabo iure voluptas inventore. Officiis ea fugiat nobis blanditiis ipsam fuga molestias. Omnis itaque nesciunt excepturi quaerat labore quibusdam, facere quis laborum illo voluptatibus odio nulla autem ipsum in earum vitae eveniet minima similique numquam ab enim! Ipsam vero saepe distinctio qui numquam, amet voluptatibus blanditiis ullam laudantium voluptate cumque at ad soluta perferendis dolores fuga libero quis, molestias doloremque laborum, cum inventore aperiam dicta aliquid. Error incidunt mollitia est fuga blanditiis veritatis maiores, itaque laudantium rerum quaerat velit repellendus exercitationem similique vitae obcaecati consectetur amet eligendi illo deserunt doloribus soluta impedit corrupti necessitatibus. Error qui amet vitae vero consectetur obcaecati accusantium ullam omnis, repellendus id animi maiores blanditiis at culpa in! Labore rem necessitatibus quidem sequi eligendi aperiam fuga error dolorem exercitationem. Maxime similique officiis deserunt eveniet rem eligendi nobis non necessitatibus delectus ipsam odio voluptas, corrupti, hic ut? Hic iusto pariatur assumenda dolorem enim id voluptatum cumque impedit? Odit saepe, animi ut cumque velit fugiat accusantium perferendis, vel blanditiis architecto dolores omnis, corrupti repellat! Laboriosam fugiat explicabo consectetur vel labore earum modi nulla. Dolorum est recusandae eaque excepturi nostrum, dicta corporis alias officiis quod velit nesciunt facere perspiciatis? Vero quibusdam placeat quasi minus possimus asperiores optio corrupti vel veritatis reiciendis? Consequatur laboriosam perspiciatis repudiandae impedit qui. Itaque beatae quia aut mollitia quo obcaecati, blanditiis doloremque hic numquam, similique soluta modi excepturi rerum deserunt vel corporis culpa ipsa inventore. Enim excepturi ratione optio, deserunt neque aliquam autem voluptatibus quos vitae corrupti quisquam porro pariatur explicabo accusamus. Delectus vero aut qui dolorum est ea aliquid. Adipisci esse voluptas expedita tenetur dolorem ex consequuntur deserunt incidunt. Illo doloribus nostrum dicta quasi blanditiis? Aliquid culpa voluptate, sit, obcaecati praesentium aspernatur corrupti nam unde totam consequatur pariatur animi, voluptas harum eveniet eius. Quasi qui, adipisci animi culpa blanditiis obcaecati ea cupiditate molestias nisi dolorem in alias eaque corrupti hic corporis est vitae fugiat dolorum? Consequatur minus eveniet rem tempore iure? Itaque reprehenderit sunt mollitia veritatis ullam, dolorem quo inventore. Tempora sapiente praesentium fugiat. Placeat, saepe recusandae necessitatibus sed nemo eius ullam ipsa? Sapiente tempore ratione autem placeat saepe eligendi ducimus fuga reiciendis. Officiis nisi consequatur, cupiditate dolorem magnam consequuntur repudiandae voluptatem! Dolore aspernatur ullam quibusdam at officia cum nesciunt velit sint est itaque.
</main>
nav {
overscroll-behavior: initial;
}
html {
box-sizing: border-box;
}
html *,
html *::after,
html *::before {
box-sizing: inherit;
}
body {
display: flex;
font-family: system-ui;
line-height: 1.6;
color: #404040;
margin: 0;
background: #fff;
}
nav {
background-color: #56727C;
width: 250px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
overflow: auto;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
li {
padding: 8px 16px;
color: #eee;
text-transform: capitalize;
}
main {
padding: 2em;
color: #999;
margin-left: 250px;
}
Also see: Tab Triggers