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">
  <div class="front">
    <img alt="Full Name" src="https://placehold.it/150x150">
    <h1>Full Name</h1>
    <h3>Hosne igitur laudas et hanc eorum, inquam, sententiam sequi censes</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Est enim effectrix multarum et magnarum voluptatum. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Non dolere, inquam, istud quam vim habeat postea videro.</p>
  </div>
  <div class="back">
<a 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 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 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 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 href="https://stackoverflow.com/users/131944/daniellmb" title="Ask Daniel a question on Stackoverflow" class="stackoverflow">
      <svg viewBox="0 0 100 118">
        <polygon points="84.072,107.351 84.072,75.8 94.588,75.8 94.588,117.869 0,117.869 0,75.8 10.516,75.8 10.516,107.351"/>
        <path d="M22.089,72.898l51.458,10.815l2.163-10.292L24.252,62.606L22.089,72.898z M28.897,48.259l47.666,22.199 l4.44-9.533L33.337,38.726L28.897,48.259z M42.088,24.874l40.405,33.65l6.73-8.081l-40.405-33.65L42.088,24.874z M68.171,0 l-8.438,6.276l31.381,42.191l8.438-6.276L68.171,0z M21.044,96.833l52.582,0V86.316l-52.582,0V96.833z"/>
      </svg>
    </a>
    <a 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 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 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, h1, h3, img, p, a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
html {
  font-size: 16px;
}

.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;
    }
  }
  .back {
    position: absolute;
    z-index: 1;
    top: -0.8rem;
    right: 5rem;
    width: 15.8rem;
    height: 9.51rem;
    padding: 0.3125rem;    
    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);
    transform: 
      rotate(-23deg) 
      rotateX(26deg) 
      rotateY(10deg) 
      rotateZ(33deg) 
      skewX(-10deg);
    box-shadow: -0.9375rem 3.75rem 3.75rem 0.125rem rgba(0,0,0,0.4);
    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 :)
      }
      &.stackoverflow {
        background-color: #f90;
        svg {
          width: 1.4rem;
        }
      }
      &.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);
  }
}
            
          
!
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