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 

              
                <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<font horiz-adv-x="2048">
<!-- Font software Copyright (C) 2012 Intel Corporation. Licensed under the Apache License, Version 2.0.  http://www.apache.org/licenses/LICENSE-2.0 -->
<!-- Copyright: Copyright 2016 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="ClearSans-Bold" units-per-em="2048" underline-position="-154" underline-thickness="102"/>
<missing-glyph horiz-adv-x="1022" d="M25,1362l972,0l0,-1362l-972,0M512,768l330,498l-662,0M123,186l330,496l-330,496M569,682l332,-498l0,994M512,594l-332,-496l662,0z"/>
<glyph unicode=" " horiz-adv-x="492"/>
<glyph unicode="a" horiz-adv-x="1139" d="M764,0l0,109C662,16 553,-31 436,-31C320,-31 232,0 173,61C114,122 84,200 84,295C84,370 99,431 130,480C160,529 205,567 265,595C324,622 410,642 522,653l221,21l0,47C743,780 725,820 690,842C655,863 603,874 535,874C479,874 431,865 391,846C350,827 320,801 301,766l-201,129C135,954 191,1000 266,1032C341,1063 432,1079 539,1079C702,1079 820,1051 893,994C965,937 1001,843 1001,713l0,-713M743,487l-131,-12C519,467 453,449 412,422C371,395 350,354 350,299C350,251 363,218 390,201C417,183 452,174 496,174C527,174 566,184 611,204C656,223 700,251 743,287z"/>
<glyph unicode="b" horiz-adv-x="1217" d="M1124,532C1124,358 1088,221 1015,120C942,19 837,-31 702,-31C649,-31 591,-19 528,6C465,30 414,61 377,98l-35,-98l-197,0l0,1489l258,0l0,-524C498,1041 602,1079 717,1079C858,1079 961,1031 1026,934C1091,837 1124,703 1124,532M858,528C858,636 841,717 807,771C773,825 718,852 643,852C601,852 559,842 516,823C473,803 435,779 403,750l0,-459C432,266 467,245 508,226C549,207 588,197 627,197C701,197 758,225 798,282C838,338 858,420 858,528z"/>
<glyph unicode="c" horiz-adv-x="1059" d="M1012,150C972,91 919,46 854,15C789,-16 706,-31 606,-31C437,-31 309,15 222,108C135,200 92,337 92,518C92,695 134,832 218,931C302,1030 428,1079 596,1079C686,1079 766,1064 837,1035C907,1006 960,960 997,899l-192,-137C782,793 754,817 723,832C692,847 651,854 602,854C514,854 451,827 414,773C377,719 358,635 358,522C358,409 377,326 416,274C454,221 519,195 612,195C652,195 689,201 722,212C755,223 787,248 817,287z"/>
<glyph unicode="e" horiz-adv-x="1143" d="M358,457C363,364 385,297 426,256C467,215 531,195 618,195C669,195 713,201 752,214C790,227 823,251 852,287l192,-137C1002,89 948,44 881,14C814,-16 722,-31 606,-31C433,-31 305,14 220,105C135,196 92,333 92,516C92,891 260,1079 596,1079C745,1079 859,1037 938,953C1016,868 1055,745 1055,584l0,-127M799,635C799,794 729,874 590,874C544,874 506,866 477,851C448,835 424,812 407,781C389,750 375,701 365,635z"/>
<glyph unicode="i" horiz-adv-x="549" d="M418,1335C418,1286 406,1252 382,1233C358,1214 321,1204 272,1204C217,1204 180,1215 161,1238C141,1261 131,1293 131,1335C131,1382 142,1415 163,1436C184,1456 221,1466 272,1466C324,1466 361,1456 384,1437C407,1417 418,1383 418,1335M145,0l0,1049l258,0l0,-1049z"/>
<glyph unicode="l" horiz-adv-x="549" d="M145,0l0,1489l258,0l0,-1489z"/>
<glyph unicode="n" horiz-adv-x="1217" d="M821,0l0,578C821,687 811,760 792,797C772,834 735,852 680,852C603,852 511,801 403,700l0,-700l-258,0l0,1049l258,0l0,-136C458,968 516,1009 578,1037C640,1065 701,1079 760,1079C867,1079 947,1050 1000,991C1053,932 1079,835 1079,700l0,-700z"/>
<glyph unicode="r" horiz-adv-x="840" d="M778,797C751,810 716,817 672,817C624,817 579,806 536,783C493,760 448,726 403,682l0,-682l-258,0l0,1049l258,0l0,-150C447,947 494,987 545,1018C596,1049 652,1065 715,1065C768,1065 806,1058 829,1044z"/>
<glyph unicode="s" horiz-adv-x="1026" d="M946,299C946,230 929,170 894,121C859,72 809,34 745,8C680,-18 607,-31 524,-31C305,-31 155,30 76,152l192,135C299,244 336,216 377,202C418,187 461,180 508,180C631,180 692,216 692,287C692,318 675,343 640,360C605,377 551,394 477,412C338,443 240,486 183,542C126,598 98,671 98,760C98,853 134,929 205,989C276,1049 380,1079 518,1079C612,1079 695,1064 767,1034C838,1004 893,959 932,899l-193,-137C693,833 618,868 514,868C461,868 420,859 393,841C366,822 352,799 352,770C352,743 364,721 389,705C414,688 462,671 535,653C654,624 740,595 791,566C842,537 880,501 907,458C933,415 946,362 946,299z"/>
</font>

	<font horiz-adv-x="2048">
