<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Author Card</title>
	<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
	<script src="https://raw.github.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>	
</head>
<body>
	<div id="bg"></div>
		<div class="card">
			<div class="profile">
				<img src="https://f.cl.ly/items/0z1w0L092q070Q180K3p/36a9325cb67f11e18bb812313804a181_7.jpeg"><div class="border"></div>
			</div>
			<div class="name"><p><a href="#">Cole Townsend</a></p></div>
			<div class="numbers">
			<table id="stats">
				<tbody>
				<tr>
					<td>14</td>
					<td>ARTICLES</td>
				</tr>
				<tr>
					<td>171</td>
					<td>FOLLOWERS</td>
				</tr>
				</tbody>
			</table>
			<div class="divider"></div>
			</div>
			<a href="#" class="btn btn-follow">Follow</a>
		</div>
	
	<div id="credits">Designed by <a href="http://coletownsend.com" target="_blank">Cole Townsend</a>
	<p>
		<a href="https://twitter.com/CTRunsThis" class="twitter-follow-button" data-show-count="false">Follow @CTRunsThis</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	</p>
	</div>
</body>
</html>
body {
	width: 100vw;
	min-height: 100vh;
	color: #333333;
	background: #FCFBF3;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
}

a {
	text-decoration: none;
	color: #00936E;
}

a:hover {
	color: #006D59;
}

#bg {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-image: url('https://f.cl.ly/items/0t2e0B1W1x3c1U3V2q1Z/eggshell-noise.png');
	background-repeat:repeat;
	z-index: 10;
	opacity: 0.5;
}

.card {
	background: #ffffff;
	height: 300px;
	width: 200px;
	position: relative;
	top: 20vh;
	display: block;
	margin: 0 auto;
	border-radius: 3px;
	border: 1px solid #e9e9e9;
	box-shadow: 0 1px 4px 0px rgba(0,0,0,.05);
	font-weight: 700;
	z-index: 200;
}

.profile {
	z-index: 300;
	width: 100%;
	background: none;
	height: 150px;
}
	
.profile img {
	width: 90px;
  height: 90px;
  border-radius: 50%;
	border-right: 25px;
	top: 1.25em;
	position: relative;
	display: block;
	margin: 0 auto;
	z-index: 100;
	}

.border {
	width: 96px;
	height: 96px;
	border-radius: 49px;
	z-index: 99;
	background: #444;
	position: relative;
	display: block;
	top: -73px;
	margin: 0 auto;
}

/* Name */

.name {
	display: block;
	margin: 0 auto;
	text-align: center;
	position: relative;
	top:-12%;
	font-size: 1.1em;
}


/* Statistics */

.numbers {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	top: -6%;
}

#stats {
	color: #c1c1c1;
	height: auto;
	position: relative;
	width: 65%;
	top: -1.5em;
	text-align: left;
	display: block;
	margin: 0 auto;
	font-size: .9em;
}

.divider {
	position: relative;
	display: block;
	width: 30%;
	opacity: 0;
	bottom: 3rem;
	margin: 0 auto;
	height: 1px;
	z-index: 500;
	background: #c4c5c4;
	/* Bg 
	background: -moz-linear-gradient(left,  rgba(240,249,255,0.1) 0%, rgba(196,197,196,0.22) 15%, rgba(196,197,196,0.5) 50%, rgba(196,197,196,0.15) 85%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,0.1)), color-stop(15%,rgba(196,197,196,0.22)), color-stop(50%,rgba(196,197,196,0.5)), color-stop(85%,rgba(196,197,196,0.15)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(240,249,255,0.1) 0%,rgba(196,197,196,0.22) 15%,rgba(196,197,196,0.5) 50%,rgba(196,197,196,0.15) 85%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(240,249,255,0.1) 0%,rgba(196,197,196,0.22) 15%,rgba(196,197,196,0.5) 50%,rgba(196,197,196,0.15) 85%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(240,249,255,0.1) 0%,rgba(196,197,196,0.22) 15%,rgba(196,197,196,0.5) 50%,rgba(196,197,196,0.15) 85%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(240,249,255,0.1) 0%,rgba(196,197,196,0.22) 15%,rgba(196,197,196,0.5) 50%,rgba(196,197,196,0.15) 85%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1af0f9ff', endColorstr='#00ffffff',GradientType=1 ); */

}

#stats td {
	padding: 0.25rem .25em .35rem .5rem;
}

#stats td:first-child {
	font-size: 1.1rem;
	display: block;
	text-align: right;
	font-weight: 400;

}

#stats td:last-child {
	position: relative;
	font-size: .75rem;
	font-weight: 700;
	top: .1rem;
}


/* Follow Button */
.btn {
	text-align: center;
}

a.btn {
		color: #fffffa;
		text-decoration: none;
}

a.btn:hover {
	text-decoration: none;
}

a.btn-follow:active {
	border-bottom: none;
	border-top: 1px solid #006D59;
	background: #00896E;
}

.btn-follow {
	background: #00936E;
	height: 32px;
	width: 50%;
	display: block;
	margin: 0 auto;
	position: absolute;
	bottom: 1.25em;
	left: 25%;
	font-size: .8em;
	font-weight: 700;
	line-height: 34px;
	border-radius: 2px;
	border-bottom: 1px solid #006D59;
}


/* Coded and Designed by Cole Townsend */

#credits {
	font-size: 12px;
	color: #444444;
	display: block;
	text-align: center;
	position: absolute;
	z-index: 100;
	width: 100vw;
	bottom: 10vh;
}

#credits a {
	color: #444444;
}

#credits a:hover {
	border-bottom: 1px solid #444444;
}

#credits p {
	margin-top: 25px;
}
	

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js