<div class="container">
  <div class="display">
    <div class="display-item">
      <span>Static</span>
      <div class="business-card">
        <div class="profile">
          <div class="profile-image"></div>
          <div class="profile-title">
            <h2>Walter Habadasher</h2>
            <h3>Simzo Entertainment</h3>
            <span>Laundry Massager</span>
          </div>
        </div>
        <div class="info">
          <div class="info-contact">
            <span><i class="fa fa-phone"></i> +45 58 58 58 58</span>
            <span><i class="fa fa-at"></i> whab@simzo.com</span>
            <span><i class="fa fa-facebook"></i> <a href="#">Walter Habadasher</a></span>
          </div>
          <div class="info-bio">
            <p>Nulla facilisi. Morbi in mauris ipsum. Etiam ut justo vel elit eleifend mattis eget eget arcu.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="display-item">
      <span>Flippable (Hover)</span>
      <div class="flippable-business-card">
        <div class="front">
          <div class="front-top">
            <div class="profile-image"></div>
          </div>
          <div class="front-bottom">            
            <div>
              <h2>Simone Lickbait</h2>
              <h3>Philistine Productions</h3>
              <span>Fascism Foiler</span>
            </div>
            <div>
              <div>
                <span><i class="fa fa-phone"></i> +45 58 58 58 58</span>
                <span><i class="fa fa-at"></i> slick@phil.com</span>
              </div>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="title">
            <h2>Simone Lickbait</h2>
            <span>Fascism Foiler</span>
          </div>
          <div class="bio">
            <p>Nulla facilisi. Morbi in mauris ipsum. Etiam ut justo vel elit eleifend mattis eget eget arcu. Integer tincidunt dolor pharetra sem iaculis egestas. Nam feugiat eleifend lacus hendrerit iaculis.</p>
          </div>
          <div class="social">
            <div class="sms">
              <div class="sm twitter">
                <i class="fa fa-twitter"></i>
              </div>
              <div class="sm facebook">
                <i class="fa fa-facebook"></i>
              </div>
              <div class="sm pinterest">
                <i class="fa fa-pinterest"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
$bg: darken(white, 10%);
$shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

img{
  max-width:100%;
}

body{
  background-color:$bg;
  display:flex;
  height:100vh;
  width:100vw;
  font-family:'Montserrat';
}

.container{
  width:1200px;
  max-width:100%;
  margin:auto;
}

.display{ 
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  .display-item{    
    flex-grow:1;
    padding:15px;
    >span{
      display:block;
      text-align:center;
      padding:15px;
      font-size:2em;
    }
  }
}

.business-card, .flippable-business-card{
  width:550px;
  height:300px;
  max-width:100%; 
  border-radius:4px;  
  margin:0 auto;
}

.business-card{
  display:flex;
  flex-direction:column;  
  background: linear-gradient(135deg, #fff 0%,#fff 50%,rgba(0,200,200,.4) 50.5%,rgba(0,200,200, .6) 100%); 
  color:rgba(0,0,0,.8); 
  box-shadow:$shadow;
  .profile{
    display:flex;
    flex-basis:150px;
    width:100%;
    border-bottom:1px solid rgba(0,0,0,.2);
    padding:15px;   
    .profile-image{
      background-image: url(https://images.unsplash.com/photo-1507120878965-54b2d3939100?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=57f3676a7820564424855d5e5c6b09e7);
      background-position:center;
      background-size:cover;
      width:120px;
      height:120px;
      border-radius:100%;     
    }
    .profile-title{
      padding-left:15px;
      display:flex;
      flex-direction:column;
      justify-content:space-around;
      h2{
        font-size:1.4em;
      }
    }
  }
  .info{
    display:flex;
    flex-grow:1;
    .info-contact{
      padding:15px;
      display:flex;
      flex-shrink:1;
      flex-direction:column;
      justify-content:space-around;
      a{
        color:rgba(0,0,0,.8);
      }
      i{
        font-size:1.2em;
        width:25px;
      }
    }
    .info-bio{
      display:flex;
      flex-grow:1;
      flex-basis:50%;
      flex-direction:column;
      justify-content:space-around;
      padding:15px;
      text-align:center;
    }
  }
}

.flippable-business-card{
  perspective:1000px;
  .front,.back{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;   
    transition:all .5s ease-in-out;
    transform-style: preserve-3d;
    background-color:white; 
    border-radius:4px;
    overflow:hidden;
  }
  .front{
    box-shadow:$shadow;
    .front-top{
      height:150px;
      background-image: url(https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=b0aa3fbba9c018e93499effa49dd8e83);
      background-size:cover;
      background-position:center;
      position:relative;
      h2, h3{
        display:block;
        padding:15px;
        text-align:center;
        color:white;
        text-shadow:1px 1px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.4);
      }
      .profile-image{
        position:absolute;
        height:120px;
        width:120px;
        bottom:0;
        left:50%;
        transform:translate(-50%) translateY(50%) rotate(45deg);        
        border-radius:4px;
        overflow:hidden;
        border:4px solid white;
        &:before{
          content:'';
          width:140%;
          height:140%;
          position:absolute;
          transform:rotate(-45deg);
          top:-20%;
          left:-20%;
          background-image: url(https://images.unsplash.com/photo-1498529605908-f357a9af7bf5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=4a38e7f0743e48e6ae32b23d36aa6ff7);
          background-size:cover;
          background-position:center;
        }
      }
    }
    .front-bottom{
      height:150px;
      display:flex;
      color:rgba(255,255,255,.8);
      background-color:darkslategray;
      >div{
        flex-grow:1;
        flex-basis:50%;
        padding-top:30px;       
        padding-bottom:15px;        
        &:first-child{
          display:flex;
          flex-direction:column;
          justify-content:space-around;
          padding-right:40px;
          padding-left:15px;
          h2{
            font-size:1.4em;
          }
          h3{
            
          }
        }
        &:last-child{
          display:flex;
          justify-content:space-around;
          padding-left:40px;
          padding-right:15px;
          a{
            color:rgba(0,0,0,.8);
          }
          i{
            font-size:1.2em;
            width:25px;
          }
          >div{
            display:flex;
            flex-direction:column;
            justify-content:space-around;
          }
        }
      }
    }
  }
  .back{
    transform:rotateX(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow:none;
    background-color:darkslategray;
    color:rgba(255,255,255,.8);   
    text-align:center;
    display:flex;
    flex-direction:column;  
    .title{
      height:75px;
      padding:15px;
    }
    .bio{
      background-color:rgba(255,255,255,.1);
      padding:15px;
      height:150px;
      display:flex;
      flex-direction:column;
      font-style:italic;
      justify-content:space-around;
    }
    .social{
      height:75px;
      padding:15px;
      display:flex;
      flex-direction:column;
      justify-content:space-around;
      .sms{
        display:flex;
        justify-content:space-around;
        font-size:2em;
      }
    }
  }
  &:hover{
    .back{
      transform:rotateX(360deg);
      box-shadow:$shadow;
    }
    .front{
      transform:rotateX(180deg);
      box-shadow:none;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.