cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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="nav">

  <div class="dot">
    <div class="top">
      <div class="flap">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
          <g>
            <path d="M71.6,36.4c-0.3,0.6-0.7,0.9-1.4,0.9h-7.5v32.8c0,0.4-0.1,0.8-0.4,1.1c-0.3,0.3-0.6,0.4-1.1,0.4H46.3
              c-0.4,0-0.8-0.1-1.1-0.4c-0.3-0.3-0.4-0.6-0.4-1.1V44.8H26.9v25.4c0,0.4-0.1,0.8-0.4,1.1c-0.3,0.3-0.6,0.4-1.1,0.4H10.5
              c-0.4,0-0.8-0.1-1.1-0.4C9.1,71,9,70.6,9,70.2V37.4H1.5c-0.7,0-1.2-0.3-1.4-0.9c-0.2-0.7,0-1.2,0.4-1.7L34.8,0.4
              C35.1,0.1,35.4,0,35.9,0c0.4,0,0.8,0.2,1.1,0.5l34.3,34.3C71.7,35.2,71.8,35.8,71.6,36.4z"/>
          </g>
        </svg>
        <div class="flapFront">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
            <g>
              <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
                c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
                c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
                c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
                c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
            </g>
          </span>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="flap">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
          <g>
            <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
              c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
              c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
              c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
              c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
          </g>
        <div class="flapFront">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
          <g>
            <path d="M71.6,36.4c-0.3,0.6-0.7,0.9-1.4,0.9h-7.5v32.8c0,0.4-0.1,0.8-0.4,1.1c-0.3,0.3-0.6,0.4-1.1,0.4H46.3
              c-0.4,0-0.8-0.1-1.1-0.4c-0.3-0.3-0.4-0.6-0.4-1.1V44.8H26.9v25.4c0,0.4-0.1,0.8-0.4,1.1c-0.3,0.3-0.6,0.4-1.1,0.4H10.5
              c-0.4,0-0.8-0.1-1.1-0.4C9.1,71,9,70.6,9,70.2V37.4H1.5c-0.7,0-1.2-0.3-1.4-0.9c-0.2-0.7,0-1.2,0.4-1.7L34.8,0.4
              C35.1,0.1,35.4,0,35.9,0c0.4,0,0.8,0.2,1.1,0.5l34.3,34.3C71.7,35.2,71.8,35.8,71.6,36.4z"/>
          </g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="dot seaGreen">
    <div class="top">
      <div class="flap">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M71.7,67.2v3c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.4-1.1,0.4H1.5c-0.4,0-0.8-0.1-1.1-0.4S0,70.6,0,70.2v-3c0-2,0.5-3.8,1.5-5.4
		c1-1.6,2.3-2.8,3.9-3.8c1.6-1,3.3-1.9,5.2-2.7c1.9-0.8,3.8-1.6,5.7-2.3c1.9-0.7,3.7-1.5,5.2-2.3c1.6-0.8,2.9-1.8,3.9-3.1
		c1-1.2,1.5-2.7,1.5-4.3c-0.2-0.2-0.6-0.6-1-1.1c-0.4-0.5-1.1-1.5-2.2-3.2c-1-1.6-1.9-3.3-2.7-5.1c-0.8-1.8-1.5-4.2-2.2-7.1
		c-0.6-2.9-1-5.9-1-8.9c0-2.4,0.5-4.7,1.4-7c0.9-2.2,2.2-4.1,3.8-5.7c1.6-1.6,3.5-2.9,5.7-3.8s4.5-1.4,7-1.4c2.4,0,4.7,0.5,7,1.4
		c2.2,0.9,4.1,2.2,5.7,3.8c1.6,1.6,2.9,3.5,3.8,5.7c0.9,2.2,1.4,4.5,1.4,7c0,2.2-0.2,4.4-0.5,6.6s-0.8,4-1.3,5.7
		c-0.5,1.6-1.1,3.2-1.8,4.6c-0.6,1.5-1.3,2.7-1.9,3.7c-0.6,1-1.2,1.9-1.8,2.6s-1,1.3-1.3,1.6l-0.5,0.5c0,1.6,0.5,3,1.5,4.3
		c1,1.2,2.3,2.3,3.9,3.1c1.6,0.8,3.3,1.6,5.2,2.3c1.9,0.7,3.8,1.5,5.7,2.3c1.9,0.8,3.7,1.7,5.2,2.7c1.6,1,2.9,2.3,3.9,3.8
		C71.2,63.4,71.7,65.2,71.7,67.2z"/>
