kitchen
<!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">
<head>
<title>Kitchen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*--------------------------Let's start with text, links and HTML-------------------------*/
html,body{
margin:0;
padding:0;
background:#ededed url(kitchen-images/bg.gif) repeat-x fixed;
text-align:center;
}
a:link{
color:#2a3d54;
text-decoration:none;
}
a:visited{
color:#2a3d54;
text-decoration:none;
}
a:hover{
color:#CCCCCC;
text-decoration:none;
}
a:active{
color:#2a3d54;
text-decoration:none;
}
h1{
font:bold 12px verdana;
width: 350px;
border-bottom:1px solid #dedede;
margin:0;
padding:0;
color:#a0d500;
margin-bottom:8px;
margin-left:20px;
margin-top:10px;
}
h2{
font:bold 12px verdana;
width: 200px;
border-bottom:1px solid #dedede;
margin:0;
padding:0;
color:#a0d500;
margin-bottom:8px;
margin-left:20px;
margin-top:10px;
}
h3{
font: bold 16px Verdana;
margin:0;
color:#a0d500;
padding:0;
float:left;
margin-top:30px;
margin-left:30px;
}
* html h3{
margin-left:20px;
}
h4{
font: bold 14px Verdana;
margin:0;
color:#646464;
padding:0;
float:left;
margin-top:90px;
margin-left:30px;
}
* html h4{
margin-left:20px;
}
.style1{
float:left;
font:9px Verdana;
color:#666666;
margin:0;
padding:0;
margin-left:10px;
}
.style2{
padding:20px;
font:10px Verdana;
}
#footer a{
color:#a0d500;
}
#footer a:hover{
color:#CCCCCC;
}
/*--------------------------End-------------------------*/
/*--------------------------start Image styles-------------------------*/
.img{
float:left;
margin-left:20px;
border:1px solid #CCCCCC;
}
/*--------------------------End-------------------------*/
/*--------------------------Start divs-------------------------*/
#container{
width:780px;
height:100%;
text-align:left;
margin:0 auto;
}
#top{
width:780px;
height:79px;
background:#2c425c;
border-bottom:2px solid #FFFFFF;
}
#menu{
width:780px;
background:url(kitchen-images/navbg.gif) repeat-x;
height:30px;
border-bottom:1px solid #c8d6e6;
}
#headertext{
width:280px;
height:200px;
background:url(kitchen-images/headertext.gif) repeat-x;
float:left;
border-bottom:1px solid #c8e0ff;
}
#banner{
background:url(kitchen-images/banner.gif);
float:left;
width:500px;
height:200px;
border-bottom:1px solid #c8e0ff;
}
#content{
width:780px;
min-height:332px;
background:#FAFCFF url(kitchen-images/contentbg.gif) repeat-x;
margin:0;
padding:0;
border-top:1px solid #FFFFFF;
float:left;
}
* html #content{
height:162px; /*defines the height in IE6*/
}
#welcomecontainer{
width:420px;
height:100%;
float:left;
margin-left:10px;
padding:0;
border-right:1px solid #dedede;
margin-top:10px;
margin-bottom:10px;
}
.welcome{
width:420px;
height:100%;
float:left;
margin:0;
padding:0;
}
.news{
width:340px;
height:100%;
float:left;
margin-left:10px;
padding:0;
margin:0;
margin-top:10px;
}
* html .news{
width:320px;
}
#footer{
width:780px;
height:80px;
background:#2c415c;
font:10px Verdana;
color:#FFFFFF;
padding:0;
float:left;
margin:0;
}
/*--------------------------End-------------------------*/
/*--------------------------Start menu css-------------------------*/
#menu ul{
list-style-type:none;
margin:0;
font:bold 10px Verdana;
text-decoration:none;
float:left;
padding:8px;
width:760px;
}
#menu li{
display:inline;
}
#menu li a{
color:#646464;
padding:8px;
}
#menu li a:hover{
background:url(kitchen-images/navover.gif) repeat-x;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h3>The Name of Your Site</h3>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="headertext">
<h4>Another Text Here Maybe</h4>
</div>
<div id="banner"></div>
<div id="content">
<div id="welcomecontainer">
<div class="welcome">
<h1>Welcome to The Name</h1>
<img src="kitchen-images/pic.gif" alt="Pic" class="img" />
<p class="style1">This site design is open source,<br />
so feel free to use it as you want,<br />
it is appreciated if you keep the links in the footer<br />
"By Kitchen appliances and Appliances". Enjoy!<br />
Lorem ipsum dolor sit amet,<br />
adipiscing<br />
elit.Fusce dapibus eros ut enim. Nullam<br />
velleo.<br />
Suspendisse vulputate tellus id<br />
aoreet vel, tincidunt sit<br />
amet,malesuada ac, diam. Praesent lacus libero<br />
sit. Amet, commodo et, iaculis<br />
porttitorsapien. Fusce adipiscing.<br />
Aenean tempus accumsan tellus. <a href="http://www.free-css.com/">Read More ></a></p>
</div>
<div class="welcome">
<h1>Welcome to The Name</h1>
<img src="kitchen-images/pic.gif" alt="Pic" class="img" />
<p class="style1">Lorem ipsum dolor sit amet,<br />
adipiscing<br />
elit.Fusce dapibus eros ut enim. Nullam<br />
velleo.<br />
Suspendisse vulputate tellus id<br />
aoreet vel, tincidunt sit<br />
amet,malesuada ac, diam. Praesent lacus libero<br />
sit. Amet, commodo et, iaculis<br />
porttitorsapien. Fusce adipiscing.<br />
Aenean tempus accumsan tellus. <a href="http://www.free-css.com/">Read More ></a></p>
</div>
</div>
<div class="news">
<h2>News is good!</h2>
<img src="kitchen-images/pic.gif" alt="Pic" class="img" />
<p class="style1">Lorem ipsum dolor sit amet, c<br />
onsectetuer adipiscing elit.<br />
Fusce dapibus eros ut enim. Nullam<br />
scelerisque sem vel<br />
leo. Suspendisse vulputate tellus id <br />
felis.</p>
</div>
<div class="news">
<h2>News is good!</h2>
<img src="kitchen-images/pic.gif" alt="Pic" class="img" />
<p class="style1">Lorem ipsum dolor sit amet, c<br />
onsectetuer adipiscing elit.<br />
Fusce dapibus eros ut enim. Nullam<br />
scelerisque sem vel<br />
leo. Suspendisse vulputate tellus id <br />
felis.</p>
</div>
</div>
<div id="footer">
<p class="style2"><a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">About</a> <a href="http://www.free-css.com/">Products</a> <a href="http://www.free-css.com/">Services</a> <a href="http://www.free-css.com/">Contact</a><br />
Copyright © 2007 <a href="http://www.free-css.com/">Your Name</a> | By Kitchen appliances and Appliances</p>
</div>
</div>
</body>
</html>
Related examples in the same category