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.

            
              <div class="cards" itemscope itemtype="http://schema.org/Person">
  <div class="front">
    <img src="https://daniellamb.com/img/me/daniel-lamb-150x150.jpg">
    <h1>
      <a href="https://daniellamb.com/about" title="Moar about Daniel Lamb">
        <span itemprop="name">Daniel Lamb</span>
      </a>
    </h1>
    <h3>
      <span itemprop="jobTitle">Sr. Front-End Engineer; Technical Architect; Entrepreneur & Author</span>
    </h3>
    <p itemprop="description">I am a senior software development professional and author in
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">Seattle</span>,
      <span itemprop="addressRegion">WA</span></span>. I enjoy sharing the knowledge I've gained specializing in large-scale architecture and front-end web development. My work over the last 16 years has enabled hundreds-of-millions to engage and interact
      during billions of visits.</p>
    <nav role="navigation">
      <a href="https://daniellamb.com/blog">blog</a>;
      <a href="https://daniellamb.com/experiments" itemprop="email">experiments</a>;
      <a href="mailto:hello@daniellamb.com" itemprop="email">hello@daniellamb.com</a>
    </nav>
    </p>
  </div>
  <div class="back">
    <a rel="me" itemprop="url" href="https://twitter.com/daniellmb" title="Follow Daniel on Twitter" class="twitter">
      <svg viewBox="0 0 430.117 430.117">
        <path d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876 c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404 c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067 c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769 C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192 c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178 c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947 c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828 c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39 C414.973,206.142,393.023,203.486,381.384,198.639z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://linkedin.com/in/daniellamb" title="Connect with Daniel on Linkedin" class="linkedin">
      <svg viewBox="0 0 430.117 430.117">
        <path d="M430.117,261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707 c-25.473,0-40.632,17.142-47.301,33.724c-2.432,5.928-3.058,14.179-3.058,22.477V420.56h-92.219c0,0,1.242-251.285,0-277.32h92.21 v39.309c-0.187,0.294-0.43,0.611-0.606,0.896h0.606v-0.896c12.251-18.869,34.13-45.824,83.102-45.824 C384.633,136.724,430.117,176.361,430.117,261.543z M52.183,9.558C20.635,9.558,0,30.251,0,57.463 c0,26.619,20.038,47.94,50.959,47.94h0.616c32.159,0,52.159-21.317,52.159-47.94C103.128,30.251,83.734,9.558,52.183,9.558z M5.477,420.56h92.184v-277.32H5.477V420.56z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://plus.google.com/+DanielLamb?rel=me" title="Circle Daniel on Google+" class="googleplus">
      <svg viewBox="0 0 491.858 491.858">
  			<path d="M377.472,224.957H201.319v58.718H308.79c-16.032,51.048-63.714,88.077-120.055,88.077 c-69.492,0-125.823-56.335-125.823-125.824c0-69.492,56.333-125.823,125.823-125.823c34.994,0,66.645,14.289,89.452,37.346 l42.622-46.328c-34.04-33.355-80.65-53.929-132.074-53.929C84.5,57.193,0,141.693,0,245.928s84.5,188.737,188.736,188.737 c91.307,0,171.248-64.844,188.737-150.989v-58.718L377.472,224.957L377.472,224.957z" />
  			<polygon points="491.858,224.857 455.827,224.857 455.827,188.826 424.941,188.826 424.941,224.857 388.91,224.857 388.91,255.74 424.941,255.74 424.941,291.772 455.827,291.772 455.827,255.74 491.858,255.74"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://github.com/daniellmb" title="Follow Daniel on GitHub" class="github">
      <svg viewBox="0 0 438.549 438.549">
      	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"/>
      </svg>
    </a>
          <a rel="me" itemprop="url" href="https://www.snapchat.com/add/dlambda" title="Friend Daniel on Snapchat" class="snapchat">
        <svg viewBox="5.715 10.5 381.828 358.772"><path d="M199 366.772a60.64 60.64 0 0 1-2.86-.076 22.09 22.09 0 0 1-1.888.076c-22.436 0-37.438-10.607-50.678-19.974-9.488-6.702-18.438-13.03-28.922-14.774-5.148-.854-10.27-1.287-15.22-1.287-8.917 0-15.964 1.383-21.108 2.39-3.166.616-5.896 1.147-8.007 1.147-2.21 0-4.896-.49-6.014-4.312-.888-3.014-1.523-5.934-2.138-8.746-1.535-7.026-2.65-11.315-5.28-11.723-28.14-4.342-44.768-10.738-48.08-18.484a7.182 7.182 0 0 1-.584-2.446 4.517 4.517 0 0 1 3.78-4.71c22.35-3.682 42.22-15.493 59.065-35.12 13.05-15.195 19.457-29.713 20.145-31.315.03-.07.064-.148.1-.218 3.247-6.588 3.893-12.28 1.926-16.916-3.626-8.55-15.635-12.36-23.58-14.882-1.976-.625-3.845-1.217-5.334-1.81-7.04-2.78-18.624-8.66-17.08-16.77 1.123-5.917 8.95-10.037 15.27-10.037 1.758 0 3.313.308 4.624.922 7.146 3.35 13.574 5.045 19.104 5.045 6.876 0 10.197-2.62 11-3.363-.197-3.668-.44-7.545-.674-11.213l-.005-.05c-1.613-25.674-3.626-57.626 4.547-75.95 24.463-54.846 76.34-59.11 91.65-59.11.408 0 6.674-.063 6.674-.063.283-.005.59-.01.908-.01 15.355 0 67.34 4.27 91.816 59.15 8.174 18.336 6.158 50.315 4.54 76.017l-.077 1.23c-.223 3.49-.426 6.793-.6 9.994.756.696 3.795 3.096 9.98 3.34 5.27-.2 11.327-1.89 17.997-5.015 2.06-.97 4.344-1.17 5.895-1.17 2.343 0 4.726.456 6.712 1.285l.11.04c5.66 2.01 9.366 6.025 9.446 10.244.07 3.932-2.852 9.81-17.225 15.484-1.47.583-3.35 1.18-5.334 1.808-7.95 2.523-19.95 6.332-23.577 14.878-1.973 4.636-1.324 10.326 1.924 16.912.037.07.066.146.102.22 1 2.346 25.204 57.536 79.21 66.434a4.525 4.525 0 0 1 3.777 4.71 7.28 7.28 0 0 1-.598 2.466c-3.29 7.703-19.917 14.09-48.065 18.438-2.643.408-3.756 4.68-5.277 11.668-.63 2.888-1.27 5.718-2.146 8.69-.82 2.798-2.64 4.165-5.568 4.165h-.44c-1.905 0-4.605-.347-8.01-1.013-5.948-1.158-12.622-2.236-21.108-2.236-4.947 0-10.068.435-15.225 1.288-10.472 1.744-19.42 8.062-28.892 14.758-13.264 9.378-28.272 19.986-50.708 19.986"/></svg>
      </a>
    <a rel="me" itemprop="url" href="https://www.youtube.com/c/DanielLamb" title="Watch Daniel on Youtube" class="youtube">
      <svg viewBox="0 0 90 90">
        <path d="M90,26.958C90,19.525,83.979,13.5,76.55,13.5h-63.1C6.021,13.5,0,19.525,0,26.958v36.084 C0,70.475,6.021,76.5,13.45,76.5h63.1C83.979,76.5,90,70.475,90,63.042V26.958z M36,60.225V26.33l25.702,16.947L36,60.225z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://leanpub.com/u/daniellamb" title="Read Daniel's books on Leanpub" class="leanpub">
      <svg viewBox="10.72 118.2 196.854 134.425">
        <path fill="#231F20" d="M192.721,130.325c-6.606-3.717-24.019-12.125-46.354-12.125c-20.055,0-31.47,6.165-37.22,10.125 c-5.75-3.959-17.165-10.125-37.22-10.125c-22.335,0-39.747,8.407-46.354,12.125l-14.852,122.3h0.443 c8.396,0,16.663-1.936,24.257-5.519c8.465-3.994,21.811-8.693,37.748-8.693c19.387,0,30.421,8.654,35.979,14.212 c5.558-5.558,16.593-14.212,35.979-14.212c15.937,0,29.282,4.699,37.748,8.693c7.594,3.583,15.859,5.519,24.257,5.519h0.442 L192.721,130.325z M182.432,232.831c-7.862-3.234-15.796-5.446-23.58-6.574c-4.573-0.662-9.192-0.998-13.727-0.998 c-12.892,0-24.54,3.214-34.622,9.555l-1.357,0.844l-1.35-0.84c-10.088-6.344-21.737-9.559-34.629-9.559 c-4.534,0-9.152,0.336-13.725,0.998c-7.785,1.127-15.719,3.339-23.581,6.574l-9.994,4.111L37.79,138.83l0.883-0.39 c10.05-4.441,22.945-7.093,34.495-7.093c14.306,0,26.401,4.556,35.979,13.546c9.578-8.991,21.673-13.546,35.979-13.546 c11.55,0,24.445,2.652,34.495,7.093l0.883,0.39l11.922,98.112L182.432,232.831z M148.927,221.94 c-1.271-0.05-2.539-0.077-3.802-0.077c-13.353,0-25.457,3.297-35.979,9.795c-10.527-6.5-22.629-9.795-35.979-9.795 c-4.697,0-9.478,0.348-14.212,1.034c-8.061,1.167-16.266,3.453-24.385,6.793l-4.632,1.905l10.989-90.431 c9.505-4.03,21.475-6.422,32.24-6.422c13.977,0,25.678,4.614,34.778,13.715l1.201,1.201l1.2-1.201 c8.768-8.768,19.955-13.358,33.26-13.684L148.927,221.94z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://facebook.com/DanielLambAuthor" title="Friend Daniel on Facebook" class="facebook">
      <svg viewBox="0 0 430.113 430.114">
        <path d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805 c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354 c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"/>
      </svg>
    </a>
    <h5>Find, Follow, & Friend Me Online</h5>
  </div>
  <div class="stack"></div>
