cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="wrapper">
  <ul class="browsers">
    <li><span class="browser chrome"></span>
      <span class="browser firefox"></span>
      <span class="browser opera-13"></span>
      <span class="browser safari"></span>
      <span class="browser ie9"></span> &mdash; support all.</li>
    <li> <span class="browser firefox"></span>
      <span class="browser ie9"></span> &mdash; svg in data URI must be encoded</li>
    <li class="browser opera-12">12  &mdash;  svg-use, font. It supports SVG in sprites and base64, but resizes images with bad.</li>
    <li class="browser opera-mob">Mobile &mdash; svg-use, font.</li>
    <li class="browser opera-mini">Mini &mdash;  support SVG in background, but makes wrong resize if SVG contains viewBox.</li>
 
  </ul>
  
  <ul class="icons icons-size--48">
    <li><span class="icon icon--heart"></span> &mdash; sprite <i>CSS</i>
    </li>
    <li><span class="icon icon--cloud"></span> &mdash; sprite in base64 in data URI <i>CSS</i></li>
    <li><span class="icon icon--star"></span> &mdash; SVG in data URI <i>CSS</i></li>
    <li><span class="icon icon--airplane"><svg width="48px" height="48px" viewbox="0 0 32 32"><use xlink:href='#d' fill="currentColor"/></svg></span>  &mdash; SVG-use <i>HTML</i></li>
    <li><span class="icon icon--flask"></span> &mdash; font <i>CSS</i></li>
  </ul>
  
  <i>Icons: <a href="https://icomoon.io/">icomoon.io</a></i>
 </div> 


