css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- Creator: Webmassa -->
<svg class="navigation" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="355px" height="355px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 35500 35500"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
    .fil6 {fill:#244252}
    .fil1 {fill:#FEFEFE}
    .background1 {fill:#5A727F;fill-rule:nonzero}
    .background2 {fill:#6DC4D3;fill-rule:nonzero}
    .background3 {fill:#EC6863;fill-rule:nonzero}
    .background4 {fill:#F0811A;fill-rule:nonzero}
    .fil2 {fill:#FEFEFE;fill-rule:nonzero}
    .fnt1 {font-weight:normal;font-size:1476.15px;font-family:'Open Sans'}
    .fnt0 {font-weight:bold;font-size:2952.41px;font-family:'Open Sans'}
    .fnt2 {font-weight:normal;font-size:4428.67px;font-family:'Open Sans'}
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <a xlink href="#drawing"><g class="drawing">
   <path class="background1" d="M10161 16821c460,-3736 3612,-6637 7456,-6703l2691 -4961 -2685 -4893c-9273,66 -16831,7343 -17346,16503l4864 -2669 5020 2723z"/>
   <g transform="matrix(0.999998 0 0 1 -3670.53 -11297.6)">
    <text x="16065" y="17750"  class="fil1 fnt0">1</text>
   </g>
   <g transform="matrix(0.999998 0 0 1 -3670.53 -11297.6)">
    <text x="11870" y="20193"  class="fil1 fnt1">рисунок</text>
   </g>
   <path class="fil2" d="M8567 10553l-179 -179c-30,-30 -71,-47 -113,-47 -43,0 -84,17 -114,47l-24 24c-236,-157 -511,-240 -799,-241l-3 0c-179,0 -352,31 -515,93l314 -313c40,19 83,28 128,28 80,0 155,-31 211,-87 56,-56 87,-131 87,-211 0,-79 -31,-154 -87,-210 -57,-56 -131,-88 -211,-88 -79,0 -154,31 -210,88 -56,56 -88,131 -88,210 0,45 10,89 29,128l-565 565 -19 -19c-30,-30 -71,-47 -113,-47 -43,0 -84,17 -114,47l-181 180c-30,30 -47,71 -47,114 0,42 17,83 47,113l19 19 -565 565c-39,-19 -83,-29 -128,-29 -79,0 -154,31 -210,88 -58,58 -88,134 -88,211 0,76 30,152 88,210 56,56 131,88 210,88 80,0 155,-31 211,-88 91,-91 111,-228 58,-339l314 -313c-62,163 -95,337 -94,517 1,288 84,563 242,799l-30 30c-63,63 -63,165 0,228l179 179c30,30 71,47 114,47 42,0 83,-17 113,-47l180 -179c62,-63 62,-165 0,-228l-180 -180c-30,-30 -71,-47 -113,-47 -43,0 -84,17 -114,47l-5 6c-258,-419 -247,-961 35,-1369 18,7 37,11 58,11 42,0 83,-17 113,-47l180 -180c46,-46 58,-114 36,-171 408,-282 950,-294 1369,-35l-11 11c-63,63 -63,165 0,228l179 179c30,30 71,47 114,47 42,0 83,-17 113,-47l180 -179c62,-62 62,-164 -1,-227zm-2121 2068l-126 126 -126 -126 126 -126 126 126zm745 -3023c18,-18 43,-29 70,-29 26,0 51,11 70,29 18,18 28,43 28,70 0,26 -10,51 -28,70 -19,18 -44,29 -70,29 -27,0 -52,-11 -70,-29 -19,-19 -29,-44 -29,-70 0,-27 10,-51 29,-70zm-1794 2074c-18,18 -43,29 -70,29 -26,0 -51,-11 -70,-29 -39,-39 -39,-102 0,-140 19,-18 44,-29 70,-29 27,0 52,11 70,29 39,38 39,102 0,140zm897 -912l-126 -125 126 -126 125 125 -125 126zm1980 32l-126 -126 126 -126 126 126 -126 126z"/>
    </g></a>
  <a xlink href="#html"><g class="html">
   <path class="background2" d="M18693 10175c3736,459 6637,3611 6703,7456l4960 2690 4894 -2684c-66,-9273 -7343,-16831 -16503,-17346l2668 4864 -2722 5020z"/>
   <g transform="matrix(0.999998 0 0 1 8310.62 -9495.12)">
    <text x="17750" y="17750"  class="fil1 fnt0">2</text>
   </g>
   <g transform="matrix(0.999998 0 0 1 8310.62 -9495.12)">
    <text x="17750" y="20193"  class="fil1 fnt1">HTML</text>
   </g>
   <path class="fil2" d="M28583 14756l-1326 -723 0 -401 1326 -719 0 471 -924 444 924 460 0 468zm1682 0l0 -468 923 -457 -923 -453 0 -465 1325 720 0 398 -1325 725zm-1455 253l879 -2349 278 0 -881 2349 -276 0z"/>
    </g></a>
  <a xlink href="#css"><g class="css">
   <path class="background3" d="M35223 18761l-4864 2668 -5020 -2723c-459,3736 -3611,6637 -7456,6703l-2691 4961 2685 4894c9273,-66 16831,-7343 17346,-16503z"/>
   <g transform="matrix(0.999998 0 0 1 11866.7 7052.71)">
    <text x="16065" y="17750"  class="fil1 fnt0">3</text>
   </g>
   <g transform="matrix(0.999998 0 0 1 11866.7 7052.71)">
    <text x="15199" y="20193"  class="fil1 fnt1">CSS</text>
   </g>
   <path class="fil2" d="M21163 29658c15,56 24,176 24,362 0,160 8,277 26,351 17,74 51,136 101,187 50,50 111,86 183,108 74,22 178,34 315,34l80 0 0 -364c-108,0 -180,-7 -212,-21 -32,-14 -57,-33 -73,-61 -16,-25 -24,-72 -24,-138 0,-46 -3,-153 -12,-321 -6,-111 -20,-199 -39,-264 -21,-66 -49,-122 -88,-168 -37,-45 -86,-86 -146,-120 67,-44 118,-85 151,-127 33,-40 60,-90 80,-152 21,-63 35,-143 40,-244 9,-176 14,-297 14,-361 0,-62 8,-106 23,-132 15,-26 38,-45 71,-58 30,-13 103,-19 215,-19l0 -362 -80 0c-133,0 -230,10 -292,27 -90,28 -160,65 -208,111 -47,48 -79,110 -98,187 -18,78 -27,213 -27,410 0,120 -4,203 -13,253 -10,64 -28,117 -55,161 -27,42 -60,72 -97,91 -37,19 -93,29 -166,34l0 363c92,5 161,24 206,60 45,35 79,92 101,173zm2281 1013c92,-27 163,-64 211,-111 47,-46 80,-109 97,-187 17,-79 27,-215 27,-410 0,-120 3,-204 13,-252 10,-64 29,-119 57,-161 25,-42 58,-74 95,-92 37,-18 91,-30 166,-33l-1 0 0 -363c-93,-5 -161,-26 -206,-61 -46,-34 -79,-93 -102,-172 -16,-57 -24,-177 -24,-362 0,-160 -8,-276 -25,-349 -19,-75 -52,-138 -101,-189 -49,-50 -111,-86 -184,-108 -73,-21 -178,-33 -313,-33l-81 0 0 362c115,0 188,8 220,20 34,15 57,34 69,58 13,26 19,77 21,151 5,242 14,397 24,468 17,102 50,187 97,254 34,46 89,93 164,142 -58,32 -105,71 -142,116 -38,42 -66,97 -88,160 -22,63 -36,147 -41,251 -8,175 -13,292 -13,354 -1,62 -9,106 -25,132 -15,26 -40,45 -73,59 -34,13 -105,19 -213,19l0 364 81 0c132,0 230,-8 290,-27zm-1179 -1808l426 0 0 -426 -426 0 0 426zm-34 1502l81 176c92,-32 167,-76 226,-133 60,-57 100,-120 120,-191 23,-72 33,-169 33,-292l0 -304 -426 0 0 426 205 0c-1,84 -21,151 -57,201 -36,50 -96,89 -182,117z"/>
    </g></a>
  <a xlink href="#publish"><g class="publish">
   <path class="background4" d="M16808 25353c-3737,-460 -6638,-3612 -6703,-7456l-4961 -2691 -4894 2685c66,9273 7343,16831 16503,17345l-2668 -4863 2723 -5020z"/>
   <g transform="matrix(0.999998 0 0 1 -12889.6 3465.47)">
    <text x="17750" y="17750"  class="fil1 fnt0">4</text>
   </g>
   <g transform="matrix(0.999998 0 0 1 -12889.6 3465.47)">
    <text x="17750" y="20193"  class="fil1 fnt1">запуск</text>
   </g>
   <path class="fil2" d="M10498 25622l-4416 1596c-46,16 -70,58 -71,100l0 1c1,33 16,66 47,87l660 450 2996 -1579 -2536 1893 0 767c0,52 59,84 102,55l559 -370 550 375c50,34 119,19 152,-33l1997 -3293c16,-27 -11,-60 -40,-49z"/>
    </g></a>
  <g transform="matrix(0.999998 0 0 1 -79.4206 28.9403)">
   <text x="13627" y="17750"  class="fil6 fnt2">SVG</text>
  </g>
  <g transform="matrix(0.999998 0 0 1 -79.4206 28.9403)">
   <text x="13918" y="20625"  class="fil6 fnt1">навигация</text>
  </g>
 </g>
</svg>
            
          
!
            
              * {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}  
.drawing:hover .background1 {
  fill: #284554;
}
.html:hover .background2 {
  fill: #007387;
}
.css:hover .background3 {
  fill: #B5423E;
}
.publish:hover .background4 {
  fill: #B35700;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console