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.

            
              <header>
  <svg viewBox="0 0 640 640">
    <circle fill="#BEDEFD" cx="300" cy="300" r="281.25"/>
    <path class="outline" fill="none" d="M300 9.375c160.508 0 290.625 130.117 290.625 290.625s-130.117 290.625-290.625 290.625-290.625-130.117-290.625-290.625 130.117-290.625 290.625-290.625"/>
    <path fill="#FFB278" stroke="#8E5B39" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M470.984 255.836c3.614-.519 7.374-.785 11.245-.785 27.442 0 49.688 12.871 49.688 40.312s-22.246 49.688-49.688 49.688c-11.173 0-21.473-3.703-29.77-9.929"/>
    <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M465.301 283.205c2.505-.36 5.112-.544 7.795-.544 13.534 0 25.245 4.516 30.877 13.972" fill="none"/>
    <path fill="#FFB278" stroke="#8E5B39" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M129.016 255.836c-3.614-.519-7.374-.785-11.245-.785-27.442 0-49.688 12.871-49.688 40.312s22.246 49.688 49.688 49.688c11.173 0 21.473-3.703 29.77-9.929"/>
    <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M134.699 283.205c-2.505-.36-5.112-.544-7.795-.544-13.534 0-25.245 4.516-30.877 13.972" fill="none"/>
    <path fill="#FFB278" d="M299.607 471.094c-44.903 0-87.991-21.261-121.331-59.863-31.625-36.618-49.763-83.994-49.763-129.981 0-45.428 17.482-84.161 50.555-112.013 30.884-26.008 73.691-40.331 120.539-40.331 46.847 0 89.655 14.323 120.538 40.331 33.073 27.851 50.556 66.585 50.556 112.013 0 45.986-18.138 93.363-49.762 129.981-33.34 38.602-76.429 59.863-121.332 59.863z"/>
    <path fill="#8E5B39" d="M299.607 135.938c90.609 0 164.062 54.703 164.062 145.312s-73.453 182.812-164.062 182.812-164.062-92.203-164.062-182.812 73.453-145.312 164.062-145.312m0-14.063c-48.502 0-92.918 14.91-125.068 41.984-16.762 14.115-29.834 31.117-38.855 50.536-9.424 20.285-14.202 42.778-14.202 66.856 0 47.649 18.761 96.7 51.473 134.576 16.485 19.088 35.453 34.204 56.378 44.928 22.49 11.526 46.133 17.37 70.275 17.37s47.785-5.844 70.275-17.371c20.924-10.724 39.892-25.84 56.378-44.928 32.711-37.876 51.473-86.927 51.473-134.576 0-24.077-4.778-46.571-14.202-66.856-9.021-19.418-22.094-36.42-38.855-50.536-32.151-27.073-76.568-41.983-125.07-41.983z"/>
    <path fill="#C17F49" stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M172.118 395.709l-.011-.446c-.036-.788-.061-1.583-.061-2.399 0-15.673 5.202-30.128 13.968-41.744-8.766-11.616-13.968-26.071-13.968-41.744 0-38.315 31.06-69.375 69.375-69.375 26.317 0 49.211 14.655 60.968 36.248 11.757-21.594 34.651-36.249 60.968-36.249 38.315 0 69.375 31.06 69.375 69.375 0 15.673-5.202 30.128-13.968 41.744 7.702 10.207 12.652 22.61 13.738 36.102 19.601-32.369 31.167-70.03 31.167-105.972 0-90.609-73.453-145.312-164.062-145.312s-164.062 54.703-164.062 145.312c0 39.132 13.708 80.303 36.573 114.46z"/>
    <path fill="#8E5B39" stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M299.607 351.349s-3.047-5.752-10.439-5.752c-2.955 0-5.622 1.227-7.522 3.201 0-7.002 8.15-12.928 18.052-12.928s17.869 5.927 17.869 12.928c-1.899-1.973-4.567-3.201-7.522-3.201-7.391 0-10.438 5.752-10.438 5.752z"/>
    <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M318.786 206.755c.072-4.109.353-8.396.863-12.789.538-4.637 1.296-7.226 2.233-11.439" fill="none"/>
    <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M281.57 206.755c-.072-4.109-.353-8.396-.863-12.789-.538-4.637-1.296-7.226-2.233-11.439" fill="none"/>
    <line stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="300.036" y1="206.755" x2="300.036" y2="172.22" fill="none"/>
    <g class="default">
      <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M337.73 326.688c6.426-1.212 13.684-1.895 21.367-1.895 12.425 0 23.737 1.785 32.216 4.708" fill="none"/>
      <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M261.938 326.688c-6.426-1.212-13.684-1.895-21.367-1.895-12.425 0-23.738 1.785-32.216 4.708" fill="none"/>
      <path stroke="#8E5B39" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M328.337 386.338c-4.058 7.051-15.388 12.125-28.73 12.125-13.74 0-25.346-5.382-29.074-12.762" fill="none"/>
      <circle fill="#8E5B39" cx="241.374" cy="314.975" r="13.593"/>
      <circle fill="#8E5B39" cx="358.294" cy="314.975" r="13.593"/>
    </g>
    <g class="hover" stroke="#8E5B39" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
      <path stroke-width="8" d="M226.155 323.369c0-9.866 7.998-17.864 17.864-17.864s17.864 7.998 17.864 17.864" fill="none"/>
      <path stroke-width="8" d="M339.144 323.369c0-9.866 7.998-17.864 17.864-17.864s17.864 7.998 17.864 17.864" fill="none"/>
      <path fill="#8E5B39" stroke-width="10" d="M343.9 380.811c0 18.472-19.439 33.447-43.418 33.447-23.98 0-43.418-14.975-43.418-33.447h86.836z"/>
    </g>
  </svg>