<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='272' height='32' viewBox='0 0 272 32'><defs><path class='path1' d='M29.193 5.265c-3.629-3.596-9.432-3.671-13.191-.288-3.76-3.383-9.561-3.308-13.192.288-3.741 3.704-3.741 9.709 0 13.415 1.069 1.059 11.053 10.941 11.053 10.941 1.183 1.172 3.096 1.172 4.278 0 0 0 10.932-10.822 11.053-10.941 3.742-3.706 3.742-9.711-.001-13.415zm-1.425 12.003l-11.053 10.941c-.393.391-1.034.391-1.425 0l-11.053-10.941c-2.95-2.92-2.95-7.671 0-10.591 2.844-2.815 7.416-2.914 10.409-.222l1.356 1.22 1.355-1.22c2.994-2.692 7.566-2.594 10.41.222 2.95 2.919 2.95 7.67.001 10.591zm-18.515-9.767c.277 0 .5.224.5.5s-.224.5-.5.5h-.001c-1.794 0-3.249 1.455-3.249 3.249v.001c0 .276-.224.5-.5.5s-.5-.224-.5-.5c0-2.346 1.901-4.247 4.246-4.249l.004-.001z' id='a'/><path class='path1' d='M25.914 13.143c-.437-4.563-4.236-8.143-8.914-8.143-3.619 0-6.717 2.148-8.146 5.23-.43-.136-.878-.23-1.353-.23-2.485 0-4.5 2.016-4.5 4.5 0 .494.099.961.246 1.404-1.933 1.127-3.246 3.195-3.246 5.594 0 3.59 2.91 6.5 6.5 6.5v.002l17.999-.002c4.143 0 7.5-3.357 7.5-7.5 0-3.656-2.621-6.693-6.086-7.355zm-1.414 12.855v.002h-17.999c-2.481-.002-4.5-2.02-4.5-4.502 0-1.6.843-3.045 2.254-3.867 1.371-.787 1.465-.943.89-2.357-.097-.291-.144-.544-.144-.773 0-1.379 1.121-2.5 2.5-2.5 0 0 .656-.047 1.353.23 1.147.457 1.272.02 1.814-1.159 1.147-2.473 3.632-4.072 6.332-4.072 3.6 0 6.576 2.723 6.924 6.334.123 1.432.123 1.432 1.615 1.773 2.586.494 4.461 2.762 4.461 5.391 0 3.033-2.467 5.5-5.5 5.5z' id='b'/><path class='path1' d='M31.881 12.557c-.277-.799-.988-1.384-1.844-1.511l-8.326-1.238-3.619-7.514c-.381-.789-1.196-1.294-2.092-1.294s-1.711.505-2.092 1.294l-3.619 7.514-8.327 1.238c-.855.127-1.566.712-1.842 1.511-.275.801-.067 1.683.537 2.285l6.102 6.092-1.415 8.451c-.144.851.225 1.705.948 2.203.397.273.864.412 1.331.412.384 0 .769-.094 1.118-.281l7.259-3.908 7.26 3.908c.349.187.734.281 1.117.281.467 0 .934-.139 1.332-.412.723-.498 1.09-1.352.947-2.203l-1.416-8.451 6.104-6.092c.603-.603.81-1.485.537-2.285zm-8.293 6.806c-.512.51-.744 1.229-.627 1.934l1.416 8.451-7.26-3.906c-.348-.188-.732-.281-1.118-.281-.384 0-.769.094-1.117.281l-7.26 3.906 1.416-8.451c.118-.705-.114-1.424-.626-1.934l-6.102-6.092 8.326-1.24c.761-.113 1.416-.589 1.743-1.268l3.621-7.512 3.62 7.513c.328.679.982 1.154 1.742 1.268l8.328 1.24-6.102 6.091z' id='c'/><path class='path1' d='M31.543.16c-.166-.107-.355-.16-.543-.16-.193 0-.387.055-.555.168l-30 20c-.309.205-.479.566-.439.936.038.369.278.688.623.824l7.824 3.131 3.679 6.438c.176.309.503.5.857.504h.011c.351 0 .677-.186.857-.486l2.077-3.463 9.695 3.877c.119.048.244.071.371.071.17 0 .338-.043.49-.129.264-.148.445-.408.496-.707l5-30c.065-.393-.109-.787-.443-1.004zm-28.407 20.617l23.175-15.451-16.85 18.037-.266-.162-6.059-2.424zm7.053 3.289l-.007-.01 18.943-20.275-16.149 25.162-2.787-4.877zm15.028 5.543l-8.541-3.416c-.203-.08-.414-.107-.623-.119l13.152-20.388-3.988 23.923z' id='d'/><path class='path1' d='M25 0c-2.053 0-3.666 1.41-4.824 3.586l-.021-.012c-1.682 3.293-4.186 5.426-6.929 5.426h-9.226c-2.243 0-4 2.197-4 5 0 2.805 1.757 5 4 5 1.103.004 1.995.896 1.995 2v9c0 1.105.896 2 2 2h4c1.104 0 2-.895 2-2v-1c0-1-1-1.447-1-2v-7l.018-.062c.01-.143.049-.275.112-.395l.059-.088c.08-.119.181-.217.304-.293l.014-.014.011-.004.266-.08c2.524.268 4.809 2.305 6.377 5.373l.025-.012c1.159 2.169 2.768 3.575 4.819 3.575 4.596 0 7-7.043 7-14s-2.404-14-7-14zm-5 14c0-1.037.061-2.039.164-3h2.836c1.104 0 2 1.344 2 3 0 1.658-.896 3-2 3h-2.836c-.103-.961-.164-1.961-.164-3zm-18 0c0-1.656.896-3 2-3h7.014c-.62.729-1.014 1.787-1.014 3 0 1.215.394 2.273 1.014 3h-7.014c-1.104 0-2-1.342-2-3zm9.995 16h-4v-9c0-.729-.195-1.41-.537-2h.698v.012h3.008c-.107.311-.169.641-.169.988v7c0 .963.538 1.604.859 1.986l.141.166v.848zm1.231-12.988h-.226v-.012c-1.104 0-2-1.342-2-3 0-1.656.896-3 2-3h.226c1.886 0 3.652-.742 5.206-2.018-.286 1.61-.432 3.315-.432 5.018 0 1.709.146 3.42.434 5.031-1.555-1.277-3.322-2.019-5.208-2.019zm11.774 8.988c-2.018 0-3.75-2.871-4.541-7h2.541c2.242 0 4-2.195 4-5 0-2.803-1.758-5-4-5h-2.541c.791-4.127 2.523-7 4.541-7 2.762 0 5 5.373 5 12s-2.238 12-5 12z' id='e'/><path class='path1' d='M20.682 3.732c-.473-.472-1.1-.732-1.768-.732s-1.295.26-1.77.733l-1.41 1.412c-.473.472-.734 1.1-.734 1.769 0 .471.129.922.371 1.313l-13.577 5.439c-.908.399-1.559 1.218-1.742 2.189-.185.977.125 1.979.834 2.687l12.72 12.58c.548.548 1.276.859 2.045.877l.078.001c.202 0 .407-.021.61-.062.994-.206 1.808-.893 2.177-1.828l5.342-13.376c.402.265.875.407 1.367.407.67 0 1.297-.261 1.768-.733l1.407-1.408c.477-.474.738-1.103.738-1.773s-.262-1.3-.732-1.768l-7.724-7.727zm-4.023 25.635c-.124.313-.397.544-.727.612l-.229.021c-.254-.006-.499-.108-.682-.292l-12.728-12.588c-.234-.233-.337-.567-.275-.893.061-.324.279-.598.582-.73l6.217-2.49c4.189 1.393 8.379.051 12.57 4.522l-4.728 11.838zm10.333-15.787l-1.414 1.413c-.195.196-.512.196-.707 0l-1.768-1.767-1.432 3.589.119-.303c-3.01-3.005-6.069-3.384-8.829-3.723-.887-.109-1.747-.223-2.592-.405l8.491-3.401-1.715-1.715c-.195-.195-.195-.512 0-.707l1.414-1.415c.195-.195.512-.195.707 0l7.725 7.727c.198.195.198.512.001.707zm-10.492 7.42c1.378 0 2.5-1.121 2.5-2.5s-1.121-2.5-2.5-2.5-2.5 1.121-2.5 2.5 1.122 2.5 2.5 2.5zm0-4c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5c-.829 0-1.5-.672-1.5-1.5s.671-1.5 1.5-1.5zm13-17c-1.379 0-2.5 1.121-2.5 2.5s1.121 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.121-2.5-2.5-2.5zm0 4c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm-21.5 13c0 1.103.897 2 2 2s2-.897 2-2-.897-2-2-2-2 .897-2 2zm2-1c.552 0 1 .447 1 1s-.448 1-1 1-1-.447-1-1 .448-1 1-1zm2 7c0-.552.448-1 1-1s1 .448 1 1-.448 1-1 1-1-.448-1-1zm16-15c0-.552.448-1 1-1s1 .448 1 1-.448 1-1 1-1-.448-1-1z' id='f'/></defs><!--<use xlink:href='#a'/><use xlink:href='#b' transform='translate(48)'/><use xlink:href='#c' transform='translate(96)'/><use xlink:href='#d' transform='translate(144)'/><use xlink:href='#e' transform='translate(192)'/><use xlink:href='#f' transform='translate(240)'/>--></svg>


            
          
