Untitled

dabblet.css

body {
    background-color: #34383e;
}

html,body {
    padding: 0;
    margin: 0;
}

body {
    background-color: #2E2E2E;
}
#header {
    height: 100%;
    width: 100%;
    margin-top: 0;
}

#Heading {
    font-family: Helvetica;
    font-size: 216px;
    margin-bottom:-140px;
    margin-top:20px;
}

#Subheading {
    font-family: Helvetica;
    font-size: 90px;
    color: #FFF;
    text-align: center;
}

#nav {
    background-color: #2d2d2d;
    height: 150px;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-top:-30px;
}

#blue {
    background-color: #86c9fe;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #4d7694;
}

#blue:hover {
    background-color: #39566E;
}

#purple {
    background-color: #9a85fe;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #584c94;
}

#purple:hover {
    background-color: #42396E;
}

#pink {
    background-color: #f385fe;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #894195;
}

#pink:hover {
    background-color: #68396E;
}

#red {
    background-color: #ff86b3;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #934d65;
}

#red:hover {
    background-color: #6E394D;
}

#orange {
    background-color: #ffb085;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #91674f;
}

#orange:hover {
    background-color: #6E4C39;
}

#yellow {
    background-color: #f4ff85;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #8b954e;
}

#yellow:hover {
    background-color: #696E39;
}

#green {
    background-color: #9efd85;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #569648;
}

#green:hover {
    background-color: #436E39;
}

#cyan {
    background-color: #8ffdd0;
    height: 140px;
    width: 12.5%;
    display: inline-block;
    margin-right: -4px;
    border-bottom: 10px solid #418e6c;
}

#cyan:hover {
    background-color: #396E56;
}
#content{
	margin-left:10%;
	margin-right:10%;
	margin-top:4%;
	margin-bottom:6%;
	height:100%;
	background-color:#ededed;
}
#box1head{
	height:100px;
	background-color:#86C9FE;
	margin-left:-5px;
	margin-right:-5px;
	border-bottom:10px solid #4D7694; 
}
#box2head{
	height:100px;
	background-color:#9A85FE;
	margin-left:-5px;
	margin-right:-5px;
	border-bottom:10px solid #584C94; 
}
#box3head{
	height:100px;
	background-color:#F385FE;
	margin-left:-5px;
	margin-right:-5px;
	border-bottom:10px solid #894195; 
}
#box4head{
	height:100px;
	background-color:#FF86B3;
	margin-left:-5px;
	margin-right:-5px;
	border-bottom:10px solid #934D65; 
}
#header1{
	font-family:Helvetica;
	color:#39566E;
	text-align:center;
	padding-top:25px;
	text-shadow:0px 1px #EDEDED;
	font-size: 40px;
	letter-spacing:7px;
}
#header2{
	font-family:Helvetica;
	color:#42396E;
	text-align:center;
	padding-top:25px;
	text-shadow:0px 1px #EDEDED;
	font-size: 40px;
	letter-spacing:7px;
}
#header3{
	font-family:Helvetica;
	color:#68396E;
	text-align:center;
	padding-top:25px;
	text-shadow:0px 1px #EDEDED;
	font-size: 40px;
	letter-spacing:7px;
}
#header4{
	font-family:Helvetica;
	color:#6E394D;
	text-align:center;
	padding-top:25px;
	text-shadow:0px 1px #EDEDED;
	font-size: 40px;
	letter-spacing:7px;
}
.box{
	padding-left:30px;
	padding-right:30px;
	font-family:Georgia;
	font-size:20px;
	font-color:#2E2E2E;
	letter-spacing:1px;
	text-shadow:0px 1px #FFFFFF;
	line-height:150%;
}
#footer{
	background-color:#c9c9c9;
	width:80%;
	height:150px;
	margin-left:10%;
	margin-right:10%;
	margin-bottom:10%;
	border-bottom:10px solid #939393;
}
#footertext{
	text-align:center;
	padding-top:60px;
	font-family:Helvetica;
	font-size:18px;
	text-shadow:0px 1px #FFFFFF;
}

dabblet.html

<!DOCTYPE html>

<html>
<head>
    <title>A Website</title>
</head>

