Untitled

dabblet.css

html, body {
	height: 100%;
	width: 100%;
}
.content {
	background: yellow;
	height: 100%;
	width: 100%;
	display: table;
}

.centered {
	display: table-cell;
	vertical-align: middle;
	border: 1px solid;
}

.separator {
	position: relative;
	top: 5em;
	z-index: 1;
	height: 1em;
	background: black;
}

.profile {
	position: relative;
	border: 1em solid;
	width: 30em;
	margin: auto;
	z-index: 2;
	background: white;
	padding: 1em;
	overflow: hidden;
}

.profile .avatar {
	width: 10em;
	height: 10em;
	border: 0.7em solid;
	margin-bottom: 1em;
	margin-right: 1em;
	float: left;
}

.profile .links {
	list-style: none;
}
.profile .email {
	background: green;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	clear: both;
}

dabblet.html

<div class="content">
	<div class="centered">
			<div class="separator"></div>	
			<div class="profile">
				<div class="avatar"></div>
				<ul class="links">
					<li><a href="">Github</a></li>
					<li><a href="">Stackoverflow</a></li>
					<li><a href="">LinkedIn</a></li>
				</ul>
				<div class="email">leonty.belskiy@gmail.com</div>
			</div>
	</div>
</div>	
	

dabblet.js

// alert('Hello world!');

settings.json

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