cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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="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
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