Profile

dabblet.css

/**
 * Profile
 */
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-30%);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

.animation {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.animation-delayed {
	animation-delay: 1s;
}

.fade-in {
	animation-name: fade-in;
}

/* Default Styles */
* { margin: 0; padding: 0;} 
body { background-color: #cf523e; font: 300 .875em/1 "Helvetica Neue", Arial, Helvetica, sans-serif; font-smoothing: antialiased}
a { border-bottom: 1px dotted;color: #F3D3CE; text-decoration: none;}
p {margin-bottom: 1em;}


.container {
	margin: 0 auto;
	padding-top: 5em;
}

.container > header {
	text-align: center;
}

.profile-box-group { 
  box-sizing: border-box; 
  margin: 1em auto;
  padding: 26px;
  width: 265px;
  height: 105px;    
  border: 1px solid #a93828;
  border-radius: 4px;
  background-color: white; 
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
}

	.profile-image {
		display: inline-block;
		margin-right: 1.714285714em;
		width: 52px; 
		height: 52px;
		border-radius: 2px;
	}
	
	.profile-box-content {
		display: inline-block;
		vertical-align: top;
	}
	
		.profile-box-content > h1 {
			margin-bottom: .857142857em;
			color: #313b40;
			font-size: 1em;
		}
		
		.profile-stats {
			list-style: none;
		}
		
			.profile-stats > li {
				display: inline-block;
				color: #a7adb1;
				font-size: .857142857em;
			}
			
				.profile-stats > li:first-child {
					margin-right: 1.166666667em;
					padding-right: 1.166666667em;
					border-right: 1px solid #c9cbcf;
					
				}
			
				.profile-stats > li > b { 
					display: block;
					margin-bottom: 2px; 
					color: #2d9ac5;
					font-size: 1.166666667em;
				}

footer {
	color: #E7A79D;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0,0,0,.1);
	font-size: .857142857em;
}
				

dabblet.html

<div class="container animation fade-in">

	<div class=profile-box-group>
	
		<img src=http://files.pxlpeak.com/profile-box/profile-image.png class=profile-image>
		
		<div class=profile-box-content>
			<h1>Robert van Klinken</h1>
			
			<ul class=profile-stats>
				<li> <b>267</b> following
				<li> <b>452</b> followers
			</ul>
		</div>
	</div>
	
	
	<footer class="animation animation-delayed fade-in">
		<p>developed by <a href=http://pxlpeak.com target=_blank>Pascal Gaertner</a> 
		and designed by <a href=http://rbbrt.me target=_blank>Robert van Klinken</a></p>
		<p><a href=http://dribbble.com/shots/700247-Profile target=_blank><em>View Orignial Source on dribbble</em></p>
	</footer>


</div>

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}