<div class="flip-card">
	<div class="flip-card-inner">
		<div class="flip-card-front">
			<div class="flip-card-img">
				<img src="https://source.unsplash.com/mHmLGROu2rI/640x853" alt="Avatar Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Paige Spaniel</h2>
				<p class="title">CEO &amp; Founder</p>
			</div>
		</div>
		<div class="flip-card-back">
			<div class="flip-card-img">
				<img src="https://media.giphy.com/media/S2whkd4LyloiI/giphy.gif" alt="Gif Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Fun Fact About Paige</h2>
				<p>She loves learning new tricks.</p>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
				<a href="#"><i class="fab fa-twitter"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
			</div>
		</div>
	</div>
</div>

<div class="flip-card">
	<div class="flip-card-inner">
		<div class="flip-card-front">
			<div class="flip-card-img">
				<img src="https://source.unsplash.com/ccp20jlgtWU/640x853" alt="Avatar Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Brandy Yorkshire</h2>
				<p class="title">Senior Developer</p>
			</div>
		</div>
		<div class="flip-card-back">
			<div class="flip-card-img">
				<img src="https://media.giphy.com/media/kBZrg2OcrcOFJikffT/giphy.gif" alt="Gif Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Fun Fact About Brandy</h2>
				<p>She is not afraid to take on the big dogs.</p>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
				<a href="#"><i class="fab fa-twitter"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
			</div>
		</div>
	</div>
</div>

<div class="flip-card">
	<div class="flip-card-inner">
		<div class="flip-card-front">
			<div class="flip-card-img">
				<img src="https://source.unsplash.com/xbVTW7sykVw/640x817" alt="Avatar Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Ron Dog</h2>
				<p class="title">Sales Director</p>
			</div>
		</div>
		<div class="flip-card-back">
			<div class="flip-card-img">
				<img src="https://media.giphy.com/media/26gsuJYcHXm0oARQQ/giphy.gif" alt="Avatar Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Fun Fact About Ron</h2>
				<p>We love this guy!</p>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
				<a href="#"><i class="fab fa-twitter"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
			</div>
		</div>
	</div>
</div>

<div class="flip-card">
	<div class="flip-card-inner">
		<div class="flip-card-front">
			<div class="flip-card-img">
				<img src="https://source.unsplash.com/6jzkzv5VhyE/640x960" alt="Avatar Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Leslie Lassie</h2>
				<p class="title">Senior Designer</p>
<!--				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis. Consequat id porta nibh venenatis cras sed felis eget. Tortor at auctor urna nunc id cursus metus. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis.</p> -->
			</div>
		</div>
		<div class="flip-card-back">
			<div class="flip-card-img">
				<img src="https://media.giphy.com/media/l2JI2Y115aAIOIkyQ/giphy.gif" alt="GIF Placeholder" />
			</div>
			<div class="flip-card-text">
				<h2>Fun Fact About Leslie</h2>
				<p>She can tell you when Timmy falls down the well.</p>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
				<a href="#"><i class="fab fa-twitter"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
			</div>
		</div>
	</div>
</div>

body {
  margin: 30px auto;
  line-height: 1;
  font-family: 'Baloo Tamma 2', cursive;
  background-color: #eeeeee;
}

.flip-card {
  float: left;
  margin: 30px;
	width: 100%;
  max-width: 300px;
  height: 480px;
  perspective: 1000px;
	background-color: 
		transparent;
}

.flip-card-img {
	height: 300px;
	overflow: hidden;
	background-color: gray;
}

.flip-card img {
	width: 100%;
}

.flip-card-text {
	padding: 10px;
}

.flip-card h2 {
	font-weight: 600;
	font-size: 1.8em;
}

.flip-card p.title {
  color: grey;
  font-size: 1.5em;
}

.flip-card p {
	font-size: 1em;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: 
		preserve-3d;
  box-shadow: 
		0 4px 8px 0 
		rgba(0,0,0,0.2);
}

.flip-card:hover 
.flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front a, 
.flip-card-back a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

.flip-card-front a:hover,
.flip-card-back a:hover {
  color: hotpink;
}

.flip-card-front, 
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility:
		hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
	border: 
		5px solid lightgray;
	background-color: white;
}

.flip-card-back {
	color: black;
	border: 5px solid teal;
  transform: rotateY(180deg);
	background-color: #eeeeee;
}

.flip-card-back i {
	padding: 15px;
}