<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<title>Profile Card</title>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400">

</head>
<body>

	<div class="profile-card">

		<img src="http://lorempixum.com/160/160/people" alt="">

		<h1>Jon Doe</h1>
		<h2>Web Designer</h2>

		<a href="#" class="btn">View Portfolio</a>

		<ul class="social">
			<li><a href="#"><span class="fa fa-twitter"></span></a></li>
			<li><a href="#"><span class="fa fa-dribbble"></a></li>
			<li><a href="#"><span class="fa fa-linkedin"></a></li>
		</ul>

	</div> <!-- end profile-card -->

</body>
</html>
/*---------- GENERAL ----------*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	background: url('https://i.imgur.com/ol33ASV.jpg') no-repeat 50% 50%; // Source http://unsplash.com/post/93258562329/download-by-roland-batke-mutschler
	-webkit-background-size: cover;
	background-size: cover;
	font: 400 1em/1.5em 'Raleway', sans-serif;
	margin: 0;
}

a {
	text-decoration: none;
}

/*---------- UTILITIES ----------*/

.clear {
	*zoom: 1;

	&:before,
	&:after {
		content: ' ';
		display: table;
	}

	&:after {
		clear: both;
	}

}

.list-unstyled {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*---------- PROFILE_CARD ----------*/

.profile-card {
	background-color: #fff;
	bottom: 0;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
	box-shadow: 0 0 3px rgba(0, 0, 0, .2);
	color: #555;
	height: 39em;
	left: 0;
	margin: auto;
	max-width: 32em;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;

	a {
		color: #555;
	}

	img {
		border: 3px solid #ddd;
		border-radius: 50%;
		background-clip: padding-box;
		margin: 5em 0;
	}

	h1 {
		color: #000;
		font-size: 2em;
		line-height: 1.2em;
		margin: 0;
		text-transform: uppercase;
	}

	h2 {
		font-size: 1.25em;
		line-height: 1.2em;
		margin: 0 0 4em 0;
	}

	.btn {
		border: 1px solid #ddd;
		display: block;
		margin: 0 auto 2em auto;
		padding: .5em 0;
		text-transform: uppercase;
		width: 90%;
	}

	.social {
		@extend .clear;
		@extend .list-unstyled;
		border-top: 1px solid #eee;
		font-size: 1.5em;
		text-align: center;

		li {
			float: left;
			width: (100% / 3);
		}

		a {
			display: block;
			padding: 1em 0;
		}

		.fa-twitter {

			&:hover {
				color: #55acee;
			}
		}

		.fa-dribbble {

			&:hover {
				color: #ea4c89;
			}
		}

		.fa-linkedin {

			&:hover {
				color: #0976b4;
			}

		}

	}

}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.