!
            
              @font-face {
	font-family: 'icomoon';
	src:url('http://yoksel.ru/assets/fonts/icomoon-svg-demo/icomoon.eot?gfxu7e');
	src:url('http://yoksel.ru/assets/fonts/icomoon-svg-demo/icomoon.eot?#iefixgfxu7e') format('embedded-opentype'),
		url('data:application/octet-stream;base64,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') format('woff'),
		url('http://yoksel.ru/assets/fonts/icomoon-svg-demo/icomoon.ttf?gfxu7e') format('truetype'),
		url('http://yoksel.ru/assets/fonts/icomoon-svg-demo/icomoon.svg?gfxu7e#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

BODY {
  font: 16px/1.4 "Trebuchet MS", Arial, sans-serif;
  }

A {
  color: tomato;
  }
I {
  font-style: italic;
  color: #999;
  }
UL:after {
  content: "";
  display: table;
  width: 100%;
  }
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 650px;
  height: 365px;
  margin: auto;
  padding: 20px;
  border: 1px solid #DDD;
  }

.icons  LI {
  margin-bottom: .9rem;
  }
  
.icons-size--48 .icon {
  font-size: 48px;
  }
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  }

.icon--heart {
  background-image: url(https://yoksel.github.io/assets/img/sprites-icomoon/sprites.svg);
  background-size: auto 100%;
  }
.icon--cloud {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjcyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMjcyIDMyIj48ZGVmcz48cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik0yOS4xOTMgNS4yNjVjLTMuNjI5LTMuNTk2LTkuNDMyLTMuNjcxLTEzLjE5MS0uMjg4LTMuNzYtMy4zODMtOS41NjEtMy4zMDgtMTMuMTkyLjI4OC0zLjc0MSAzLjcwNC0zLjc0MSA5LjcwOSAwIDEzLjQxNSAxLjA2OSAxLjA1OSAxMS4wNTMgMTAuOTQxIDExLjA1MyAxMC45NDEgMS4xODMgMS4xNzIgMy4wOTYgMS4xNzIgNC4yNzggMCAwIDAgMTAuOTMyLTEwLjgyMiAxMS4wNTMtMTAuOTQxIDMuNzQyLTMuNzA2IDMuNzQyLTkuNzExLS4wMDEtMTMuNDE1em0tMS40MjUgMTIuMDAzbC0xMS4wNTMgMTAuOTQxYy0uMzkzLjM5MS0xLjAzNC4zOTEtMS40MjUgMGwtMTEuMDUzLTEwLjk0MWMtMi45NS0yLjkyLTIuOTUtNy42NzEgMC0xMC41OTEgMi44NDQtMi44MTUgNy40MTYtMi45MTQgMTAuNDA5LS4yMjJsMS4zNTYgMS4yMiAxLjM1NS0xLjIyYzIuOTk0LTIuNjkyIDcuNTY2LTIuNTk0IDEwLjQxLjIyMiAyLjk1IDIuOTE5IDIuOTUgNy42Ny4wMDEgMTAuNTkxem0tMTguNTE1LTkuNzY3Yy4yNzcgMCAuNS4yMjQuNS41cy0uMjI0LjUtLjUuNWgtLjAwMWMtMS43OTQgMC0zLjI0OSAxLjQ1NS0zLjI0OSAzLjI0OXYuMDAxYzAgLjI3Ni0uMjI0LjUtLjUuNXMtLjUtLjIyNC0uNS0uNWMwLTIuMzQ2IDEuOTAxLTQuMjQ3IDQuMjQ2LTQuMjQ5bC4wMDQtLjAwMXoiIGlkPSJhIi8+PHBhdGggY2xhc3M9InBhdGgxIiBkPSJNMjUuOTE0IDEzLjE0M2MtLjQzNy00LjU2My00LjIzNi04LjE0My04LjkxNC04LjE0My0zLjYxOSAwLTYuNzE3IDIuMTQ4LTguMTQ2IDUuMjMtLjQzLS4xMzYtLjg3OC0uMjMtMS4zNTMtLjIzLTIuNDg1IDAtNC41IDIuMDE2LTQuNSA0LjUgMCAuNDk0LjA5OS45NjEuMjQ2IDEuNDA0LTEuOTMzIDEuMTI3LTMuMjQ2IDMuMTk1LTMuMjQ2IDUuNTk0IDAgMy41OSAyLjkxIDYuNSA2LjUgNi41di4wMDJsMTcuOTk5LS4wMDJjNC4xNDMgMCA3LjUtMy4zNTcgNy41LTcuNSAwLTMuNjU2LTIuNjIxLTYuNjkzLTYuMDg2LTcuMzU1em0tMS40MTQgMTIuODU1di4wMDJoLTE3Ljk5OWMtMi40ODEtLjAwMi00LjUtMi4wMi00LjUtNC41MDIgMC0xLjYuODQzLTMuMDQ1IDIuMjU0LTMuODY3IDEuMzcxLS43ODcgMS40NjUtLjk0My44OS0yLjM1Ny0uMDk3LS4yOTEtLjE0NC0uNTQ0LS4xNDQtLjc3MyAwLTEuMzc5IDEuMTIxLTIuNSAyLjUtMi41IDAgMCAuNjU2LS4wNDcgMS4zNTMuMjMgMS4xNDcuNDU3IDEuMjcyLjAyIDEuODE0LTEuMTU5IDEuMTQ3LTIuNDczIDMuNjMyLTQuMDcyIDYuMzMyLTQuMDcyIDMuNiAwIDYuNTc2IDIuNzIzIDYuOTI0IDYuMzM0LjEyMyAxLjQzMi4xMjMgMS40MzIgMS42MTUgMS43NzMgMi41ODYuNDk0IDQuNDYxIDIuNzYyIDQuNDYxIDUuMzkxIDAgMy4wMzMtMi40NjcgNS41LTUuNSA1LjV6IiBpZD0iYiIvPjxwYXRoIGNsYXNzPSJwYXRoMSIgZD0iTTMxLjg4MSAxMi41NTdjLS4yNzctLjc5OS0uOTg4LTEuMzg0LTEuODQ0LTEuNTExbC04LjMyNi0xLjIzOC0zLjYxOS03LjUxNGMtLjM4MS0uNzg5LTEuMTk2LTEuMjk0LTIuMDkyLTEuMjk0cy0xLjcxMS41MDUtMi4wOTIgMS4yOTRsLTMuNjE5IDcuNTE0LTguMzI3IDEuMjM4Yy0uODU1LjEyNy0xLjU2Ni43MTItMS44NDIgMS41MTEtLjI3NS44MDEtLjA2NyAxLjY4My41MzcgMi4yODVsNi4xMDIgNi4wOTItMS40MTUgOC40NTFjLS4xNDQuODUxLjIyNSAxLjcwNS45NDggMi4yMDMuMzk3LjI3My44NjQuNDEyIDEuMzMxLjQxMi4zODQgMCAuNzY5LS4wOTQgMS4xMTgtLjI4MWw3LjI1OS0zLjkwOCA3LjI2IDMuOTA4Yy4zNDkuMTg3LjczNC4yODEgMS4xMTcuMjgxLjQ2NyAwIC45MzQtLjEzOSAxLjMzMi0uNDEyLjcyMy0uNDk4IDEuMDktMS4zNTIuOTQ3LTIuMjAzbC0xLjQxNi04LjQ1MSA2LjEwNC02LjA5MmMuNjAzLS42MDMuODEtMS40ODUuNTM3LTIuMjg1em0tOC4yOTMgNi44MDZjLS41MTIuNTEtLjc0NCAxLjIyOS0uNjI3IDEuOTM0bDEuNDE2IDguNDUxLTcuMjYtMy45MDZjLS4zNDgtLjE4OC0uNzMyLS4yODEtMS4xMTgtLjI4MS0uMzg0IDAtLjc2OS4wOTQtMS4xMTcuMjgxbC03LjI2IDMuOTA2IDEuNDE2LTguNDUxYy4xMTgtLjcwNS0uMTE0LTEuNDI0LS42MjYtMS45MzRsLTYuMTAyLTYuMDkyIDguMzI2LTEuMjRjLjc2MS0uMTEzIDEuNDE2LS41ODkgMS43NDMtMS4yNjhsMy42MjEtNy41MTIgMy42MiA3LjUxM2MuMzI4LjY3OS45ODIgMS4xNTQgMS43NDIgMS4yNjhsOC4zMjggMS4yNC02LjEwMiA2LjA5MXoiIGlkPSJjIi8+PHBhdGggY2xhc3M9InBhdGgxIiBkPSJNMzEuNTQzLjE2Yy0uMTY2LS4xMDctLjM1NS0uMTYtLjU0My0uMTYtLjE5MyAwLS4zODcuMDU1LS41NTUuMTY4bC0zMCAyMGMtLjMwOS4yMDUtLjQ3OS41NjYtLjQzOS45MzYuMDM4LjM2OS4yNzguNjg4LjYyMy44MjRsNy44MjQgMy4xMzEgMy42NzkgNi40MzhjLjE3Ni4zMDkuNTAzLjUuODU3LjUwNGguMDExYy4zNTEgMCAuNjc3LS4xODYuODU3LS40ODZsMi4wNzctMy40NjMgOS42OTUgMy44NzdjLjExOS4wNDguMjQ0LjA3MS4zNzEuMDcxLjE3IDAgLjMzOC0uMDQzLjQ5LS4xMjkuMjY0LS4xNDguNDQ1LS40MDguNDk2LS43MDdsNS0zMGMuMDY1LS4zOTMtLjEwOS0uNzg3LS40NDMtMS4wMDR6bS0yOC40MDcgMjAuNjE3bDIzLjE3NS0xNS40NTEtMTYuODUgMTguMDM3LS4yNjYtLjE2Mi02LjA1OS0yLjQyNHptNy4wNTMgMy4yODlsLS4wMDctLjAxIDE4Ljk0My0yMC4yNzUtMTYuMTQ5IDI1LjE2Mi0yLjc4Ny00Ljg3N3ptMTUuMDI4IDUuNTQzbC04LjU0MS0zLjQxNmMtLjIwMy0uMDgtLjQxNC0uMTA3LS42MjMtLjExOWwxMy4xNTItMjAuMzg4LTMuOTg4IDIzLjkyM3oiIGlkPSJkIi8+PHBhdGggY2xhc3M9InBhdGgxIiBkPSJNMjUgMGMtMi4wNTMgMC0zLjY2NiAxLjQxLTQuODI0IDMuNTg2bC0uMDIxLS4wMTJjLTEuNjgyIDMuMjkzLTQuMTg2IDUuNDI2LTYuOTI5IDUuNDI2aC05LjIyNmMtMi4yNDMgMC00IDIuMTk3LTQgNSAwIDIuODA1IDEuNzU3IDUgNCA1IDEuMTAzLjAwNCAxLjk5NS44OTYgMS45OTUgMnY5YzAgMS4xMDUuODk2IDIgMiAyaDRjMS4xMDQgMCAyLS44OTUgMi0ydi0xYzAtMS0xLTEuNDQ3LTEtMnYtN2wuMDE4LS4wNjJjLjAxLS4xNDMuMDQ5LS4yNzUuMTEyLS4zOTVsLjA1OS0uMDg4Yy4wOC0uMTE5LjE4MS0uMjE3LjMwNC0uMjkzbC4wMTQtLjAxNC4wMTEtLjAwNC4yNjYtLjA4YzIuNTI0LjI2OCA0LjgwOSAyLjMwNSA2LjM3NyA1LjM3M2wuMDI1LS4wMTJjMS4xNTkgMi4xNjkgMi43NjggMy41NzUgNC44MTkgMy41NzUgNC41OTYgMCA3LTcuMDQzIDctMTRzLTIuNDA0LTE0LTctMTR6bS01IDE0YzAtMS4wMzcuMDYxLTIuMDM5LjE2NC0zaDIuODM2YzEuMTA0IDAgMiAxLjM0NCAyIDMgMCAxLjY1OC0uODk2IDMtMiAzaC0yLjgzNmMtLjEwMy0uOTYxLS4xNjQtMS45NjEtLjE2NC0zem0tMTggMGMwLTEuNjU2Ljg5Ni0zIDItM2g3LjAxNGMtLjYyLjcyOS0xLjAxNCAxLjc4Ny0xLjAxNCAzIDAgMS4yMTUuMzk0IDIuMjczIDEuMDE0IDNoLTcuMDE0Yy0xLjEwNCAwLTItMS4zNDItMi0zem05Ljk5NSAxNmgtNHYtOWMwLS43MjktLjE5NS0xLjQxLS41MzctMmguNjk4di4wMTJoMy4wMDhjLS4xMDcuMzExLS4xNjkuNjQxLS4xNjkuOTg4djdjMCAuOTYzLjUzOCAxLjYwNC44NTkgMS45ODZsLjE0MS4xNjZ2Ljg0OHptMS4yMzEtMTIuOTg4aC0uMjI2di0uMDEyYy0xLjEwNCAwLTItMS4zNDItMi0zIDAtMS42NTYuODk2LTMgMi0zaC4yMjZjMS44ODYgMCAzLjY1Mi0uNzQyIDUuMjA2LTIuMDE4LS4yODYgMS42MS0uNDMyIDMuMzE1LS40MzIgNS4wMTggMCAxLjcwOS4xNDYgMy40Mi40MzQgNS4wMzEtMS41NTUtMS4yNzctMy4zMjItMi4wMTktNS4yMDgtMi4wMTl6bTExLjc3NCA4Ljk4OGMtMi4wMTggMC0zLjc1LTIuODcxLTQuNTQxLTdoMi41NDFjMi4yNDIgMCA0LTIuMTk1IDQtNSAwLTIuODAzLTEuNzU4LTUtNC01aC0yLjU0MWMuNzkxLTQuMTI3IDIuNTIzLTcgNC41NDEtNyAyLjc2MiAwIDUgNS4zNzMgNSAxMnMtMi4yMzggMTItNSAxMnoiIGlkPSJlIi8+PHBhdGggY2xhc3M9InBhdGgxIiBkPSJNMjAuNjgyIDMuNzMyYy0uNDczLS40NzItMS4xLS43MzItMS43NjgtLjczMnMtMS4yOTUuMjYtMS43Ny43MzNsLTEuNDEgMS40MTJjLS40NzMuNDcyLS43MzQgMS4xLS43MzQgMS43NjkgMCAuNDcxLjEyOS45MjIuMzcxIDEuMzEzbC0xMy41NzcgNS40MzljLS45MDguMzk5LTEuNTU5IDEuMjE4LTEuNzQyIDIuMTg5LS4xODUuOTc3LjEyNSAxLjk3OS44MzQgMi42ODdsMTIuNzIgMTIuNThjLjU0OC41NDggMS4yNzYuODU5IDIuMDQ1Ljg3N2wuMDc4LjAwMWMuMjAyIDAgLjQwNy0uMDIxLjYxLS4wNjIuOTk0LS4yMDYgMS44MDgtLjg5MyAyLjE3Ny0xLjgyOGw1LjM0Mi0xMy4zNzZjLjQwMi4yNjUuODc1LjQwNyAxLjM2Ny40MDcuNjcgMCAxLjI5Ny0uMjYxIDEuNzY4LS43MzNsMS40MDctMS40MDhjLjQ3Ny0uNDc0LjczOC0xLjEwMy43MzgtMS43NzNzLS4yNjItMS4zLS43MzItMS43NjhsLTcuNzI0LTcuNzI3em0tNC4wMjMgMjUuNjM1Yy0uMTI0LjMxMy0uMzk3LjU0NC0uNzI3LjYxMmwtLjIyOS4wMjFjLS4yNTQtLjAwNi0uNDk5LS4xMDgtLjY4Mi0uMjkybC0xMi43MjgtMTIuNTg4Yy0uMjM0LS4yMzMtLjMzNy0uNTY3LS4yNzUtLjg5My4wNjEtLjMyNC4yNzktLjU5OC41ODItLjczbDYuMjE3LTIuNDljNC4xODkgMS4zOTMgOC4zNzkuMDUxIDEyLjU3IDQuNTIybC00LjcyOCAxMS44Mzh6bTEwLjMzMy0xNS43ODdsLTEuNDE0IDEuNDEzYy0uMTk1LjE5Ni0uNTEyLjE5Ni0uNzA3IDBsLTEuNzY4LTEuNzY3LTEuNDMyIDMuNTg5LjExOS0uMzAzYy0zLjAxLTMuMDA1LTYuMDY5LTMuMzg0LTguODI5LTMuNzIzLS44ODctLjEwOS0xLjc0Ny0uMjIzLTIuNTkyLS40MDVsOC40OTEtMy40MDEtMS43MTUtMS43MTVjLS4xOTUtLjE5NS0uMTk1LS41MTIgMC0uNzA3bDEuNDE0LTEuNDE1Yy4xOTUtLjE5NS41MTItLjE5NS43MDcgMGw3LjcyNSA3LjcyN2MuMTk4LjE5NS4xOTguNTEyLjAwMS43MDd6bS0xMC40OTIgNy40MmMxLjM3OCAwIDIuNS0xLjEyMSAyLjUtMi41cy0xLjEyMS0yLjUtMi41LTIuNS0yLjUgMS4xMjEtMi41IDIuNSAxLjEyMiAyLjUgMi41IDIuNXptMC00Yy44MjggMCAxLjUuNjcyIDEuNSAxLjVzLS42NzIgMS41LTEuNSAxLjVjLS44MjkgMC0xLjUtLjY3Mi0xLjUtMS41cy42NzEtMS41IDEuNS0xLjV6bTEzLTE3Yy0xLjM3OSAwLTIuNSAxLjEyMS0yLjUgMi41czEuMTIxIDIuNSAyLjUgMi41IDIuNS0xLjEyMSAyLjUtMi41LTEuMTIxLTIuNS0yLjUtMi41em0wIDRjLS44MjggMC0xLjUtLjY3Mi0xLjUtMS41cy42NzItMS41IDEuNS0xLjUgMS41LjY3MiAxLjUgMS41LS42NzIgMS41LTEuNSAxLjV6bS0yMS41IDEzYzAgMS4xMDMuODk3IDIgMiAyczItLjg5NyAyLTItLjg5Ny0yLTItMi0yIC44OTctMiAyem0yLTFjLjU1MiAwIDEgLjQ0NyAxIDFzLS40NDggMS0xIDEtMS0uNDQ3LTEtMSAuNDQ4LTEgMS0xem0yIDdjMC0uNTUyLjQ0OC0xIDEtMXMxIC40NDggMSAxLS40NDggMS0xIDEtMS0uNDQ4LTEtMXptMTYtMTVjMC0uNTUyLjQ0OC0xIDEtMXMxIC40NDggMSAxLS40NDggMS0xIDEtMS0uNDQ4LTEtMXoiIGlkPSJmIi8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNiIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OCkiLz48dXNlIHhsaW5rOmhyZWY9IiNjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NikiLz48dXNlIHhsaW5rOmhyZWY9IiNkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDQpIi8+PHVzZSB4bGluazpocmVmPSIjZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkyKSIvPjx1c2UgeGxpbms6aHJlZj0iI2YiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MCkiLz48L3N2Zz4=);
  background-size: auto 100%;
  background-position: -1.5em 0;
  }