</div>
            
          
!
            
              html, body, div, span, h1, h3, p, a, img, nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
/*! Copyright 2016 Daniel Lamb (http://daniellmb.com) MIT */
.cards {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -9.44rem 0 0 -15.4rem;
  perspective: 18.88rem;
  width: 30.81rem;
  max-width: 100%;
  height: 18.88rem;
  text-rendering: optimizeLegibility;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  .front {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: 20.19rem;
    height: 12.44rem;
    padding: 0.4375rem 0.4375rem 0 0.4375rem;
    background-color: rgba(234,234,229,1);
    border-left: 0.125rem solid rgba(208,208,208,1);
    border-bottom: 0.125rem solid rgba(180,180,180,1);
    box-shadow: -5.688rem -1.125rem 6.25rem -2.875rem rgba(0,0,0,0.6);
    img {
      float: left;
      margin-right: 0.4375rem;
      border-radius: 50%;
      border: solid 0.125rem #fff;
      box-shadow: 0 0 0.0625rem #000;
      width: 4.688rem;
      height: 4.688rem;
      background-color: #7D7D7D;
    }
    h1 {
      font-size: 1.875rem;
      margin: 0 0 0.4375rem 0;
    }
    h3 {
      font-size: 0.875rem;
      font-weight: 700;
      margin: 0;
      color: #515151;
    }
    p {
      clear: left;
      margin: 1.25rem 0 0.75rem 0;
      padding: 0;
      font-size: 0.8125rem;
      color: #313131;
      font-weight: 100;
    }
    nav {
      text-align: center;
    }
  }
  .back {
    position: absolute;
    z-index: 2;
    top: -0.8rem;
    right: 5rem;
    width: 15.8rem;
    height: 9.51rem;
    padding: 0.3125rem;
    transform: 
      rotate(-23deg) 
      rotateX(26deg) 
      rotateY(10deg) 
      rotateZ(33deg) 
      skewX(-10deg) 
      // next 2 are to fix a webkit bug :( see https://goo.gl/iPsqsJ
      scale(1.435) 
      translate3d(-1rem,-4.063rem,-6.25rem);
    background-color: rgba(234,234,229,1);
    border-left: 0.125rem solid rgba(208,208,208,1);
    border-bottom: 0.125rem solid rgba(180,180,180,1);
    border-right: 0.0625rem solid rgba(208,208,208,0.5);
    box-shadow: -0.9375rem 3.75rem 3.75rem 0.125rem rgba(0,0,0,0.4);
    transition: top 0s, transform 0.2s, z-index 0.2s;
    &:hover {
      top: 2.5rem;
      z-index: 4;
      transform: scale(1.3);
      transition: top 0.4s, transform 0.2s, z-index 0.15s;
    }
    a {
      display: inline-block;
      border-radius: 50%;
      width: 3.125rem;
      height: 3.125rem;
      text-align: center;
      margin: 0.25rem;
      overflow: hidden;
      background-color: #000;
      svg {
        margin-top: 0.54rem;
        height: 2rem;
        path, polygon {
          fill: #fff;
        }
      }
      &.twitter {
        background-color: #7FAADD;
        svg {
          //width: 1.7rem;
        }
      }
      &.linkedin {
        background-color: #0077b5;
        svg {
          width: 1.65rem;
        }
      }
      &.googleplus {
        background-color: #d34836;
      }
      &.github {
        // defaults work :)
      }
      &.snapchat {
        background-color: #FFFC00;
        svg {
          width: 2rem;
        }
        path {
          stroke: #000;
          stroke-width: 5;
          stroke-miterlimit: 10;
        }
      }
      &.youtube {        
        background-color: #b31217;
        svg {
          width: 1.7rem;
        }
      }
      &.leanpub {
        svg {
          width: 2em;
        }
      }
      &.facebook {
        background-color: #3b5998;
      }
    }
    h5 {
      margin: 0.25rem 0.5rem;
      font-weight: 100;
      font-size: 1rem;
    }
  }
  .stack {
    position: absolute;
    z-index: 2;
    height: 3.75rem;
    width: 3.75rem;
    bottom: 7.9em;
    right: 19.9rem;
    background: rgba(234,234,229,1) repeating-linear-gradient(180deg, rgba(234,234,229,1), rgba(0,0,0,0.35) 2%, rgba(0,0,0,.2) 5%);
    transform: rotate(10deg) skew(20deg);
  }
}
a {
  color: #268bd2;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
html { font-size: 16px; }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  html { font-size: 14px; }
}
            
          
!
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