</header>
<main>
  <article>
    <header>
      <small>
        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <circle cx="8" cy="8" r="7.5" fill="none" stroke="#BBB" />
          <path stroke="#BBB" stroke-linecap="round" d="M4 8.5h4.5M8.5 3v5.5" />
        </svg>
        November 5th, 1955
      </small>
      <h1><span>A</span> Title <span>of</span> Sorts</h1>
    </header>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat dolor velit, quis vestibulum magna vulputate ac. Proin sed venenatis libero. Etiam vitae quam eu ipsum scelerisque scelerisque. Integer mattis sit amet sem a tincidunt. Ut tempor euismod mi, varius tempor tellus. Mauris dictum dolor ac fringilla suscipit. Morbi in ligula ut sem laoreet lacinia et vel nibh. In volutpat sapien massa, sed porttitor ipsum hendrerit nec. Aliquam vitae tincidunt justo. Integer lobortis orci nisl, ut dictum libero faucibus quis. Cras vulputate vulputate quam vitae tristique. Aenean suscipit fermentum leo sed pharetra. Fusce sit amet lorem id arcu porta bibendum. Nulla ultricies scelerisque ligula, vel lobortis dui tempus sed. Cras a ipsum purus. Duis non vestibulum purus.</p>

    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac est vel erat elementum ultrices in at risus. Integer elit nibh, rutrum ac orci quis, egestas pulvinar nibh. Ut eget placerat ante. Suspendisse tristique tristique varius. Curabitur consectetur est libero, sed iaculis elit sagittis vitae. Duis vel cursus quam. Praesent sed rutrum tortor. Nulla et ultricies velit. Vestibulum ac ante iaculis, tristique nulla vitae, placerat metus.</p>

    <p>Vestibulum aliquet tempor purus sed fringilla. Etiam adipiscing porta adipiscing. Proin semper urna sed augue placerat, sit amet mollis felis mollis. Nullam a dolor augue. Nulla turpis nunc, malesuada at tempus sit amet, laoreet quis purus. Sed ullamcorper nunc quis pellentesque interdum. Curabitur et aliquam ligula. Donec ut erat ultrices, viverra massa congue, sagittis purus. Sed non libero tortor. Nam sit amet cursus felis. Integer pretium luctus ante eget tempor. Vivamus adipiscing diam sapien, sit amet sollicitudin lectus fringilla non. Nunc ac malesuada ligula, eu tempus purus. Sed vel ipsum at odio cursus rutrum.</p>

    <p>Proin vel nunc vitae magna convallis vehicula id vitae mauris. Ut nec dapibus dolor. Sed vestibulum, nisi quis blandit malesuada, est neque facilisis nulla, a posuere erat lectus ut mauris. Aliquam varius, tortor non interdum malesuada, urna turpis dictum massa, ut malesuada metus velit eget lacus. Sed sollicitudin porta eleifend. Curabitur auctor, metus vel elementum malesuada, urna mi tempus risus, eget elementum risus sem vel tortor. Aliquam erat volutpat. Proin dignissim lectus felis, mattis convallis orci fringilla sit amet. Suspendisse pharetra nulla facilisis ipsum bibendum, eget laoreet purus consequat.</p>

    <p>Etiam hendrerit, felis et mattis feugiat, augue orci suscipit leo, in consequat orci nunc quis neque. Integer ullamcorper condimentum leo ac gravida. Curabitur non imperdiet leo, non commodo mauris. Etiam eleifend consectetur est, ullamcorper facilisis orci tristique sit amet. Integer dictum justo a sapien fermentum, ut imperdiet risus ornare. Integer dapibus a turpis et accumsan. Vivamus at pulvinar enim, et viverra lorem. In hac habitasse platea dictumst. Nam porta, erat ut mattis scelerisque, tortor nisi ullamcorper sapien, sed volutpat ipsum tellus at orci. Donec rhoncus metus in augue congue, vel faucibus neque tincidunt. Nunc in leo dui. Nullam vel tincidunt sapien. Cras molestie placerat nisl, quis condimentum sem dictum id. Nunc laoreet vehicula quam hendrerit vulputate.</p>

    <p>Etiam imperdiet id leo in feugiat. Duis mollis sed elit sit amet dapibus. Phasellus ultricies commodo tempus. Aliquam erat volutpat. Suspendisse lacinia felis eu augue congue, at vestibulum nisi venenatis. Mauris non magna porta, rutrum lectus vel, convallis dui. Suspendisse in metus orci. Nunc ullamcorper consectetur enim, vel tincidunt tellus volutpat sit amet. Cras ut nulla quam. Nulla sollicitudin lacus et sapien lobortis, sed scelerisque ante vulputate. Nullam viverra est non mauris faucibus, non imperdiet lacus euismod. Pellentesque nec ornare nisl. Donec porttitor, augue quis pulvinar pretium, dui mi tristique quam, quis commodo velit eros ut leo. Maecenas fringilla dictum rutrum.</p>

    <p>Duis suscipit, augue vitae dictum aliquam, erat enim blandit nisl, vitae ultricies orci odio vitae nunc. Donec bibendum semper est id vestibulum. Nullam aliquam et diam et facilisis. Sed elementum ultricies sapien, a posuere urna hendrerit vel. Sed molestie dui in leo condimentum hendrerit. Nunc pharetra magna a vulputate lobortis. Duis dapibus vehicula viverra. Cras non urna nibh. Morbi semper eleifend leo. Nam id gravida sapien, vel tempor ipsum. Aliquam vel consectetur tortor. Etiam suscipit velit vel neque luctus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras iaculis risus vel odio euismod, ac dapibus turpis mattis. Fusce eu lorem at urna fringilla posuere. Vestibulum vel risus nec nulla gravida laoreet.</p>

    <p>Pellentesque sagittis scelerisque diam in lobortis. Aliquam ac sem nec urna suscipit pellentesque. In condimentum, risus vitae consequat iaculis, est purus elementum dolor, in tristique dolor mi et ipsum. Pellentesque ut lectus vel urna rhoncus ullamcorper. Quisque sed eleifend massa, et varius ipsum. In vestibulum interdum ipsum et mattis. Phasellus non libero eget metus fermentum aliquet a id diam. Proin non vulputate libero. Suspendisse vulputate turpis eros, non rhoncus neque auctor vel. Duis a eros orci. Aenean vulputate malesuada eros et tincidunt.</p>

    <p>Ut venenatis massa justo, sed pulvinar nunc molestie ut. Pellentesque auctor augue nec cursus cursus. Nunc vel mauris quis metus feugiat viverra nec at nunc. Nullam placerat dictum neque pretium pellentesque. Nam quam risus, iaculis ut lacinia non, rhoncus eu nulla. Sed sodales orci nec auctor porta. Suspendisse et tortor ac turpis pellentesque tempus ut sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

    <p>Duis vehicula tellus et gravida aliquam. Nullam consequat dapibus rutrum. Praesent fringilla metus eget metus varius, sed interdum lectus mollis. Sed nec vehicula diam. Duis mi velit, interdum eu odio nec, tincidunt egestas nulla. Pellentesque aliquet ultrices dui, in posuere enim. Mauris vitae molestie lectus. Etiam blandit placerat neque. Duis quis odio a neque condimentum luctus nec sed nisl. Nullam tellus felis, hendrerit eu suscipit at, ultrices id sapien.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat dolor velit, quis vestibulum magna vulputate ac. Proin sed venenatis libero. Etiam vitae quam eu ipsum scelerisque scelerisque. Integer mattis sit amet sem a tincidunt. Ut tempor euismod mi, varius tempor tellus. Mauris dictum dolor ac fringilla suscipit. Morbi in ligula ut sem laoreet lacinia et vel nibh. In volutpat sapien massa, sed porttitor ipsum hendrerit nec. Aliquam vitae tincidunt justo. Integer lobortis orci nisl, ut dictum libero faucibus quis. Cras vulputate vulputate quam vitae tristique. Aenean suscipit fermentum leo sed pharetra. Fusce sit amet lorem id arcu porta bibendum. Nulla ultricies scelerisque ligula, vel lobortis dui tempus sed. Cras a ipsum purus. Duis non vestibulum purus.</p>

    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac est vel erat elementum ultrices in at risus. Integer elit nibh, rutrum ac orci quis, egestas pulvinar nibh. Ut eget placerat ante. Suspendisse tristique tristique varius. Curabitur consectetur est libero, sed iaculis elit sagittis vitae. Duis vel cursus quam. Praesent sed rutrum tortor. Nulla et ultricies velit. Vestibulum ac ante iaculis, tristique nulla vitae, placerat metus.</p>

    <p>Vestibulum aliquet tempor purus sed fringilla. Etiam adipiscing porta adipiscing. Proin semper urna sed augue placerat, sit amet mollis felis mollis. Nullam a dolor augue. Nulla turpis nunc, malesuada at tempus sit amet, laoreet quis purus. Sed ullamcorper nunc quis pellentesque interdum. Curabitur et aliquam ligula. Donec ut erat ultrices, viverra massa congue, sagittis purus. Sed non libero tortor. Nam sit amet cursus felis. Integer pretium luctus ante eget tempor. Vivamus adipiscing diam sapien, sit amet sollicitudin lectus fringilla non. Nunc ac malesuada ligula, eu tempus purus. Sed vel ipsum at odio cursus rutrum.</p>

    <p>Proin vel nunc vitae magna convallis vehicula id vitae mauris. Ut nec dapibus dolor. Sed vestibulum, nisi quis blandit malesuada, est neque facilisis nulla, a posuere erat lectus ut mauris. Aliquam varius, tortor non interdum malesuada, urna turpis dictum massa, ut malesuada metus velit eget lacus. Sed sollicitudin porta eleifend. Curabitur auctor, metus vel elementum malesuada, urna mi tempus risus, eget elementum risus sem vel tortor. Aliquam erat volutpat. Proin dignissim lectus felis, mattis convallis orci fringilla sit amet. Suspendisse pharetra nulla facilisis ipsum bibendum, eget laoreet purus consequat.</p>

    <p>Etiam hendrerit, felis et mattis feugiat, augue orci suscipit leo, in consequat orci nunc quis neque. Integer ullamcorper condimentum leo ac gravida. Curabitur non imperdiet leo, non commodo mauris. Etiam eleifend consectetur est, ullamcorper facilisis orci tristique sit amet. Integer dictum justo a sapien fermentum, ut imperdiet risus ornare. Integer dapibus a turpis et accumsan. Vivamus at pulvinar enim, et viverra lorem. In hac habitasse platea dictumst. Nam porta, erat ut mattis scelerisque, tortor nisi ullamcorper sapien, sed volutpat ipsum tellus at orci. Donec rhoncus metus in augue congue, vel faucibus neque tincidunt. Nunc in leo dui. Nullam vel tincidunt sapien. Cras molestie placerat nisl, quis condimentum sem dictum id. Nunc laoreet vehicula quam hendrerit vulputate.</p>

    <p>Etiam imperdiet id leo in feugiat. Duis mollis sed elit sit amet dapibus. Phasellus ultricies commodo tempus. Aliquam erat volutpat. Suspendisse lacinia felis eu augue congue, at vestibulum nisi venenatis. Mauris non magna porta, rutrum lectus vel, convallis dui. Suspendisse in metus orci. Nunc ullamcorper consectetur enim, vel tincidunt tellus volutpat sit amet. Cras ut nulla quam. Nulla sollicitudin lacus et sapien lobortis, sed scelerisque ante vulputate. Nullam viverra est non mauris faucibus, non imperdiet lacus euismod. Pellentesque nec ornare nisl. Donec porttitor, augue quis pulvinar pretium, dui mi tristique quam, quis commodo velit eros ut leo. Maecenas fringilla dictum rutrum.</p>

    <p>Duis suscipit, augue vitae dictum aliquam, erat enim blandit nisl, vitae ultricies orci odio vitae nunc. Donec bibendum semper est id vestibulum. Nullam aliquam et diam et facilisis. Sed elementum ultricies sapien, a posuere urna hendrerit vel. Sed molestie dui in leo condimentum hendrerit. Nunc pharetra magna a vulputate lobortis. Duis dapibus vehicula viverra. Cras non urna nibh. Morbi semper eleifend leo. Nam id gravida sapien, vel tempor ipsum. Aliquam vel consectetur tortor. Etiam suscipit velit vel neque luctus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras iaculis risus vel odio euismod, ac dapibus turpis mattis. Fusce eu lorem at urna fringilla posuere. Vestibulum vel risus nec nulla gravida laoreet.</p>

    <p>Pellentesque sagittis scelerisque diam in lobortis. Aliquam ac sem nec urna suscipit pellentesque. In condimentum, risus vitae consequat iaculis, est purus elementum dolor, in tristique dolor mi et ipsum. Pellentesque ut lectus vel urna rhoncus ullamcorper. Quisque sed eleifend massa, et varius ipsum. In vestibulum interdum ipsum et mattis. Phasellus non libero eget metus fermentum aliquet a id diam. Proin non vulputate libero. Suspendisse vulputate turpis eros, non rhoncus neque auctor vel. Duis a eros orci. Aenean vulputate malesuada eros et tincidunt.</p>

    <p>Ut venenatis massa justo, sed pulvinar nunc molestie ut. Pellentesque auctor augue nec cursus cursus. Nunc vel mauris quis metus feugiat viverra nec at nunc. Nullam placerat dictum neque pretium pellentesque. Nam quam risus, iaculis ut lacinia non, rhoncus eu nulla. Sed sodales orci nec auctor porta. Suspendisse et tortor ac turpis pellentesque tempus ut sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

    <p>Duis vehicula tellus et gravida aliquam. Nullam consequat dapibus rutrum. Praesent fringilla metus eget metus varius, sed interdum lectus mollis. Sed nec vehicula diam. Duis mi velit, interdum eu odio nec, tincidunt egestas nulla. Pellentesque aliquet ultrices dui, in posuere enim. Mauris vitae molestie lectus. Etiam blandit placerat neque. Duis quis odio a neque condimentum luctus nec sed nisl. Nullam tellus felis, hendrerit eu suscipit at, ultrices id sapien.</p>
  </article>
