vCard with fold-out links

index.html

<div class="vcard">
  <div class="bio">
    
    <img src="http://ianlunn.co.uk/wp-content/uploads/avatar.jpg" alt="Ian Lunn" />
    
    <h1>Ian Lunn</h1>
    <h2>Front End Developer</h2>
    
    <p>Ian uses the latest web technologies to build creative and effective websites. Creator of open-source projects <a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css</a>, <a href="http://sequencejs.com/" target="_blank">Sequence.js</a>, and author of <a href="http://css3foundations.com/" target="_blank">CSS3 Foundations</a>.</p>
    
  </div>
  <ul class="links">
    <li><a href="http://codepen.io/IanLunn/" target="_blank"><i class="fa fa-codepen"></i></a></li><li><a href="https://twitter.com/ianlunn" target="_blank"><i class="fa fa-twitter"></i></a></li><li><a href="https://github.com/IanLunn" target="_blank"><i class="fa fa-github"></i></a></li><li><a href="https://plus.google.com/+IanLunn" target="_blank"><i class="fa fa-google-plus"></i></a></li><li><a href="http://ianlunn.co.uk/" target="_blank"><i class="fa fa-folder-open"></i></a></li>
  </ul>
</div>

script.js

// Add touch support in place of :hover
if (Modernizr.touch === true) {
  var $vcard = document.querySelectorAll(".vcard")[0];

$vcard.addEventListener("click", function() {
  $vcard.classList.toggle("active");
});
}

style.scss

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: black url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/footer_lodyas.png");
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-touch .vcard:hover {
    transform: translateY(1.5em) translateZ(0);
  
  .bio {
    transform: translateY(-3em) translateZ(0);
  }
  
  .links {
    transform: rotateX(0deg);
    background: white;
  }
}

.vcard {
  position: relative;
  width: 100%;
  max-width: 280px;
  perspective: 800px;
  font-size: 24px;
  transition: transform .3s;
  transform: translateZ(0);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  
  > * {
    box-sizing: border-box;
  }
  
  &.active {
    transform: translateY(1.5em) translateZ(0);
    
    .bio {
      transform: translateY(-3em) translateZ(0);
    }
    
    .links {
      transform: rotateX(0deg);
      background: white;
    }
  }
  
  .bio {
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1em;
    padding-top: 2em;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background: white;
    border-top: #159FCD solid 4px;
    border-bottom: #ccc solid 2px;
    font-family: sans-serif;
    font-size: .625em;
    line-height: 160%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    transition-duration: .3s;
    transition-properties: transform;
    
    h1,
    h2,
    p {
      font-family: 'Lato', sans-serif;
    }
    
    h1,
    h2 {
      margin: 0;
      line-height: 140%;
      font-weight: 900;
    }
    
    h1 {
      font-size: 1.375em;
    }
    
    h2 {
      font-size: 1em;
    }
    
    img {
      display: block;
      width: 80px;
      margin: 0 auto;
      margin-bottom: .725em;
      border-radius: 50%;
    }
    
    a {
      text-decoration: none;
      color: #159FCD;
      transition: .3s color;
      
      &:hover {
        color: #27589A;
      }
    }
  }
  
  .links {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: black;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    transform-origin: 50% 0%;
    transform: rotateX(-90deg) translateZ(0);
    transition-duration: .3s;
    transition-properties: background transform;
  }
  
  li {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    list-style: none;
    text-align: center;
  }
  
  li a {
    display: block;
    width: 100%;
    height: 1em;
    padding: .5em 0;
    color: #222;
    transition-duration: .5s;
    transition-property: background;
    
    &:hover {
      background: #EEE;
    }
  }
}

vCard-with-fold-out-links.markdown

vCard with fold-out links

A vCard with fold-out links

Dark Sharp Edges background from Subtle Patterns: http://subtlepatterns.com/dark-sharp-edges/

A Pen by Ian Lunn on CodePen.

License.