</g>
        </svg>
        <div class="flapFront">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
            <g>
              <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
                c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
                c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
                c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
                c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
            </g>
          </span>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="flap">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
          <g>
            <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
              c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
              c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
              c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
              c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
          </g>
        <div class="flapFront">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M71.7,67.2v3c0,0.4-0.1,0.8-0.4,1.1s-0.6,0.4-1.1,0.4H1.5c-0.4,0-0.8-0.1-1.1-0.4S0,70.6,0,70.2v-3c0-2,0.5-3.8,1.5-5.4
		c1-1.6,2.3-2.8,3.9-3.8c1.6-1,3.3-1.9,5.2-2.7c1.9-0.8,3.8-1.6,5.7-2.3c1.9-0.7,3.7-1.5,5.2-2.3c1.6-0.8,2.9-1.8,3.9-3.1
		c1-1.2,1.5-2.7,1.5-4.3c-0.2-0.2-0.6-0.6-1-1.1c-0.4-0.5-1.1-1.5-2.2-3.2c-1-1.6-1.9-3.3-2.7-5.1c-0.8-1.8-1.5-4.2-2.2-7.1
		c-0.6-2.9-1-5.9-1-8.9c0-2.4,0.5-4.7,1.4-7c0.9-2.2,2.2-4.1,3.8-5.7c1.6-1.6,3.5-2.9,5.7-3.8s4.5-1.4,7-1.4c2.4,0,4.7,0.5,7,1.4
		c2.2,0.9,4.1,2.2,5.7,3.8c1.6,1.6,2.9,3.5,3.8,5.7c0.9,2.2,1.4,4.5,1.4,7c0,2.2-0.2,4.4-0.5,6.6s-0.8,4-1.3,5.7
		c-0.5,1.6-1.1,3.2-1.8,4.6c-0.6,1.5-1.3,2.7-1.9,3.7c-0.6,1-1.2,1.9-1.8,2.6s-1,1.3-1.3,1.6l-0.5,0.5c0,1.6,0.5,3,1.5,4.3
		c1,1.2,2.3,2.3,3.9,3.1c1.6,0.8,3.3,1.6,5.2,2.3c1.9,0.7,3.8,1.5,5.7,2.3c1.9,0.8,3.7,1.7,5.2,2.7c1.6,1,2.9,2.3,3.9,3.8
		C71.2,63.4,71.7,65.2,71.7,67.2z"/>
</g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="dot green">
    <div class="top">
      <div class="flap pushDown">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M23.9,3.2c3.7-2.1,7.7-3.2,12-3.2c4.3,0,8.3,1.1,12,3.2c3.7,2.1,6.6,5,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12c0,4.1-1,8-3.1,11.7
		L37.2,71c-0.3,0.5-0.7,0.7-1.3,0.7c-0.6,0-1.1-0.2-1.3-0.7L15,35.6c-2.1-3.5-3.1-7.4-3.1-11.7c0-4.3,1.1-8.3,3.2-12
		C17.3,8.2,20.2,5.3,23.9,3.2z M29.5,30.3c1.8,1.7,3.9,2.6,6.3,2.6c2.5,0,4.6-0.9,6.3-2.6c1.8-1.7,2.6-3.9,2.6-6.4
		c0-2.5-0.9-4.6-2.6-6.4c-1.7-1.7-3.9-2.6-6.4-2.6c-2.5,0-4.6,0.9-6.4,2.6c-1.7,1.7-2.6,3.9-2.6,6.4C26.9,26.4,27.8,28.5,29.5,30.3z
		"/>
</g>
        </svg>
        <div class="flapFront">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
            <g>
              <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
                c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
                c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
                c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
                c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
            </g>
          </span>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="flap">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
          <g>
            <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
              c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
              c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
              c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
              c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
          </g>
        <div class="flapFront pushDown">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M23.9,3.2c3.7-2.1,7.7-3.2,12-3.2c4.3,0,8.3,1.1,12,3.2c3.7,2.1,6.6,5,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12c0,4.1-1,8-3.1,11.7
		L37.2,71c-0.3,0.5-0.7,0.7-1.3,0.7c-0.6,0-1.1-0.2-1.3-0.7L15,35.6c-2.1-3.5-3.1-7.4-3.1-11.7c0-4.3,1.1-8.3,3.2-12
		C17.3,8.2,20.2,5.3,23.9,3.2z M29.5,30.3c1.8,1.7,3.9,2.6,6.3,2.6c2.5,0,4.6-0.9,6.3-2.6c1.8-1.7,2.6-3.9,2.6-6.4
		c0-2.5-0.9-4.6-2.6-6.4c-1.7-1.7-3.9-2.6-6.4-2.6c-2.5,0-4.6,0.9-6.4,2.6c-1.7,1.7-2.6,3.9-2.6,6.4C26.9,26.4,27.8,28.5,29.5,30.3z
		"/>
