<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.