<div class="business-card">
  <div class="front">
    <div class="overlay"></div>
    <div class="logo">
      <span class="char1">J</span>
      <span class="char2">D</span>
      <span class="char3">O</span>
    </div>
  </div>
  <div class="back">
    <div class="title">Jonathan Ostrander</div>
    <div class="container">
      <ul class="jobs">
        <li>Nanoscale Engineer</li>
        <li>Web Developer</li>
        <li>Blogger</li>
      </ul>
      <div class="contact">
        <div class="top row">
          <div class="phone"><div class="con-text"><a href="tel:5166402963"><i class="fa fa-phone"></i> <br/> (516) 640-2963</a></div></div>
          <div class="email"><div class="con-text"><a href="mailto:jonathanost@gmail.com"> <i class="fa fa-envelope"></i> <br/> jonathanost@gmail.com</a></div></div>
        </div>
        <div class="bottom row">
          <div class="website"><div class="con-text"><a href="http://jonost.me"><i class="fa fa-home"></i><br />jonost.me</a></div></div>
          <div class="github"><div class="con-text"><a href="https://github.com/OstrichProjects/"><i class="fa fa-github-alt"></i><br />OstrichProjects</a></div></div>
        </div>
      </div>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://fonts.googleapis.com/css?family=Lato);

* {
  margin: 0;
  cursor: default;
}

body {
  background: url(https://subtlepatterns.com/patterns/grey_wash_wall.png);
}

.business-card {
  height: 260px;
  width: 427px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  perspective: 1000;
}

.business-card:hover .front {
  -webkit-transform: rotateY(180deg); 
}

.business-card:hover .back {
  -webkit-transform: rotateY(0deg);
}

.front, .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  height: 260px;
  width: 427px;
  z-index: 2;
  background-color: black;
  background-image: url(https://i.imgur.com/VAzi3EA.png);
  background-position: 65% center;
  -webkit-transition: ease .5s;
  -o-transition: ease .5s;
  transition: ease .5s;
  transform-style: preserve-3d;
}

.overlay {
  height: 260px;
  width: 427px;
  position: fixed;
  background-color: black;
  opacity: 0.6;
}

.logo {
  position: relative;
  font-family: "Roboto", sans-serif;
  color: white;
  font-size: 150px;
  text-align: center;
  left: 40px;
  top: -10px;
}

.logo > span {
  position: relative;
}

.char1 {
  top: 70px;
  left: 10px;
}

.char2 {
  left: -59px;
  z-index: 30;
}

.char3 {
  left: -117px;
}

.back {
  height: 260px;
  width: 427px;
  position: relative;
  top: -260px;
  background-color: black;
  -webkit-transform: rotateY(-180deg);
  -webkit-transition: ease .5s;
  -o-transition: ease .5s;
  transition: ease .5s;
  transform-style: preserve-3d;
  z-index: 1;
  font-family: "Lato";
  color: white;
  text-align: center;
}

.title {
  height: 50px;
  line-height: 50px;
  font-size: 40px;
}

.container {
  height: 210px;
  width: 427px;
}

.jobs {
  list-style-type: none;
  margin: 0;
  height: 30px;
  line-height: 30px;
  padding: 5px 0;
  font-size: 17px;
}

.jobs > li {
  display: inline;
}

.jobs > li:after {
  content: " | ";
}

.jobs > li:last-child:after {
  content: ""
}

.contact {
  margin: 0 auto;
  height: 165px;
  width: 95%;
}

.row {
  height: 50%;
  width: 100%;
}

.row > div {
  height: 100%;
  width: 201px;
  display: block;
  float: left;
}

i {
  font-size: 30px;
}

.con-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.top {
  border-bottom: 1px solid white;
}

.phone, .website {
  border-right: 1px solid white;
}

.email, .github {
  border-left: 1px solid white;
}

a, a:hover, i, i:hover {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.