</g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="dot gold">
    <div class="top">
      <div class="flap pushDown">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M11.9,23.9c0-4.3,1.1-8.3,3.2-12c2.1-3.7,5-6.6,8.7-8.7c3.7-2.1,7.7-3.2,12-3.2c4.3,0,8.3,1.1,12,3.2
		c3.7,2.1,6.6,5,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12c0,2.2-0.3,4.3-0.8,6.3c-0.5,2-1.3,3.8-2.1,5.3c-0.9,1.5-1.8,3-2.9,4.4
		c-1.1,1.4-2.1,2.8-3.2,4.1c-1.1,1.3-2,2.6-2.9,3.9c-0.9,1.3-1.6,2.7-2.1,4.2c-0.5,1.5-0.8,3.1-0.8,4.7H26.9c0-1.6-0.3-3.2-0.8-4.7
		c-0.5-1.5-1.3-2.9-2.1-4.2c-0.9-1.3-1.9-2.6-2.9-3.9c-1.1-1.3-2.1-2.7-3.2-4.1c-1.1-1.4-2-2.9-2.9-4.4c-0.9-1.5-1.6-3.3-2.1-5.3
		C12.2,28.2,11.9,26.1,11.9,23.9z M44.8,62.7v4.5c0,1.2-0.4,2.3-1.3,3.2s-1.9,1.3-3.2,1.3h-9c-1.2,0-2.3-0.4-3.2-1.3
		s-1.3-1.9-1.3-3.2v-4.5H44.8z"/>
</g>
        </svg>
        <div class="flapFront">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
            <g>
              <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
                c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
                c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
                c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
                c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
            </g>
          </span>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="flap">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
          <g>
            <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
              c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
              c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
              c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
              c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
          </g>
        <div class="flapFront pushDown">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M11.9,23.9c0-4.3,1.1-8.3,3.2-12c2.1-3.7,5-6.6,8.7-8.7c3.7-2.1,7.7-3.2,12-3.2c4.3,0,8.3,1.1,12,3.2
		c3.7,2.1,6.6,5,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12c0,2.2-0.3,4.3-0.8,6.3c-0.5,2-1.3,3.8-2.1,5.3c-0.9,1.5-1.8,3-2.9,4.4
		c-1.1,1.4-2.1,2.8-3.2,4.1c-1.1,1.3-2,2.6-2.9,3.9c-0.9,1.3-1.6,2.7-2.1,4.2c-0.5,1.5-0.8,3.1-0.8,4.7H26.9c0-1.6-0.3-3.2-0.8-4.7
		c-0.5-1.5-1.3-2.9-2.1-4.2c-0.9-1.3-1.9-2.6-2.9-3.9c-1.1-1.3-2.1-2.7-3.2-4.1c-1.1-1.4-2-2.9-2.9-4.4c-0.9-1.5-1.6-3.3-2.1-5.3
		C12.2,28.2,11.9,26.1,11.9,23.9z M44.8,62.7v4.5c0,1.2-0.4,2.3-1.3,3.2s-1.9,1.3-3.2,1.3h-9c-1.2,0-2.3-0.4-3.2-1.3
		s-1.3-1.9-1.3-3.2v-4.5H44.8z"/>
