Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

Add External Stylesheets/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

Packages

Add Packages

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.

Powered by Algolia
About Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <svg class="dt-logo" preserveAspectRatio="xMinYMax meet" xml:space="preserve" width="150px" height="64px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 150000 64000">
 <defs>
	<style type="text/css">
	 <![CDATA[
		.dt1 {fill:#333333}
		.dt2 {fill:#666666}
	 ]]>
	</style>
 </defs>
 <g>
   <path class="dt1" d="M44450 10636l0 11901c0,350 341,633 764,633l370 0c-312,356 -681,801 -967,1669 -80,242 -107,567 -140,848l-27 236 0 119c0,236 -57,-493 27,561l0 25 33 144c-60,-96 252,1127 762,1741 1223,1295 2055,1411 2908,1788 109,50 196,92 314,140 -599,212 -1225,470 -2026,922l-510 349c-196,162 -401,379 -597,590 -196,236 -458,656 -628,1035 -57,188 -144,472 -196,729l-60 398 0 212c33,259 -56,-448 33,591l27 47 29 212c23,70 0,70 110,444 175,542 656,1271 801,1344 423,471 766,656 1106,891 882,472 1626,704 2303,939 -793,286 -1646,567 -2761,1344 -392,282 -853,705 -1222,1556 -81,186 -141,492 -196,728l-60 397 0 191c0,236 -58,-377 29,545l0 43 57 215 29 114c0,96 60,258 118,396 568,1322 989,1368 1334,1723 369,262 683,398 995,537 971,428 1822,664 2559,923 -79,46 -139,72 -225,89 -882,381 -1793,640 -2871,1296 -458,333 -1400,873 -1654,2495l-29 282 0 73c-31,-49 58,753 29,422l0 46 58 188c-29,0 138,541 345,898 223,420 392,543 537,680 144,138 314,307 429,380 1078,704 1902,892 2675,1151 764,258 1449,468 1959,728 27,0 0,0 27,25 -107,70 -196,113 -341,232 -481,286 -1051,707 -1507,1201 -225,211 -421,541 -599,801l-136 188 -89 209 0 26 -27 22 -33 98c-27,112 -56,235 -85,331 -22,210 -51,422 -51,608 29,258 51,517 109,729 233,873 597,1156 597,1156 0,0 743,-1812 3017,-2638 233,-138 574,-306 910,-591 205,-210 341,-236 626,-633 116,-187 256,-421 341,-656l149 -330 78 -423 0 -120 29 0c-29,72 60,-657 29,-372l-58 -405c-49,-584 -283,-965 -508,-1320 -452,-584 -910,-892 -1311,-1101 -824,-471 -1561,-729 -2302,-1013 -343,-119 -686,-258 -1029,-404 488,-186 1029,-372 1625,-560 488,-168 969,-332 1537,-565 256,-139 570,-284 881,-520 147,-97 372,-281 539,-445 89,-120 145,-144 285,-331 145,-187 283,-420 401,-656 254,-639 196,-663 225,-801l29 -121c86,-868 31,-277 31,-519l0 -65 -31 -193c-29,-236 -81,-468 -138,-682 -116,-419 -312,-705 -517,-1034 -169,-236 -336,-398 -539,-586 -708,-565 -1255,-799 -1821,-1059 -481,-211 -942,-380 -1392,-543 225,-97 450,-164 684,-235 541,-210 1078,-379 1706,-728 342,-162 685,-355 1106,-729 205,-236 372,-309 715,-939 167,-285 282,-591 342,-876l87 -258c227,-1198 -202,-2259 -654,-2889 -459,-545 -859,-850 -1196,-1062 -686,-405 -1251,-637 -1770,-849 -140,-48 -256,-90 -392,-140 56,-23 107,-46 167,-73 488,-162 967,-328 1536,-630 286,-122 597,-331 940,-567 341,-355 715,-429 1252,-1692 256,-711 167,-617 227,-779l29 -95 57 -566 -29 -66 0 -193c-28,-234 -57,-494 -117,-730 -223,-867 -733,-1505 -1047,-1787 -746,-683 -1253,-892 -1741,-1103 -882,-379 -1588,-615 -2245,-851 541,-444 1167,-939 1648,-1552 261,-302 401,-633 597,-965l888 0c423,0 766,-283 766,-633l0 -11901 -9078 0zm3701 32021c-31,0 -58,-48 0,0z"/>
   <path class="dt1" d="M37287 10381c3093,0 6732,138 9241,255l5377 0c2509,-117 6149,-255 9240,-255 3036,0 5530,453 7730,853 1656,302 3088,562 4401,562 2068,0 2551,-608 2551,-6594 0,-2532 -189,-3872 -633,-4483 -318,-438 -852,-595 -2382,-698 -1253,-85 -2561,103 -4217,343 -2070,299 -4646,670 -8259,670l-22240 0c-3612,0 -6188,-372 -8259,-670 -1656,-239 -2963,-428 -4216,-343 -1529,103 -2064,260 -2381,698 -445,611 -634,1951 -634,4483 0,5986 484,6594 2550,6594 1315,0 2746,-260 4403,-562 2199,-400 4693,-853 7728,-853z"/>
   <path class="dt2" d="M0 28464c1669,-45 3028,-487 4078,-1349 1049,-850 1756,-2022 2099,-3502 343,-1492 530,-4034 552,-7636 12,-3602 67,-5978 166,-7127 199,-1812 553,-3260 1083,-4365 519,-1094 1172,-1978 1945,-2641 773,-652 1768,-1160 2972,-1502 818,-211 2144,-321 4000,-321l1802 0 0 5105 -995 0c-2221,0 -3691,409 -4420,1216 -718,806 -1083,2607 -1083,5414 0,5646 -122,9216 -364,10707 -387,2310 -1061,4089 -2001,5337 -950,1249 -2431,2365 -4464,3326 2398,995 4133,2509 5216,4542 1072,2033 1613,5370 1613,10000 0,4199 22,6696 66,7492 177,1470 608,2486 1304,3072 708,585 2078,873 4122,873l1006 0 0 5105 -1813 0c-2110,0 -3646,-177 -4596,-519 -1371,-498 -2520,-1293 -3426,-2409 -906,-1106 -1492,-2509 -1757,-4210 -276,-1702 -420,-4498 -442,-8376 -22,-3878 -210,-6564 -553,-8045 -342,-1491 -1027,-2663 -2066,-3525 -1049,-861 -2386,-1314 -4044,-1359l0 -5303z"/>
   <path class="dt2" d="M97370 28464c-1662,-45 -3016,-487 -4062,-1349 -1046,-850 -1751,-2022 -2092,-3502 -342,-1492 -529,-4034 -551,-7636 -11,-3602 -66,-5978 -165,-7127 -198,-1812 -550,-3260 -1079,-4365 -517,-1094 -1167,-1978 -1937,-2641 -771,-652 -1762,-1160 -2962,-1502 -815,-211 -2136,-321 -3985,-321l-1795 0 0 5105 991 0c2213,0 3677,409 4403,1216 716,806 1079,2607 1079,5414 0,5646 122,9216 364,10707 385,2310 1057,4089 1992,5337 947,1249 2423,2365 4449,3326 -2389,995 -4118,2509 -5197,4542 -1068,2033 -1608,5370 -1608,10000 0,4199 -22,6696 -65,7492 -177,1470 -606,2486 -1299,3072 -705,585 -2071,873 -4107,873l-1002 0 0 5105 1806 0c2102,0 3633,-177 4580,-519 1365,-498 2510,-1293 3412,-2409 903,-1106 1487,-2509 1751,-4210 275,-1702 418,-4498 441,-8376 22,-3878 209,-6564 550,-8045 341,-1491 1024,-2663 2059,-3525 1046,-861 2378,-1314 4029,-1359l0 -5303z"/>
 </g>
</svg>
!

CSS 

              
                .dt-logo:hover .dt1 {
  fill: #DD8800;
}
.dt-logo:hover .dt2 {
  fill: #229900;
!

JS
!
999px

Console