marsp0/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
 body {
 	font-family: Futura;
 }

 a {
 	text-decoration: none;
 	color: orange;
 }

.nav {
	background: #7C5329;
	background: linear-gradient(1deg, #7C5329, #3E2A14);
	height: 150px;
}

.banner {
	height: 200px;
}

.bar {
	height: 60px;
	display: inline;

}

.bar ul {
	list-style: none;
	background-color: blue;
}

.bar ul li {
	float: left;
}

.bar ul li a {
	padding: 20px;
}

.content {
	height: 550px;
	background: linear-gradient(1deg, #3E2A14, #7C5329);
}

.main {
	background-color: white;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='nav'>
	<div class='banner'>
	</div>
	<div class='bar'>
		<ul>
			<li><a href='#'>Home</a></li>
			<li><a href='#'>Shop</a></li>
			<li><a href='#'>About</a></li>
			<li><a href='#'>Contact</a></li>
		</ul>
	</div>
</div>
<div class='content'>
	<div class='main'>
	</div>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/
	body {
	font-family: Futura;
	}

	a {
	text-decoration: none;
	color: orange;
	}

	.nav {
	background: #7C5329;
	background: linear-gradient(1deg, #7C5329, #3E2A14);
	height: 150px;
	}

	.banner {
	height: 200px;
	}

	.bar {
	height: 60px;
	display: inline;

	}

	.bar ul {
	list-style: none;
	background-color: blue;
	}

	.bar ul li {
	float: left;
	}

	.bar ul li a {
	padding: 20px;
	}

	.content {
	height: 550px;
	background: linear-gradient(1deg, #3E2A14, #7C5329);
	}

	.main {
	background-color: white;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class='nav'>
	<div class='banner'>
	</div>
	<div class='bar'>
	<ul>
	<li><a href='#'>Home</a></li>
	<li><a href='#'>Shop</a></li>
	<li><a href='#'>About</a></li>
	<li><a href='#'>Contact</a></li>
	</ul>
	</div>
	</div>
	<div class='content'>
	<div class='main'>
	</div>
	</div>