Colored Rose

Layout by Unloadeed.com

This is a simple layout I made. This layout can work for anything from a personal site to a business site.

The Code

Use this code to use this layout on your site!

<!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>Unloadeed.com</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body {
background-color: #ffa4ba;
}
#container{ 
margin:0 auto; 
width:700px; 
background:#ffffff; 
padding:10px; 
color: #000000;
}
#header { 
background : url('/testing/pinkstripes.jpg'); 
width : 700px;
height : 100px; 
margin-bottom : 10px;
}
#sidebar { 
width: 185px; 
float: left; 
padding: 0px; 
background-color: #ffffff;}
 
#top {
width: 700px;
float: center;
padding: 0px;
background-color: transparent;}
 
#content { 
width: 500px; 
padding: 0px;
float: right;
background: #ffffff; 
}
#footer { 
clear: both; 
padding: 15px; 
height: 35px; 
background: #ffffff; 
}
A:link, A:active, A:visited{
color: #ff9fbf;
text-decoration: none;
font-size: 11px;
font-family: arial;}
 
A:hover {
color: #ffa4ba;
font-size: 11px;
border-bottom: 2px dashed;
text-decoration: none;
font-family: arial;}
 
h1 {
background-color : transparent; 
font-family : Arial;
border-bottom: 5px solid;
text-align: right;
line-height: 20px;
color : #9c0034;
font-size: 25px;}
 
h2 {
background-color : transparent; 
font-family : Arial;
color : #9c0034;
text-align: left;
border-bottom: 2px solid;
font-size: 15px;}
 
h3 {
background-color: #ff9fbf;
font-family: Arial;
color: #9c0034;
text-align: right;
margin-top: -17px;
border-bottom: 1px solid #9c0034;
border-right: 1px solid #9c0034;
border-left: 1px solid #9c0034;
font-size: 10px;}
 
#base {
	border: 1px solid #000;
	margin: 2em;
	width: 10em;
	padding: 5px;
	}
ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
	}
#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: -5px;
border-top: 1px solid #999;
z-index: 1;
}
 
#navcontainer ul
{
list-style-type: none;
text-align: center;
margin-top: -8px;
padding: 0;
position: relative;
z-index: 2;
}
 
#navcontainer li
{
display: inline;
text-align: center;
margin: 0 5px;
}
 
#navcontainer li a
{
padding: 1px 7px;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}
 
#navcontainer li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
 
#navcontainer li a#current
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
</style> 
</head> 
<body> 
 
<div id="container"> 
<div id="header"></div> 
<div id="top"> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li><a href="/">Link 1</a></li> 
<li><a href="/">Link 2</a></li> 
<li><a href="/">Link 3</a></li> 
<li><a href="/">Link 4</a></li> 
<li><a href="/">Link 5</a></li> 
</ul> 
</div> 
 
</div> 
<div id="sidebar"> 
<h2>Links</h2> 
<a href="/">Link Here</a><br /> 
<a href="/">Link Here</a><br /> 
<a href="/">Link Here</a><br /> 
<a href="/">Link Here</a><br /> 
<a href="/">Link Here</a><br /> 
<a href="/">Link Here</a><br /> 
 
<h2>Credits</h2> 
Layout made and coded by <a href="http://unloadeed.com">Unloadeed.com</a>.<br /> 
<p> 
    <a href="http://validator.w3.org/check?uri=referer"><img 
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> 
  </p> 
 
</div>  
 
 
<div id="content"> 
<h1>Colored Rose</h1> 
<h3>Layout by Unloadeed.com</h3> 
 
This is a simple layout I made. This layout can work for anything from a personal site to a business site. 
 
 
<h1>The Code</h1> 
<h3>Use this code to use this layout on your site!</h3>

</div>  
 
<div id="footer"> 
<center> 
CopyRight
</center> 
</div> 
 
</div>  
 
</body> 
</html>