cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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="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
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