dboudro/dabblet.css

## dabblet.css
* {
text-decoration: none;
}

#container {
position: relative;
/* border: 2px solid #904; */
}

#main-nav {
position: fixed;
width: 100%;
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
 /* border: 2px solid #409; */
height: 150px;
background-color: #fff;
}

#main-nav ul{
margin: auto;
height: 50px;
margin-top: 50px;
width: 1000px;
/* border: 2px solid #090; */
}

#main-nav li {
margin-top: 15px;
float: left;
list-style: none;
margin-right: auto;
padding-right: 35px
}

#main-nav li #logo {
position: relative;
bottom: 45px;
width: 130px;
opacity: .85;
}

#main-nav li #logo:hover {
opacity: 1;
border-bottom: 1px solid #e00;
}

#main-nav li a:link {
color: #000;
font-family: Verdana;
font-size: 14px;
}

#main-nav li a:hover{
padding-bottom: 3px;
 border-bottom: 1px solid #E61010

}

#main-content-container {
position: absolute;
top: 160px;
border: 1px dashed #000;
height:460px;
width: 100%;
background-color: #eee;
}

#main-content-container {
width: 100%
position: absolute;
top: 150px;
}
#main-header {
font-family: Times New Roman;
font-size: 26px;
color: #;
text-shadow: 0px 2px 0 #fff;
width: 450px;
padding-top: 120px;
margin: auto;
text-align: center;
}

#about-container {
position: absolute;
top: 612px;
background-color: #F5F5F0;
border: 1px dashed #00e;
width: 100%;
height: 400px;
text-align: center;
}

#about {
position: relative;
font-family: raleway;
text-decoration: bold;
top: 80px;
display: inline;
padding: 10px 10px 10px 10px;
border: 1px solid #000;
}

#about-text {
text-align: left;
width: 400px;
margin: auto;
padding-top: 150px;
}

## dabblet.html
<html>
  <head>
		<meta charset="utf-8" />
		<title> Cute Desserts </title>
		<link rel="stylesheet" href="css/stylesheet2.css"/>
  </head>
  <body>
  <div id="container">
	<div id="nav-block">

	<nav id="main-nav">
	<ul>
	<li class="main-nav-item1"> <a href="#">HOME</a></li>
	<li class="main-nav-item1"> <a href="#">RECIPES</a></li>
	<li class="main-nav-item1"> <a href="#">GALLERY</a></li>
	<li class="main-nav-item1"> <a href="#">PARTNERS</a></li>
	<li class="logo" ><a href="http://google.com"> <img id="logo" src="http://i.imgur.com/lGZ7wmK.png"/></a> </li>
	<li class="main-nav-item2"> <a href="#">BLOG</a></li>
	<li class="main-nav-item2"> <a href="#">OUR STORY</a></li>
	<li class="main-nav-item2"> <a href="#">CONTACT</a></li>
	<li class="main-nav-item2"> <a href="#">PURCHASE</a></li>
	</ul>
	</nav>
	</div>

	<div id="main-content-container">
	<p id="main-header"> Dboody.com is the personal website
	of Dylan Boudro, a NEU CS student specializing in Web Development. </p>
	</div>

	<!---- ABOUT SECTION STARTS --->
	<div id="about-container">
	<h3 id="about"> ABOUT </h3>

	<p id="about-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Morbi eget mollis elit, quis fermentum odio. Maecenas eu venenatis dui.
	Aliquam purus est, congue non ultrices vel, blandit vitae diam. </p>
	</div>
	<!---- ABOUT SECTION ENDS --->

	<!---- PICTURE NAV STARTS --->

	<div id="pic-nav-container">

	<div id="pic-nav"
	&amp;lt;img class="pic-nav-item" src="http://placehold.it/370x260"/>
	<img class="pic-nav-item" src="http://placehold.it/370x260"/>
	<img class="pic-nav-item" src="http://placehold.it/370x260"/>
	</div>
	</div>

	<!---- PICTURE NAV ENDS --->

	<!---- FOOTER STARTS --->
	<div id="footer">
	<span id="small-logo"> </span>
	<nav id="footer-nav">
	<ul>
	<li> <a href="#">BLOG</a></li>
	<li> <a href="#">OUR STORY</a></li>
	<li> <a href="#">CONTACT</a></li>
	<li> <a href="#">PURCHASE</a></li>
	</ul>
	</nav>
	</div>
	<!---- FOOTER ENDS --->

	 </div>
  </body>


