Simply Colors

Designer's Comments

Look carefully for specific instructions

To use this layout simply copy and paste the code and you should be ready to go. This layout contains Valid CSS and XHTML. Feel free to make changes but be sure to keep the original credits intact!

For more layouts visit my website at www.stilledheart.org, I also take requests there for personalized layouts.

Credit also goes to:

www.fallingstarss.com

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Heading/Site Title Can Go Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {height: 100%;}

body{
background-color: #9e9c71;
margin: 0;
padding: 0;
text-align: center;
font-family: arial;
font-size: 12px;
}
#top{
background:url(http://cbimg6.com/layouts/10/06/36321aa.png) repeat-x;
height: 40px;
border:0px;
padding:0;
}
#sitename{
width: auto;
height: 50px;
font-family: Times New Roman;
font-size: 35px;
text-transform: uppercvase;
border:0px;
padding:0;
color:#abaa9d;
background-color: #000;
text-align:center;
}
#slogan{
font-family: times new roman;
font-size: 10px;
color: #abaa9d;
text-align: center;
text-transform: uppercase;
margin-top: -5px;
letter-spacing: 10px;
}
#top2{
background:url(http://cbimg6.com/layouts/10/06/36321aa.png) repeat-x;
height: 10px;
width: auto;
border:0px;
padding:0;
}
div#top3{
background: #994c69 repeat-x;
height: 20px;
width: auto;
text-align: center;
padding-top: 4px;
list-style-type: none;
margin: 0 auto;
}
div#top3 ul{
margin: 0;
padding: 0
color: #000;
line-height: 30px;
white-space: nowrap;
list-style-type:none;
}
div#top3 li{
list-style: none;
margin: 0 auto;
display: inline;
}
#top3 li a{
text-decoration: none;
font-family: arial;
letter-spacing: 2px;
font-size: 10px;
color: #fff;
padding: 10px 15px;
text-transform: uppercase;
}
#top3 li a:hover {
color: #fff8bb;
}
#main {
overflow:auto;
padding-bottom: 0px;
} 
#container{
margin: 0 auto;
width: 800px;
padding:0;
text-align: left;
min-height: 100%;
background-color: #5e8271;
margin-bottom: 7px;
}
#sidebar{
float:left;
width: 250px;
padding:5px;
margin:0;
background-color: #5e8271;
}
#content{
float: right;
width: 500px;
margin: 0;
padding:5px;
background-color: #5e8271;
}
h1{
color: #cdced4;
text-transform: uppercase;
text-align: center;
font-family: helvetica;
font-size: 18px;
border-left: #33454e 20px solid;
border-right: #33454e 20px solid;
font-style: normal;
letter-spacing: 8px;
} 
#footer{
clear: both;
background: #000;
overflow:hidden;
height: 25px;
position: relative;
margin-top: -25px; 
padding: 5px;
}
a:link, a:visited, a:active{
color: #eba9c2;
text-decoration: none;
}
a:hover{
color: #fff;
text-decoration: underline;
}
b, strong{
color: #eba9c2;
font-weight: bold;
}

i, em{
font-style: italic;
color: #606060;
}
u{
text-decoration: underline;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

</style>
<body>
<div id="top">
</div>
<div id="sitename">
SITE TITLE GOES HERE
<div id="slogan">
slogan goes here
</div>
</div>
<div id="top3">
	<li><a href="#">About Us</a></li>
	<li><a href="#">Our Products</a></li>
	<li><a href="#">FAQs</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Login</a></li>
</div>
<div id="container">
<div id="main">
<div id="sidebar">
<h1>header</h1>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah
<h1>header</h1>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah
<h1>credits</h1>
This layout was designed by Monet at <a href="http://www.stilledheart.org">Stilledheart.org</a>. Resources were taken from <a href="http://www.fallingstarss.com">here</a>.
</div>
<div id="content">

<h1>Links</h1>
Feel free to make whatever changes to the layout that you wish but please don't remove my credits! Enjoy! If you have any problems with the layout feel free to contact me at 
<a href="www.stilledheart.org">my website</a>
<h1>Download</h1>
</div>

</div>

</div>
<div id="footer">

</div>
</div>
</body>
</html>

Layout Comments

Showing latest 1 of 1 comments

Simple, but cute :)
Good Job!~

By Snaily on Jun 28, 2010 12:19 am

Layout Details

Designer	triplelove
Submitted on	Jun 26, 2010
Page views	5,251
Favorites	16
Comments	1
Reviewer	Cum
Approved on	Jun 27, 2010

Simply Colors

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates