A Pen by Jesse Couch.

2-Sided-Digital-Business-Card.markdown

2 Sided Digital Business Card

Seen a lot of these, and just wanted to do my take on one. Pssst...click the profile icon. The background image uses a CSS filter, so it's the same image that is behind the avatar. Managed to get rid of the white edges that come with this by offsetting the position and adding to the width.

A Pen by Jesse Couch on CodePen.

License.

index.html

<div id="wrapper">
  <div id="content">
    <div id="card">
      <div id="front">
        <div id="arrow"><i class="fa fa-arrow-left"></i></div>
        <div id="top-pic"></div>
        <div id="avatar"></div>
        <div id="info-box">
          <div class="info">
            <h1>Jesse Couch</h1>
            <h2>Digital Creative</h2>
          </div>
        </div>
        <div id="social-bar">
          <a href="https://www.facebook.com/designcouch" target="_blank">
            <i class="fa fa-facebook"></i>
          </a>
          <a href="https://www.twitter.com/designcouch" target="_blank">
          <i class="fa fa-twitter"></i>
          </a>
          <a href="https://www.dribbble.com/designcouch" target="_blank">
          <i class="fa fa-dribbble"></i>
          </a>
          <a href="https://www.codepen.io/designcouch/public">
          <i class="fa fa-codepen"></i>
          </a>
          
          <a href="javascript:void" class="more-info">
            <i class="fa fa-user"></i>
          </a>
        </div>
      </div>
      <div id="back">
        <div class="back-info">
          <p>My name is Jesse Couch, and I am an award winning, intensely creative, coffee-fueled front-end web designer and developer. My style and approach are very straight-forward — I obsess about keeping things as simple as humanly possible. That's it. If you like bells and whistles for the sake of bells and whistles, look elsewhere - but if you want to remain laser-focused on the goals for your new website, it's time time to talk.</p>
        </div>
        <div id="social-bar">
          <a href="https://www.facebook.com/designcouch" target="_blank">
            <i class="fa fa-facebook"></i>
          </a>
          <a href="https://www.twitter.com/designcouch" target="_blank">
          <i class="fa fa-twitter"></i>
          </a>
          <a href="https://www.dribbble.com/designcouch" target="_blank">
          <i class="fa fa-dribbble"></i>
          </a>
          <a href="https://www.codepen.io/designcouch/public">
          <i class="fa fa-codepen"></i>
          </a>
          <a href="javascript:void" class="more-info">
            <i class="fa fa-undo"></i>
          </a>
        </div>
      </div>
    </div>
    <div id="background">
      <div id="background-image"></div>
    </div>
  </div>
</div>

script.js

$(window).load(function(){
  $('#wrapper').addClass('loaded');
})

$('.more-info').click(function(){
  $("#card").toggleClass('flip');
});
$('#background').click(function(){
  $('#card').removeClass('flip');
})

style.scss

* {
  box-sizing:border-box;
  transition:.5s ease-in-out;
}

html,body {
  background-color:#220200;
  height:100%;
  overflow:hidden;
  font-family:helvetica neue,helvetica,arial,sans-serif;
  h1 {
    font-size:25px;
    font-weight:200;
    color:white;
    line-height:30px;
    margin-bottom:10px;
  }
  h2 {
    font-size:15px;
    color:#6b0500;
  }
}

#wrapper {
  opacity:0;
  display:table;
  height:100%;
  width:100%;
  &.loaded {
    opacity:1;
    transition:2.5s ease-in-out;
  }
  #content {
    display:table-cell;
    vertical-align:middle;
  }
}

#card {
  height:400px;
  width:300px;
  margin:0 auto;
  position:relative;
  z-index:1;
  perspective:600px;
  #front,#back {
    border-radius:10px;
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    box-shadow:0 0 10px rgba(0,0,0,.2);
  }
  #front {
    transform:rotateY(0deg);
    overflow:hidden;
    z-index:1;
    #arrow {
      position:absolute;
      height:50px;
      line-height:50px;
      font-size:30px;
      z-index:10;
      bottom:0;
      right:0;
      color:rgba(255,255,255,.5);
    }
    #top-pic {
      height:50%;
      width:100%;
      background-image:url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);
      background-size:cover;
    }
    #avatar {
      width:114px;
      height:114px;
      top:50%;
      left:50%;
      margin:-77px 0 0 -57px;
      border-radius:100%;
      box-shadow:0 0 0 3px rgba(255,255,255,.8),0 4px 5px rgba(107,5,0,.6),0 0 50px 50px rgba(255,255,255,.25);
      background-image:url(http://0.gravatar.com/avatar/fa4df8540bab3cb38f7dfa60c6e0522c?size=2000);
      background-size:contain;
      position:absolute;
      z-index:1;
    }
    #info-box {
      height:50%;
      width:100%;
      position:absolute;
      display:table;
      left:0;
      bottom:0;
      background:rgba(200,38,29,.7);
      padding:50px;
    }
    #social-bar {
      height:50px;
      width:100%;
      position:absolute;
      bottom:0;
      left:0;
      
      line-height:50px;
      font-size:18px;
      text-align:center;
      a {
        display:inline-block;
        color:#951009;
        text-decoration:none;
        padding:5px;
        line-height:18px;
        border-radius:5px;
        &:hover {
          color:#450300;
          background:rgba(255,255,255,.3);
          transition:.25s ease-in-out;
        }
      }
    }
  }
  #back {
    transform:rotateY(180deg);
    background-color:rgba(255,255,255,.6);
    display:table;
    z-index:2;
    font-size:13px;
    line-height:20px;
    padding:50px;
    .back-info {
      text-align:justify;
      text-justify: inter-word;
    }
    #social-bar {
      height:50px;
      width:100%;
      position:absolute;
      bottom:0;
      left:0;
      line-height:50px;
      font-size:18px;
      text-align:center;
      a {
        display:inline-block;
        line-height:18px;
        color:#951009;
        text-decoration:none;
        padding:5px;
        border-radius:5px;
        &:hover {
          color:#450300;
          background:rgba(223,74,66,.5);
          transition:.25s ease-in-out;
        }
      }
    }
  }
  .info {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;
  }
  &.flip #front {
    transform: rotateY(180deg);
  }
  &.flip #back {
    transform: rotateY(360deg);
  }
}

#background {
  position:fixed;
  background-color:black;
  top:0;
  left:0;
  height:100%;
  width:100%;
  #background-image {
    height:calc(100% + 60px);
    width:calc(100% + 60px);
    position:absolute;
    top:-30px;
    left:-30px;
    -webkit-filter:blur(10px);
 background-image:url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);
    background-size:cover;
  }
}