Collecting quotes and experiences to form a timeline of volunteer experience.

dabblet.css

/**
 * Collecting quotes and experiences to form a timeline of volunteer experience. 
 * Spirtual ingredients included.
 */
html {
font-family: Tahoma,sans-serif;
background: #f06;
background: linear-gradient(45deg, #6100B0, #00FCCA);
color:white;
min-height: 100%;
width: intrinsic;		/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;	/* Firefox/Gecko */
min-width:200%;
}

body {
font-size:1.2em;
width:100%;
}

.point {
float:left;
background: rgba(0, 0, 0, 0.2);
width:30em;
margin:2em 2em;
padding:1em;
display:block;
} 

.point .date {
font-style:italic;
}

dabblet.html

<h1>Community Timeline</h1>
<div class="point">
	<h2>Experience 1</h2>
	<p>Loreum ipsom sdfw vljwoe swlekj</p>
	<span class="date">June 12th, 2012</span>
</div>
<div class="point">
	<p>Loreum ipsom sdfw vljwoe swlekj</p>
</div>
<div class="point">
	<p>Loreum ipsom sdfw vljwoe swlekj</p>
</div>
<div class="point">
	<p>Loreum ipsom sdfw vljwoe swlekj</p>
</div>
<div class="point">
	<h2>Experience 1</h2>
	<p>Loreum ipsom sdfw vljwoe swlekj</p>
	<span class="date">June 12th, 2012</span>
</div>

<script type="text/javascript" src="//use.typekit.net/tpt6xkv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

dabblet.js

// alert('Hello world!');

settings.json

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