<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%;
transform: translate(-50%,-50%);
perspective: 1000;
}
.business-card:hover .front {
transform: rotateY(180deg);
}
.business-card:hover .back {
transform: rotateY(0deg);
}
.front, .back {
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;
transition: ease .5s;
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;
transform: rotateY(-180deg);
transition: ease .5s;
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;
}
This Pen doesn't use any external JavaScript resources.