The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 .avg-navigation {
 	margin:0;padding:0;list-style:none;
 	background:#171922;
 	display:block;
 	width:830px;
 	height:130px;
 	position:relative;
 	border-left:20px solid #282A39;
 	border-right:20px solid #282A39;
 }
 .avg-navigation li {
 	float:left;
 }
 .avg-navigation li a {
 	background:#282A39;
 	display:block;
 	width:165px;
 	height:130px;
 	margin-right:1px;
 	position:relative;
 }
 .avg-navigation li.selected a {
 	background:transparent;
 }
 .avg-navigation li a:after,
 .avg-navigation li a:before {
 	content:'';
 	display:block;
 	border:16px solid transparent;
 	border-left-color:#282A39;
 	border-left-width:18px;
 	position:absolute;
 	right:-34px;
 	top:48px;
 	z-index:1;
 }
 .avg-navigation li a:before {
 	right:-35px;
 	border-left-color:#171922;
 }
 .avg-navigation li.selected a:after {
 	border-left-color:#171922;
 }
 .avg-navigation li:nth-child(5) a:after,
 .avg-navigation li:nth-child(5) a:before {
 	display:none;
 }
 .avg-navigation li a:hover {
 	background:#383A49;
 }
 .avg-navigation li a:hover:after {
 	border-left-color:#383A49;
 }
 .avg-navigation li.selected a:hover {
 	background:transparent;
 }
 .avg-navigation li.selected a:hover:after {
 	border-left-color:#171922;
 }
 
 .avg-header {
 	margin:0;padding:0;
 	z-index:10;
 	width:870px;
 	height:120px;
 	background:#282A39;
 	position:relative;
 	line-height:120px;
 	color:#A5EB7F;
 	text-indent:75px;
 }
 .avg-navigation:after {
 	content:'';
 	display:block;
 	width:870px;
 	height:50px;
 	border-radius:100%;
 	background-color:#13141B;
	-webkit-box-shadow:  0px 20px 40px 0px #13141B;
    box-shadow:  0px 20px 40px 0px #13141B;
    position:absolute;
    top:-50px;
    left:-20px;
 }

.btn-next {
	display:block;
	width:60px;
	height:60px;
	border-radius:100%;
	background:#A6EA87;
	
	line-height:60px;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	
	position:relative;
	transition: background 0.4s,0.4s;
}
.btn-next:after {
	content:'';
	display:block;
	width:46px;
	height:46px;
	border-radius:100%;
	background:#FFFFFF;
	
	position:absolute;
	left:7px;
	top:7px;
}
.btn-next:before {
	content:'';
	display:block;
	border:12px solid transparent;
	border-left-width:13px;
	border-left-color:#A6EA87;
	
	position:absolute;
	left:26px;
	top:18px;
	z-index:1;
	transition: border-left-color,box-shadow 0.4s,0.4s;
}
.btn-next:hover {
	background:#AEF78D;
	transition: background 0.4s,0.4s;
	-webkit-box-shadow:  0px 0px 20px 0px #CDFAB9;
    box-shadow:  0px 0px 20px 0px #CDFAB9;
}
.btn-next:hover:before {
	border-left-color:#AEF78D;
	-webkit-box-shadow: inset 0px 0px 20px 0px #CDFAB9;
    box-shadow: inset 0px 0px 20px 0px #CDFAB9;
	transition: border-left-color,box-shadow 0.4s,0.4s;
}

dabblet.html

<h1 class="avg-header">Small Business IT Security Healthcheck</h1>
<ul class="avg-navigation">
	<li class="selected"><a href="#"></a></li>
	<li class=""><a href="#"></a></li>
	<li class=""><a href="#"></a></li>
	<li class=""><a href="#"></a></li>
	<li class=""><a href="#"></a></li>
</ul>

<a href="#" class="btn-next">Next</a>

dabblet.js

// alert('Hello world!');

settings.json

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