</g>
          </svg>
        </div>
      </div>
    </div>
  </div>
        
  <div class="dot rust">
    <div class="top">
      <div class="flap pushDown">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M68.9,22.3c1.9,3.6,2.8,7.4,2.8,11.3c0,3.9-0.9,7.7-2.8,11.3s-4.4,6.7-7.6,9.3c-3.2,2.6-7,4.7-11.4,6.2
		c-4.4,1.5-9.1,2.3-14,2.3c-1.9,0-3.9-0.1-6.1-0.4c-6.3,6.3-12.7,9.4-19.3,9.4c-0.7,0-1.2-0.3-1.4-0.9c-0.2-0.7,0-1.3,0.4-1.6
		l0.1-0.1c2.2-2.5,3.8-5.5,4.8-9.1c0.2-0.9,0.4-1.8,0.6-2.8C10.2,54.5,6.6,51.1,4,46.9c-2.6-4.1-4-8.6-4-13.3
		c0-3.9,0.9-7.7,2.8-11.3c1.9-3.6,4.4-6.7,7.6-9.3c3.2-2.6,7-4.7,11.4-6.2c4.4-1.5,9.1-2.3,14-2.3c4.9,0,9.5,0.8,14,2.3
		c4.4,1.5,8.2,3.6,11.4,6.2C64.4,15.6,67,18.7,68.9,22.3z"/>
</g>
        </svg>
        <div class="flapFront">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
            <g>
              <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
                c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
                c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
                c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
                c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
            </g>
          </span>
        </div>
      </div>
    </div>
    <div class="btm">
      <div class="flap">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 51 67.7" enable-background="new 0 0 51 67.7" xml:space="preserve">
          <g>
            <path fill="none" stroke="#CCCCCC" d="M46.3,29.7c1.2,0,2.1,0.4,2.9,1.2c0.8,0.8,1.2,1.8,1.2,2.9V63c0,1.2-0.4,2.1-1.2,2.9
              c-0.8,0.8-1.8,1.2-2.9,1.2H4.7c-1.2,0-2.1-0.4-2.9-1.2c-0.8-0.8-1.2-1.8-1.2-2.9V33.8c0-1.2,0.4-2.1,1.2-2.9
              c0.8-0.8,1.8-1.2,2.9-1.2h4.2V17.2c0-2.3,0.4-4.4,1.3-6.5c0.9-2.1,2.1-3.8,3.6-5.3C15.2,3.9,17,2.7,19,1.8s4.2-1.3,6.5-1.3
              c2.3,0,4.4,0.4,6.5,1.3s3.8,2.1,5.3,3.6c1.5,1.5,2.7,3.3,3.6,5.3c0.9,2.1,1.3,4.2,1.3,6.5v12.5H46.3z M17.2,17.2v12.5h16.7V17.2
              c0-2.3-0.8-4.3-2.4-5.9c-1.6-1.6-3.6-2.4-5.9-2.4c-2.3,0-4.3,0.8-5.9,2.4C18,12.9,17.2,14.9,17.2,17.2z"/>
          </g>
        <div class="flapFront pushDown">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 71.7 71.7" enable-background="new 0 0 71.7 71.7" xml:space="preserve" fill="#bddbff">
<g>
	<path d="M68.9,22.3c1.9,3.6,2.8,7.4,2.8,11.3c0,3.9-0.9,7.7-2.8,11.3s-4.4,6.7-7.6,9.3c-3.2,2.6-7,4.7-11.4,6.2
		c-4.4,1.5-9.1,2.3-14,2.3c-1.9,0-3.9-0.1-6.1-0.4c-6.3,6.3-12.7,9.4-19.3,9.4c-0.7,0-1.2-0.3-1.4-0.9c-0.2-0.7,0-1.3,0.4-1.6
		l0.1-0.1c2.2-2.5,3.8-5.5,4.8-9.1c0.2-0.9,0.4-1.8,0.6-2.8C10.2,54.5,6.6,51.1,4,46.9c-2.6-4.1-4-8.6-4-13.3
		c0-3.9,0.9-7.7,2.8-11.3c1.9-3.6,4.4-6.7,7.6-9.3c3.2-2.6,7-4.7,11.4-6.2c4.4-1.5,9.1-2.3,14-2.3c4.9,0,9.5,0.8,14,2.3
		c4.4,1.5,8.2,3.6,11.4,6.2C64.4,15.6,67,18.7,68.9,22.3z"/>
</g>
          </svg>
        </div>
      </div>
    </div>
  </div>
    
</div>