<body>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">

    <div id="header">
        <p id="Heading" style="text-align: center">
        <span style="color:#86C9FE">A</span>
        <span style="color:#FF86B3">B</span>
        <span style="color:#9EFD85">C</span></p>

        <p id="Subheading">website</p>
    </div>

    <div id="nav">
        <a href="#">
        <div id="blue">
        </div></a> <a href="#">
        <div id="purple"></div></a> <a href="#">
        <div id="pink"></div></a> <a href="#">
        <div id="red"></div></a> <a href="#">
        <div id="orange"></div></a> <a href="#">
        <div id="yellow"></div></a> <a href="#">
        <div id="green"></div></a> <a href="#">
        <div id="cyan"></div></a>
    </div>
    <div id="content">
    	<div id="box1head">
    	<h1 id="header1">
    	Info Pane
    	</h1>
    	</div>
    	<p class="box">
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor eget mauris hendrerit tincidunt lacinia quis risus. Aliquam ante arcu, tincidunt in vulputate lobortis, pulvinar vel elit. Nulla lacus nisi, dictum ac sollicitudin vitae, rutrum non ante. Phasellus in dui hendrerit, consectetur ante tempus, suscipit sem. Vestibulum vitae posuere magna. Maecenas pretium, neque ac volutpat sodales, felis libero bibendum libero, ac rutrum lacus tellus nec mi. Nulla ut consequat tellus. Integer nisl mi, mattis sed tristique sed, malesuada vitae nunc. Morbi vitae aliquet augue, a tempor diam. Maecenas cursus, ligula et convallis fringilla, dui mauris sagittis ligula, quis consequat nisi mi rhoncus lorem. Suspendisse adipiscing dui eget pulvinar placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id tincidunt enim, et eleifend ipsum. In sodales in augue id luctus. Nullam et nunc quis odio mollis feugiat.
    	</p>
    	<div id="box2head">
    	<h1 id="header2">
    	Second Header</h2>
    	</div>
    	<p class="box">
    	Suspendisse tortor nisi, pretium adipiscing adipiscing nec, tempus quis tellus. Phasellus nunc urna, interdum vel urna eu, rutrum tincidunt turpis. Ut vehicula auctor enim eget sollicitudin. Nulla sapien nisl, viverra sed tellus pellentesque, luctus porta lacus. Nulla in elit fringilla, auctor quam vel, faucibus elit. Praesent accumsan, sem nec pretium eleifend, sem lectus ullamcorper enim, eget pretium purus mi sed justo. Nullam congue porttitor tristique. Quisque lacinia justo vel consequat dignissim. In lacinia, lectus nec imperdiet scelerisque, leo justo porta risus, a dapibus dui augue id neque. Aenean ut eros arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vestibulum enim quis erat placerat posuere. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    	</p>
    	<div id="box3head">
    	<h1 id="header3">
    	Third Header</h1>
    	</div>
    	<p class="box">
    	Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae dui vitae ipsum pharetra imperdiet. Nam sagittis vel justo varius viverra. Maecenas vehicula nisi et nunc vulputate consequat eu in sem. Nunc blandit eros in feugiat ornare. Suspendisse euismod nisi id dolor malesuada placerat. Nam nec risus eu dolor porttitor luctus a vitae eros. Vivamus mattis condimentum sem vitae varius. Duis dui purus, consectetur quis mauris a, facilisis aliquet massa. Sed consectetur, sem at hendrerit sollicitudin, sapien risus vestibulum eros, eu sollicitudin nisl neque sit amet mi. Mauris et interdum nisl. Sed mi leo, vulputate malesuada risus sed, aliquet egestas orci. Fusce commodo egestas libero, id consectetur elit ullamcorper nec. Praesent iaculis tempor magna, et convallis magna consequat sed. Donec quis sem at lorem convallis ullamcorper id tincidunt nisi.
    	</p>
    	<div id="box4head">
    	<h1 id="header4">
    	Fourth Header</h1>
    	</div>
    	<p class="box">
    	Suspendisse feugiat metus purus. Aenean turpis mauris, semper quis pellentesque ut, imperdiet in nunc. Duis iaculis in ipsum a malesuada. In luctus erat non dolor tristique, ut auctor ante venenatis. Aliquam sed enim ut sapien volutpat facilisis eget sed ipsum. Nunc tincidunt leo dignissim erat pulvinar, pulvinar volutpat nunc aliquam. Sed quis mollis mauris, sed gravida ligula. Nullam aliquam odio vel sagittis aliquet. Phasellus quis leo eu ante tincidunt fermentum ac bibendum neque. Quisque lobortis ante dui, vel volutpat mauris feugiat et. Suspendisse auctor ante et purus posuere rutrum. Quisque consequat nunc diam, ut sagittis sem convallis at. Vestibulum facilisis sem quis augue scelerisque, at gravida urna elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    	</p>
    </div>
    <div id="footer">
    <p id="footertext">
    Created by Rates, August 07 2013
    </p>
    </div>
</body>
</html>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}