<!-- Times is a registered trademark of Linotype AG -->
<!-- Copyright: Copyright 2016 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="Times-Roman" units-per-em="2048" underline-position="-155" underline-thickness="101"/>
<missing-glyph horiz-adv-x="1479" d="M33,0l0,1355l1398,0l0,-1355M1247,184l0,987l-1030,0l0,-987z"/>
<glyph unicode=" " horiz-adv-x="512"/>
<glyph unicode="a" horiz-adv-x="909" d="M587,554C510,529 447,501 397,470C301,411 253,343 253,268C253,207 273,163 313,134C339,115 368,106 400,106C444,106 486,118 527,143C567,168 587,199 587,237M220,441C281,481 404,535 587,604l0,85C587,757 580,804 567,831C544,876 497,898 426,898C392,898 360,889 329,872C298,854 283,829 283,798C283,790 285,777 288,758C291,739 293,726 293,721C293,684 281,658 256,643C242,634 225,630 206,630C176,630 153,640 137,660C121,679 113,701 113,725C113,772 142,821 200,872C257,923 342,948 453,948C582,948 670,906 716,822C741,776 753,709 753,621l0,-401C753,181 756,155 761,140C770,114 788,101 815,101C830,101 843,103 853,108C863,113 880,124 905,142l0,-52C884,64 861,43 836,26C799,1 761,-12 722,-12C677,-12 644,3 624,32C603,61 592,96 590,137C539,93 496,60 460,39C399,3 342,-15 287,-15C230,-15 180,5 138,46C96,86 75,137 75,199C75,296 123,376 220,441z"/>
<glyph unicode="b" horiz-adv-x="1024" d="M7,1272l0,34C83,1323 151,1343 212,1364C273,1385 305,1396 310,1396C311,1392 312,1388 312,1384l0,-609C329,807 355,837 390,866C451,916 522,941 602,941C700,941 784,900 853,817C922,734 957,627 957,495C957,354 912,233 822,132C732,31 614,-19 467,-19C393,-19 320,-4 249,25C178,54 142,84 142,113l0,1057C142,1209 137,1236 126,1253C115,1269 91,1277 52,1277M507,49C600,49 670,84 715,154C760,224 782,309 782,408C782,507 761,599 719,684C677,768 609,810 515,810C468,810 421,796 376,767C331,738 308,701 308,656l0,-510C314,111 340,87 386,72C432,57 472,49 507,49z"/>
<glyph unicode="c" horiz-adv-x="909" d="M815,737C815,715 807,695 792,676C777,657 753,647 721,647C698,647 677,655 660,671C642,687 629,710 621,741l-12,48C600,824 585,849 564,864C542,878 513,885 477,885C401,885 337,852 285,786C232,719 206,631 206,521C206,420 235,330 293,250C350,170 428,130 526,130C595,130 657,153 711,198C742,224 776,265 815,322l28,-17C805,225 765,162 723,115C642,26 549,-19 443,-19C339,-19 247,22 167,104C87,186 47,297 47,438C47,576 91,695 178,794C265,893 376,943 509,943C592,943 664,922 725,879C785,836 815,788 815,737z"/>
<glyph unicode="e" horiz-adv-x="909" d="M822,564l-635,0C194,409 229,297 292,226C355,155 430,120 517,120C587,120 646,138 694,175C742,212 786,264 827,331l35,-12C835,234 784,156 709,84C634,12 542,-24 433,-24C308,-24 211,23 143,118C74,213 40,322 40,445C40,579 80,695 159,792C238,889 342,938 469,938C563,938 645,906 716,841C787,776 822,683 822,564M237,764C216,728 200,683 191,628l422,0C606,695 593,744 575,777C542,836 488,865 411,865C335,865 277,831 237,764z"/>
<glyph unicode="i" horiz-adv-x="569" d="M272,1396C301,1396 325,1386 346,1366C366,1345 376,1320 376,1291C376,1262 366,1238 346,1218C325,1197 301,1187 272,1187C243,1187 218,1197 198,1218C178,1238 168,1262 168,1291C168,1320 178,1344 198,1365C218,1386 243,1396 272,1396M40,28C111,35 156,47 175,65C194,82 203,130 203,208l0,477C203,728 200,758 194,775C184,802 163,816 131,816C124,816 117,815 110,814C103,813 82,807 49,798l0,31l43,14C209,881 290,910 336,929C355,937 367,941 372,941C373,936 374,931 374,926l0,-718C374,132 383,84 402,65C420,46 461,33 526,28l0,-28l-486,0z"/>
<glyph unicode="m" horiz-adv-x="1593" d="M33,26C85,31 120,39 137,52C164,71 177,110 177,168l0,517C177,734 171,767 158,782C145,797 123,805 93,805C79,805 69,804 62,803C55,802 46,799 37,796l0,35l72,24C135,864 178,879 237,902C296,925 328,936 331,936C334,936 336,934 337,931C338,928 338,921 338,912l0,-135C404,837 461,879 509,902C557,925 606,936 657,936C726,936 780,913 821,866C842,841 860,806 874,763C923,813 966,850 1003,874C1066,915 1131,936 1197,936C1304,936 1376,892 1412,805C1433,756 1443,678 1443,571l0,-415C1443,109 1454,77 1475,60C1496,43 1533,31 1588,26l0,-26l-451,0l0,28C1195,33 1233,45 1252,63C1270,81 1279,118 1279,173l0,431C1279,669 1272,716 1258,747C1233,802 1185,829 1113,829C1070,829 1027,815 984,786C959,769 929,743 893,706l0,-512C893,140 903,99 922,71C941,43 981,28 1042,26l0,-26l-459,0l0,26C646,34 687,49 704,72C721,95 730,150 730,239l0,280C730,622 723,692 710,731C688,796 641,829 570,829C529,829 489,818 450,796C411,773 376,744 346,708l0,-547C346,110 355,75 373,56C390,37 429,27 488,26l0,-26l-455,0z"/>
<glyph unicode="n" horiz-adv-x="1024" d="M37,28C84,34 118,46 137,64C156,81 165,121 165,182l0,507C165,732 161,762 153,779C140,804 114,817 75,817C69,817 63,817 57,816C50,815 42,814 33,813l0,35C60,856 125,877 227,910l94,31C326,941 329,939 330,936C331,933 331,928 331,922l0,-147C392,832 440,872 475,893C527,926 581,942 637,942C682,942 724,929 761,903C833,852 869,762 869,632l0,-467C869,117 879,82 898,61C917,40 950,29 995,28l0,-28l-427,0l0,28C617,35 651,48 670,69C689,89 699,133 699,201l0,427C699,685 688,733 667,771C646,808 606,827 549,827C510,827 470,814 429,787C406,772 377,746 341,711l0,-560C341,103 352,71 373,55C394,38 428,29 474,28l0,-28l-437,0z"/>
<glyph unicode="s" horiz-adv-x="797" d="M106,315l33,0C154,239 175,181 201,140C248,65 316,28 406,28C456,28 496,42 525,70C554,97 568,133 568,177C568,205 560,232 543,258C526,284 497,309 455,334l-112,64C261,442 201,486 162,531C123,576 104,628 104,689C104,764 131,825 184,873C237,921 304,945 385,945C420,945 459,938 502,925C544,912 568,905 573,905C585,905 594,907 599,910C604,913 609,919 613,926l24,0l7,-279l-31,0C600,712 582,762 559,798C518,865 458,898 380,898C333,898 297,884 270,855C243,826 230,793 230,754C230,693 276,638 368,590l132,-71C642,442 713,352 713,249C713,170 684,106 625,56C566,6 488,-19 393,-19C353,-19 308,-12 257,1C206,14 176,21 167,21C159,21 152,18 146,13C140,7 135,0 132,-8l-26,0z"/>
<glyph unicode="t" horiz-adv-x="569" d="M521,922l0,-72l-204,0l-2,-576C315,223 319,185 328,159C344,113 375,90 422,90C446,90 467,96 485,107C502,118 522,136 545,161l26,-22l-22,-30C514,62 478,29 439,10C400,-9 363,-19 327,-19C248,-19 195,16 167,86C152,124 144,177 144,244l0,606l-109,0C32,852 29,854 28,856C26,858 25,861 25,864C25,871 27,876 30,880C33,883 42,892 58,905C104,943 137,974 158,998C178,1021 226,1084 301,1185C310,1185 315,1184 317,1183C318,1182 319,1177 319,1168l0,-246z"/>
</font>

	<rect x="52.6" y="77.2" fill="#ED570C" width="326.7" height="129.9"/>
<rect x="87.4" y="109.4" fill="none" width="279.1" height="97.8"/>
<text id="texte" transform="matrix(1 0 0 1 87.3535 134.1665)"><tspan x="0" y="0" fill="#F2F2F2" font-family="'ClearSans-Bold'" font-size="34.1102px">abc in clearsans</tspan><tspan x="0" y="40.9" fill="#F2F2F2" font-family="'Times-Roman'" font-size="34.1102px">abc in times</tspan></text>
</svg>
!

CSS
!

JS
!
999px

Console