.icon--star {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20xmlns%3Axlink%3D%27http%3A//www.w3.org/1999/xlink%27%20width%3D%27272%27%20height%3D%2732%27%20viewBox%3D%270%200%20272%2032%27%3E%3Cdefs%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M29.193%205.265c-3.629-3.596-9.432-3.671-13.191-.288-3.76-3.383-9.561-3.308-13.192.288-3.741%203.704-3.741%209.709%200%2013.415%201.069%201.059%2011.053%2010.941%2011.053%2010.941%201.183%201.172%203.096%201.172%204.278%200%200%200%2010.932-10.822%2011.053-10.941%203.742-3.706%203.742-9.711-.001-13.415zm-1.425%2012.003l-11.053%2010.941c-.393.391-1.034.391-1.425%200l-11.053-10.941c-2.95-2.92-2.95-7.671%200-10.591%202.844-2.815%207.416-2.914%2010.409-.222l1.356%201.22%201.355-1.22c2.994-2.692%207.566-2.594%2010.41.222%202.95%202.919%202.95%207.67.001%2010.591zm-18.515-9.767c.277%200%20.5.224.5.5s-.224.5-.5.5h-.001c-1.794%200-3.249%201.455-3.249%203.249v.001c0%20.276-.224.5-.5.5s-.5-.224-.5-.5c0-2.346%201.901-4.247%204.246-4.249l.004-.001z%27%20id%3D%27a%27/%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M25.914%2013.143c-.437-4.563-4.236-8.143-8.914-8.143-3.619%200-6.717%202.148-8.146%205.23-.43-.136-.878-.23-1.353-.23-2.485%200-4.5%202.016-4.5%204.5%200%20.494.099.961.246%201.404-1.933%201.127-3.246%203.195-3.246%205.594%200%203.59%202.91%206.5%206.5%206.5v.002l17.999-.002c4.143%200%207.5-3.357%207.5-7.5%200-3.656-2.621-6.693-6.086-7.355zm-1.414%2012.855v.002h-17.999c-2.481-.002-4.5-2.02-4.5-4.502%200-1.6.843-3.045%202.254-3.867%201.371-.787%201.465-.943.89-2.357-.097-.291-.144-.544-.144-.773%200-1.379%201.121-2.5%202.5-2.5%200%200%20.656-.047%201.353.23%201.147.457%201.272.02%201.814-1.159%201.147-2.473%203.632-4.072%206.332-4.072%203.6%200%206.576%202.723%206.924%206.334.123%201.432.123%201.432%201.615%201.773%202.586.494%204.461%202.762%204.461%205.391%200%203.033-2.467%205.5-5.5%205.5z%27%20id%3D%27b%27/%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M31.881%2012.557c-.277-.799-.988-1.384-1.844-1.511l-8.326-1.238-3.619-7.514c-.381-.789-1.196-1.294-2.092-1.294s-1.711.505-2.092%201.294l-3.619%207.514-8.327%201.238c-.855.127-1.566.712-1.842%201.511-.275.801-.067%201.683.537%202.285l6.102%206.092-1.415%208.451c-.144.851.225%201.705.948%202.203.397.273.864.412%201.331.412.384%200%20.769-.094%201.118-.281l7.259-3.908%207.26%203.908c.349.187.734.281%201.117.281.467%200%20.934-.139%201.332-.412.723-.498%201.09-1.352.947-2.203l-1.416-8.451%206.104-6.092c.603-.603.81-1.485.537-2.285zm-8.293%206.806c-.512.51-.744%201.229-.627%201.934l1.416%208.451-7.26-3.906c-.348-.188-.732-.281-1.118-.281-.384%200-.769.094-1.117.281l-7.26%203.906%201.416-8.451c.118-.705-.114-1.424-.626-1.934l-6.102-6.092%208.326-1.24c.761-.113%201.416-.589%201.743-1.268l3.621-7.512%203.62%207.513c.328.679.982%201.154%201.742%201.268l8.328%201.24-6.102%206.091z%27%20id%3D%27c%27/%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M31.543.16c-.166-.107-.355-.16-.543-.16-.193%200-.387.055-.555.168l-30%2020c-.309.205-.479.566-.439.936.038.369.278.688.623.824l7.824%203.131%203.679%206.438c.176.309.503.5.857.504h.011c.351%200%20.677-.186.857-.486l2.077-3.463%209.695%203.877c.119.048.244.071.371.071.17%200%20.338-.043.49-.129.264-.148.445-.408.496-.707l5-30c.065-.393-.109-.787-.443-1.004zm-28.407%2020.617l23.175-15.451-16.85%2018.037-.266-.162-6.059-2.424zm7.053%203.289l-.007-.01%2018.943-20.275-16.149%2025.162-2.787-4.877zm15.028%205.543l-8.541-3.416c-.203-.08-.414-.107-.623-.119l13.152-20.388-3.988%2023.923z%27%20id%3D%27d%27/%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M25%200c-2.053%200-3.666%201.41-4.824%203.586l-.021-.012c-1.682%203.293-4.186%205.426-6.929%205.426h-9.226c-2.243%200-4%202.197-4%205%200%202.805%201.757%205%204%205%201.103.004%201.995.896%201.995%202v9c0%201.105.896%202%202%202h4c1.104%200%202-.895%202-2v-1c0-1-1-1.447-1-2v-7l.018-.062c.01-.143.049-.275.112-.395l.059-.088c.08-.119.181-.217.304-.293l.014-.014.011-.004.266-.08c2.524.268%204.809%202.305%206.377%205.373l.025-.012c1.159%202.169%202.768%203.575%204.819%203.575%204.596%200%207-7.043%207-14s-2.404-14-7-14zm-5%2014c0-1.037.061-2.039.164-3h2.836c1.104%200%202%201.344%202%203%200%201.658-.896%203-2%203h-2.836c-.103-.961-.164-1.961-.164-3zm-18%200c0-1.656.896-3%202-3h7.014c-.62.729-1.014%201.787-1.014%203%200%201.215.394%202.273%201.014%203h-7.014c-1.104%200-2-1.342-2-3zm9.995%2016h-4v-9c0-.729-.195-1.41-.537-2h.698v.012h3.008c-.107.311-.169.641-.169.988v7c0%20.963.538%201.604.859%201.986l.141.166v.848zm1.231-12.988h-.226v-.012c-1.104%200-2-1.342-2-3%200-1.656.896-3%202-3h.226c1.886%200%203.652-.742%205.206-2.018-.286%201.61-.432%203.315-.432%205.018%200%201.709.146%203.42.434%205.031-1.555-1.277-3.322-2.019-5.208-2.019zm11.774%208.988c-2.018%200-3.75-2.871-4.541-7h2.541c2.242%200%204-2.195%204-5%200-2.803-1.758-5-4-5h-2.541c.791-4.127%202.523-7%204.541-7%202.762%200%205%205.373%205%2012s-2.238%2012-5%2012z%27%20id%3D%27e%27/%3E%3Cpath%20class%3D%27path1%27%20d%3D%27M20.682%203.732c-.473-.472-1.1-.732-1.768-.732s-1.295.26-1.77.733l-1.41%201.412c-.473.472-.734%201.1-.734%201.769%200%20.471.129.922.371%201.313l-13.577%205.439c-.908.399-1.559%201.218-1.742%202.189-.185.977.125%201.979.834%202.687l12.72%2012.58c.548.548%201.276.859%202.045.877l.078.001c.202%200%20.407-.021.61-.062.994-.206%201.808-.893%202.177-1.828l5.342-13.376c.402.265.875.407%201.367.407.67%200%201.297-.261%201.768-.733l1.407-1.408c.477-.474.738-1.103.738-1.773s-.262-1.3-.732-1.768l-7.724-7.727zm-4.023%2025.635c-.124.313-.397.544-.727.612l-.229.021c-.254-.006-.499-.108-.682-.292l-12.728-12.588c-.234-.233-.337-.567-.275-.893.061-.324.279-.598.582-.73l6.217-2.49c4.189%201.393%208.379.051%2012.57%204.522l-4.728%2011.838zm10.333-15.787l-1.414%201.413c-.195.196-.512.196-.707%200l-1.768-1.767-1.432%203.589.119-.303c-3.01-3.005-6.069-3.384-8.829-3.723-.887-.109-1.747-.223-2.592-.405l8.491-3.401-1.715-1.715c-.195-.195-.195-.512%200-.707l1.414-1.415c.195-.195.512-.195.707%200l7.725%207.727c.198.195.198.512.001.707zm-10.492%207.42c1.378%200%202.5-1.121%202.5-2.5s-1.121-2.5-2.5-2.5-2.5%201.121-2.5%202.5%201.122%202.5%202.5%202.5zm0-4c.828%200%201.5.672%201.5%201.5s-.672%201.5-1.5%201.5c-.829%200-1.5-.672-1.5-1.5s.671-1.5%201.5-1.5zm13-17c-1.379%200-2.5%201.121-2.5%202.5s1.121%202.5%202.5%202.5%202.5-1.121%202.5-2.5-1.121-2.5-2.5-2.5zm0%204c-.828%200-1.5-.672-1.5-1.5s.672-1.5%201.5-1.5%201.5.672%201.5%201.5-.672%201.5-1.5%201.5zm-21.5%2013c0%201.103.897%202%202%202s2-.897%202-2-.897-2-2-2-2%20.897-2%202zm2-1c.552%200%201%20.447%201%201s-.448%201-1%201-1-.447-1-1%20.448-1%201-1zm2%207c0-.552.448-1%201-1s1%20.448%201%201-.448%201-1%201-1-.448-1-1zm16-15c0-.552.448-1%201-1s1%20.448%201%201-.448%201-1%201-1-.448-1-1z%27%20id%3D%27f%27/%3E%3C/defs%3E%3Cuse%20xlink%3Ahref%3D%27%23a%27/%3E%3Cuse%20xlink%3Ahref%3D%27%23b%27%20transform%3D%27translate%2848%29%27/%3E%3Cuse%20xlink%3Ahref%3D%27%23c%27%20transform%3D%27translate%2896%29%27/%3E%3Cuse%20xlink%3Ahref%3D%27%23d%27%20transform%3D%27translate%28144%29%27/%3E%3Cuse%20xlink%3Ahref%3D%27%23e%27%20transform%3D%27translate%28192%29%27/%3E%3Cuse%20xlink%3Ahref%3D%27%23f%27%20transform%3D%27translate%28240%29%27/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-position: -3em 0;
  }
.icon--airplane {
  }
.icon--speaker {
  content: "\6c";
  font-family: 'icomoon';
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
.icon--flask:before {
  content: "\6c";
  font-family: 'icomoon';
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

.browsers {
  float: right;
  width: 300px;
  margin-bottom: 1rem;
  LI {
    margin-bottom: .7em;
    }
  }
.browser:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  background: url(https://yoksel.github.io/assets/img/sprite-browsers.png) 0 0 no-repeat;
  vertical-align: middle;
}

.firefox:before {
  background-position: 0 0;
  }
.chrome:before {
  background-position: -30px 0;
  }
.safari:before {
  background-position: -60px 0;
  }
.ie8:before {
  background-position: -90px 0;
  }
.ie9:before {
  background-position: -90px 0;
  }
.opera-13:before {
  background-position: -120px 0;
  }
.opera-12:before {
  background-position: -150px 0;
  }
.opera-mob:before {
  background-position: -150px 0;
  }
.opera-mini:before {
  background-position: -150px 0;
  }


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console