</main>
            
          
!
            
              html {
  box-sizing: border-box;
}

*, 
*:before, 
*:after {
  box-sizing: inherit;
}

body {
  color: #444;
  padding: 5vw;
  font: 1.125em/1.667 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

body > header {
  position: fixed;
  left: 0;
  top: 0;
  width: 150px;
  height: 100%;
  
  > svg {
    position: absolute;
    top: 30px;
    left: 30px;
    height: 90px;
    width:  90px;

    .default { opacity: 1; }
    .hover   { opacity: 0; }

    &:hover {
      animation: bounce .6s ease-out;
      .default { opacity: 0; }
      .hover   { opacity: 1; }  
    } 
  }
}

article {
  p {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  } 
}

article header {
  text-align: center;

  small {
    font-size: .6em;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: -2em;
    
    svg {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      margin: -2px 4px 0 0;
    }
  }
  
  h1 {
    color: #1E90FF;
    font-weight: 900;
    font-size: 3.5em;
    line-height: .85;
  }
  
}

main {
  margin: 0 auto;
  max-width: 40em;
}

@keyframes bounce { 
  0%, 
  20%, 
  50%, 
  70%, 
  90%, 
  100% { transform: translateY(0);    }
  40%  { transform: translateY(-8px); }
  60%  { transform: translateY(-4px); }
  80%  { transform: translateY(-2px); }
}
            
          
!
            
              var progressPath = document.querySelector( '.outline' ),
    pathLength   = progressPath.getTotalLength(),
    lastPosition = -1;

progressPath.style.stroke = '#1E90FF';
progressPath.style.strokeWidth = 20;
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();

function updateProgress() {
  var progress = pathLength - ( window.pageYOffset * pathLength / ( document.body.scrollHeight - window.innerHeight ) );

  // Update dashOffset
  progressPath.style.strokeDashoffset = progress;
}

function loop() {
  if ( lastPosition == window.pageYOffset ) {
    window.requestAnimationFrame( loop );
    return false;
  } else {
    lastPosition = window.pageYOffset;
    updateProgress();
  }
  window.requestAnimationFrame( loop );
}

// Call the loop for the first time
loop();
            
          
!
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