<div class="content">
  <div class="copy">
    <h1>Locked navigation</h1>
    <div class="toggleButton">
      <a href="#" class="flapit">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
	<path d="M21,13V6c0-0.8-0.3-1.5-0.9-2.1S18.8,3,18,3s-1.5,0.3-2.1,0.9S15,5.2,15,6v4.5h1.5c0.4,0,0.8,0.1,1.1,0.4S18,11.6,18,12
		v10.5c0,0.4-0.1,0.8-0.4,1.1S16.9,24,16.5,24h-15c-0.4,0-0.8-0.1-1.1-0.4S0,22.9,0,22.5V12c0-0.4,0.1-0.8,0.4-1.1s0.6-0.4,1.1-0.4
		H12V6c0-0.8,0.2-1.6,0.5-2.3s0.7-1.4,1.3-1.9s1.2-1,1.9-1.3S17.2,0,18,0s1.6,0.2,2.3,0.5s1.4,0.7,1.9,1.3s1,1.2,1.3,1.9
		S24,5.2,24,6v7c0,0.1,0,0.3-0.1,0.4s-0.2,0.1-0.4,0.1h-2c-0.1,0-0.3,0-0.4-0.1S21,13.1,21,13z"/>
</g>
</svg>
        Unlock
      </a>
      <a href="#" class="reset">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 23 23" enable-background="new 0 0 23 23" xml:space="preserve">
<g>
	<path d="M22.1,7.7C22.7,9.1,23,10.5,23,12s-0.3,2.9-0.9,4.3s-1.4,2.5-2.3,3.5s-2.2,1.8-3.5,2.3S13.5,23,12,23c-1.4,0-2.7-0.3-4-0.8
		S5.6,21,4.6,20.1h0v0c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.3,0.1-0.3l0,0l2.1-2.1c0.1-0.1,0.2-0.1,0.3-0.1s0.2,0,0.3,0.1
		c0.6,0.5,1.3,1,2.1,1.3S11.1,19,12,19c0.9,0,1.8-0.2,2.7-0.6s1.6-0.9,2.2-1.5s1.1-1.4,1.5-2.2S19,12.9,19,12s-0.2-1.8-0.6-2.7
		s-0.9-1.6-1.5-2.2s-1.4-1.1-2.2-1.5S12.9,5,12,5c-1.8,0-3.3,0.6-4.6,1.7l2.9,2.9c0.1,0.1,0.2,0.3,0.1,0.6c-0.1,0.2-0.2,0.3-0.5,0.3
		H0.5c-0.1,0-0.3,0-0.4-0.1S0,10.1,0,10V0.5C0,0.3,0.1,0.1,0.3,0C0.5,0,0.7,0,0.9,0.1l3.7,3.8C5.6,3,6.7,2.3,8,1.8S10.6,1,12,1
		c1.5,0,2.9,0.3,4.3,0.9s2.5,1.4,3.5,2.3S21.5,6.4,22.1,7.7z"/>
</g>
</svg>
        Reset
      </a>
    </div>
    <p>The navigation is locked until the user activates it by agreeing to a condition or clicking an explicit 'unlock' button. This could be used to force a user to agree to terms before entering a system/site or encouraging somebody to read important text before continuing. That kind of shit.</p>
  </div>
</div>
            
          
!
            
              @import: 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800';

@lightBG: #f7f7f7;
@grey: #efefef;
@blue: #6883a4;
@seaGreen: #699ca4;
@seaGreenLight: #8fd8e3;
@green: #69a478;
@greenLight: #98edad;
@gold: #a1a469;
@goldLight: #e8ed8c;
@rust: #a47769;
@rustLight: #e5a591;

@duration: .5s;
@unit: 100px;

body {
  background: @lightBG;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}


// navigation
div.nav {
  background: #fff;
  min-height: 80vh;
  padding: 10vh @unit;
  width: @unit;
}

div.dot {
  height: @unit;
  margin-bottom: 50px;
  width: @unit;
}

div.dot.seaGreen {
   div.btm div.flap div.flapFront {
       background: @seaGreen;
       svg {
         fill: @seaGreenLight;
       }
   }
  &.dropFlap {
    div.top {
       background: @seaGreen;
       svg {
         fill: @seaGreenLight;
       }
    }
  }
}

div.dot.green {
   div.btm div.flap div.flapFront {
       background: @green;
       svg {
         fill: @greenLight;
       }
   }
  &.dropFlap {
    div.top {
       background: @green;
       svg {
         fill: @greenLight;
       }
    }
  }
}

div.dot.gold {
   div.btm div.flap div.flapFront {
       background: @gold;
       svg {
         fill: @goldLight;
       }
   }
  &.dropFlap {
    div.top {
       background: @gold;
       svg {
         fill: @goldLight;
       }
    }
  }
}

div.dot.rust {
   div.btm div.flap div.flapFront {
       background: @rust;
       svg {
         fill: @rustLight;
       }
   }
  &.dropFlap {
    div.top {
       background: @rust;
       svg {
         fill: @rustLight;
       }
    }
  }
}

