Rain

dabblet.css

/**
 * Rain
 */

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic|Open+Sans:300italic,400,300,800);
 
html {
	min-height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 12px;
	background-color: #f2f2f2;
	background: #fff;
	
}
.fbox {
	overflow: hidden;
}
#header {
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc;
	height: 42px;
}
#header h1 {
	margin: 0 0 0 0;
	line-height: 36px;
	font-weight: normal;
	text-indent: 2%;
}
#main {
	height: 80%;
	width: 100%;
	position: absolute;
	text-align: center;	
}
#body {
	text-align: center;
	position: absolute;
	width: 100%;
}
#body h2 {
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 10em;
	height: 100%;
	margin: 0;
	letter-spacing: -0.01em;
	border-bottom: 6px solid black;
	display: inline-block;
	line-height: 110px;
}
#body div {
	font-size: 2em;
	bottom: -34px;
	position: absolute;
	width: 100%;
}
#footer {
	height: 60px;
	width: 100%;
	position: fixed;
	bottom: 0em;
}
#footer .card {
	width: 25%;
	height: 100%;
	float: left;
	transition: all 1em;
}
#footer .inner {
	background: white;
	box-shadow: 1px 0 0 0 #ccc inset;
	height: 100%;
}
#footer h2 {
	margin: 0 0 0 1px;
	padding-top: 2px;
	font-size: 2em;
	color: #C72430;
	border-top: 6px solid #C72430;
	text-indent: 2%;
}
#footer .time {
	font-size: 1.2em;
	text-indent: 2%;
	margin-top: -6px;
}

.

dabblet.html

<div id="header">
	<h1>Will it rain in <strong>Amsterdam</strong> in the next two hours?</h1>
</div>
<div id="body">
<h2>No rain</h2>
<div>There will be no rain in <strong>Amsterdam</strong> for the next two hours.</div>
</div>
<div id="footer" class="fbox">
	<div class="card"><div class="inner"><h2>No rain</h2><div class="time">09:41-10:31</div></div></div>
	<div class="card"><div class="inner"><h2>No rain</h2><div class="time">10:31-11:21</div></div></div>
	<div class="card"><div class="inner"><h2>No rain</h2><div class="time">11:21-12:11</div></div></div>
	<div class="card"><div class="inner"><h2>No rain</h2><div class="time">12:11-13:01</div></div></div>
</div>

settings.json

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