</html>tml>tml>

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

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	* {
	text-decoration: none;
	}

	#container {
	position: relative;
	/* border: 2px solid #904; */
	}

	#main-nav {
	position: fixed;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* border: 2px solid #409; */
	height: 150px;
	background-color: #fff;
	}

	#main-nav ul{
	margin: auto;
	height: 50px;
	margin-top: 50px;
	width: 1000px;
	/* border: 2px solid #090; */
	}

	#main-nav li {
	margin-top: 15px;
	float: left;
	list-style: none;
	margin-right: auto;
	padding-right: 35px
	}

	#main-nav li #logo {
	position: relative;
	bottom: 45px;
	width: 130px;
	opacity: .85;
	}

	#main-nav li #logo:hover {
	opacity: 1;
	border-bottom: 1px solid #e00;
	}

	#main-nav li a:link {
	color: #000;
	font-family: Verdana;
	font-size: 14px;
	}

	#main-nav li a:hover{
	padding-bottom: 3px;
	border-bottom: 1px solid #E61010

	}

	#main-content-container {
	position: absolute;
	top: 160px;
	border: 1px dashed #000;
	height:460px;
	width: 100%;
	background-color: #eee;
	}

	#main-content-container {
	width: 100%
	position: absolute;
	top: 150px;
	}
	#main-header {
	font-family: Times New Roman;
	font-size: 26px;
	color: #;
	text-shadow: 0px 2px 0 #fff;
	width: 450px;
	padding-top: 120px;
	margin: auto;
	text-align: center;
	}

	#about-container {
	position: absolute;
	top: 612px;
	background-color: #F5F5F0;
	border: 1px dashed #00e;
	width: 100%;
	height: 400px;
	text-align: center;
	}

	#about {
	position: relative;
	font-family: raleway;
	text-decoration: bold;
	top: 80px;
	display: inline;
	padding: 10px 10px 10px 10px;
	border: 1px solid #000;
	}

	#about-text {
	text-align: left;
	width: 400px;
	margin: auto;
	padding-top: 150px;
	}
	<html>
	<head>
	<meta charset="utf-8" />
	<title> Cute Desserts </title>
	<link rel="stylesheet" href="css/stylesheet2.css"/>
	</head>
	<body>
	<div id="container">
	<div id="nav-block">

	<nav id="main-nav">
	<ul>
	<li class="main-nav-item1"> <a href="#">HOME</a></li>
	<li class="main-nav-item1"> <a href="#">RECIPES</a></li>
	<li class="main-nav-item1"> <a href="#">GALLERY</a></li>
	<li class="main-nav-item1"> <a href="#">PARTNERS</a></li>
	<li class="logo" ><a href="http://google.com"> <img id="logo" src="http://i.imgur.com/lGZ7wmK.png"/></a> </li>
	<li class="main-nav-item2"> <a href="#">BLOG</a></li>
	<li class="main-nav-item2"> <a href="#">OUR STORY</a></li>
	<li class="main-nav-item2"> <a href="#">CONTACT</a></li>
	<li class="main-nav-item2"> <a href="#">PURCHASE</a></li>
	</ul>
	</nav>
	</div>

	<div id="main-content-container">
	<p id="main-header"> Dboody.com is the personal website
	of Dylan Boudro, a NEU CS student specializing in Web Development. </p>
	</div>

	<!---- ABOUT SECTION STARTS --->
	<div id="about-container">
	<h3 id="about"> ABOUT </h3>

	<p id="about-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Morbi eget mollis elit, quis fermentum odio. Maecenas eu venenatis dui.
	Aliquam purus est, congue non ultrices vel, blandit vitae diam. </p>
	</div>
	<!---- ABOUT SECTION ENDS --->

	<!---- PICTURE NAV STARTS --->

	<div id="pic-nav-container">

	<div id="pic-nav"
	&lt;img class="pic-nav-item" src="http://placehold.it/370x260"/>
	<img class="pic-nav-item" src="http://placehold.it/370x260"/>
	<img class="pic-nav-item" src="http://placehold.it/370x260"/>
	</div>
	</div>

	<!---- PICTURE NAV ENDS --->

	<!---- FOOTER STARTS --->
	<div id="footer">
	<span id="small-logo"> </span>
	<nav id="footer-nav">
	<ul>
	<li> <a href="#">BLOG</a></li>
	<li> <a href="#">OUR STORY</a></li>
	<li> <a href="#">CONTACT</a></li>
	<li> <a href="#">PURCHASE</a></li>
	</ul>
	</nav>
	</div>
	<!---- FOOTER ENDS --->

	</div>
	</body>



	</html>tml>tml>