div.top div.pushDown svg {
  top: 25px !important;
}
div.btm div.pushDown svg {
  bottom: 25px !important;
}

div.top {
  background: darken(@grey, 10);
  border-radius: @unit @unit 0 0;
  height: 50%;
  width: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  svg {
    display: block;
    left: 50%;
    position: absolute;
    top: 20px;
    height: 50px;
    transform: translateX(-50%);
  }
  &::before {
    background: rgba(0,0,0,.05);
    bottom: 0;
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    z-index: 100;
  }
}
div.btm {
  background: @grey;
  border-radius: 0 0 @unit @unit;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
  height: 50%;
  width: 100%;
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  &::before {
    background: rgba(255,255,255,.05);
    top: 0;
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    z-index: 100;
  }
  div.flap {
    bottom: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    svg {
      display: block;
      left: 50%;
      position: absolute;
      bottom: 60%;
      height: 100%;
      transform: translateX(-50%);
    }
    div.flapFront {
      background: @blue;
      bottom: 0;
      transform: rotateX(180deg);
      svg {
        bottom: 30px;
        height: 50px;
      }
    }
  }
}


div.flap {
  height: 100%;
  overflow: hidden;
  position: relative;
  div.flapFront {
    background: @grey;
    backface-visibility: hidden;
    border-radius: @unit;
    overflow: hidden;
    &::before {
        background: rgba(0,0,0,0);
        content: "";
        display: block;
        height: 100%;
        width: 100%;
    }
  }
}


div.flapFront {
  height: @unit;
  position: absolute;
  width: @unit;
  transition: all @duration ease-in;
}




div.dot.dropFlap {
  div.top {
    background: @blue;
    div.flapFront {
      animation: dropTop @duration forwards ease-in;
      &::before {
        animation: flapDarken @duration forwards ease-in;
      }
    }
  }
  div.btm {
    div.flapFront {
      animation: dropBtm @duration forwards ease-in;
      &::before {
        animation: flapLighten @duration forwards ease-in;
      }
    }
  }
}

@keyframes dropTop {
  0%   {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}
@keyframes dropBtm {
  0%   {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes flapDarken {
  0%   {
    background: rgba(0,0,0,0);
  }
  100% {
    background: rgba(0,0,0,0.15);
  }
}

@keyframes flapLighten {
  0%, 50%   {
    background: rgba(255,255,255,.5);
  }
  100% {
    background: rgba(255,255,255,0);
  }
}


// content
div.content {
  padding-top: 10vh;
  position: absolute;
  left: 400px;
  right: 0;
  top: 0;
  h1 {
    color: #333;
    letter-spacing: -0.05em;
    margin-top: 0;
    font-size: 60px;
  }
  p {
    color: #999;
    font-size: 24px;
    font-weight: 300;
    padding-right: 100px;
    margin-bottom: 4em;
    max-width: 30em;
  }
  div.toggleButton {
    border-radius: 8px;
    background: @green;
    box-shadow: 0 2px 0 rgba(0,0,0,.1);
    display: inline-block;
    height: 68px;
    overflow: hidden;
    transition: all .2s ease-in;
    a {
      color: #fff;
      display: block;
      font-family: arial;
      font-size: 18px;
      font-weight: 700;
      padding: 18px 34px 21px;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;
      width: 140px;
      transition: all .2s ease-in;
      svg {
        fill: @greenLight;
        margin-right: 10px;
        position: relative;
        top: 2px;
        width: 24px;
      }
    }
    a.reset {
      opacity: 0;
      svg {
        fill: @rustLight;
      }
    }
    &.showReset {
      background: @rust;
      a.flapit {
        margin-top: -68px;
        opacity: 0;
      }
      a.reset {
        opacity: 1;
      }
    }
  }
}


            
          
!
            
              $(document).ready(function(){
  $("a.flapit").click(function(){
    $('div.dot').each(function(i) {
    var $li = $(this);
    setTimeout(function() {
      $li.addClass('dropFlap');
      }, i*200); // delay 100 ms
    });
    $("div.toggleButton").addClass("showReset");
    return false;
  });
  $("a.reset").click(function(){
    $('div.dot').removeClass("dropFlap");
    $("div.toggleButton").removeClass("showReset");
  });
});
            
          
!
999px
Loading ..................

Console