new kitchen design
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FREE TWO COLUMN BUSINESS WEB DESIGN</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding : 0;
margin : 0;
}
body {
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
background-color : #f2efde;
color : #949494;
}
#wrapper {
width : 870px;
margin : 0 auto;
background-image : url(new kitchen design-images/topbg.jpg);
background-repeat : repeat-x;
background-color : #fff;
}
img {
padding : 3px;
border : 1px solid #caff7a;
margin-left : 10px;
margin-top : 5px;
}
#top {
height : 60px;
background-image : url(new kitchen design-images/topbg.jpg);
background-repeat : repeat-x;
}
.black {
color : #000000;
}
.green {
color : #b0cbe8;
}
.top {
color : #000000;
}
.top a {
color : #b0cbe8;
}
#top h1 {
font-size : 2.3em;
margin-top : 5px;
margin-left : 30px;
font-weight : lighter;
font-family : Arial, Helvetica, sans-serif;
}
#top h3 {
font-size : 1.1em;
margin-left : 30px;
font-family : Arial, Helvetica, sans-serif;
}
#top {
background-image : url(new kitchen design-images/topbg.jpg);
background-repeat : repeat-x;
height : 60px;
}
#header {
height : 150px;
background-color : #fff;
background-image : url(new kitchen design-images/bgh.jpg);
background-repeat : no-repeat;
padding-left : 30px;
padding-right : 30px;
border-bottom : 3px solid #b0cbe8;
background-position : right 0%;
}
#header h1 {
color: #b0cbe8;
font-size: 2.3em;
font-weight: lighter;
padding-top: 15px;
}
#header h2 {
color: #000000;
font-weight: lighter;
font-size: 1.8em;
letter-spacing: .4em;
word-spacing: -.2em;
}
ul#menu {
margin : 0;
padding : 0;
list-style-type : none;
width : auto;
position : relative;
display : block;
height : 36px;
text-transform : uppercase;
font-size : 12px;
font-weight : bold;
background-image : url(new kitchen design-images/bgOFF.gif);
background-repeat : repeat-x;
background-position : top left;
font-family : Helvetica, Arial, Verdana, sans-serif;
border-bottom : 4px solid #336666;
border-top : 1px solid #c0e2d4;
}
ul#menu li {
display : block;
float : left;
margin : 0;
padding : 0;
}
ul#menu li a {
display : block;
float : left;
color : #6c9c59;
text-decoration : none;
padding : 12px 20px 0 20px;
height : 24px;
background-image : url(new kitchen design-images/bgDIVIDER.gif);
background-repeat : no-repeat;
background-position : top right;
}
ul#menu li a:hover {
background-image : url(new kitchen design-images/bgHOVER.gif);
background-repeat : no-repeat;
background-position : top right;
}
ul#menu li a.current, ul#menu li a.current:hover {
color : #fffffe;
background-image : url("new kitchen design-images/bgON.gif");
background-repeat : no-repeat;
background-position : top right;
}
#leftcolumn {
display : inline;
width : 275px;
float : left;
background-color : #fff;
min-height : 531px;
}
* html #leftcolumn {
height : 531px;
}
#leftcolumn h2 {
font-family : "courier new";
font-size : 1.8em;
color : #0099ff;
padding-left : 15px;
padding-top : 15px;
font-family : Arial, Helvetica, sans-serif;
font-weight : lighter;
}
#leftcolumn h3 {
font-family : Arial, Helvetica, sans-serif;
font-size : 1.3em;
text-decoration : underline;
}
.leftbox {
border : 1px solid #c9e3d8;
margin-left : 10px;
}
.leftbox p {
padding-top : 5px;
padding-left : 5px;
text-align : justify;
padding-right : 5px;
margin-top : 5px;
padding-bottom : 10px;
}
.leftbox h3 {
padding-top : 3px;
padding-left : 10px;
padding-bottom : 8px;
border-bottom : 3px solid #caff7a;
background-image : url(new kitchen design-images/h3bg.jpg);
background-repeat : repeat-x;
color : #393939;
}
.woborder p {
font-family : Arial, Helvetica, sans-serif;
font-size : 0.9em;
text-align : justify;
padding-left : 15px;
padding-right : 10px;
margin-top : 1em;
margin-bottom : 1em;
}
.woborder h3 {
padding-left : 15px;
}
#leftcolumn a {
color : #80b86a;
float : right;
padding-right : 10px;
margin-top : -17px;
}
#leftcolumn img {
float : left;
margin-right : 7px;
margin-top : 10px;
margin-bottom : 5px;
}
#rightcolumn {
margin : 0 0 0 0;
padding-right : 10px;
display : inline;
width : 585px;
float : left;
min-height : 531px;
background-color : #fff;
}
* html #rightcolumn {
height : 531px;
}
#rightcolumn h2 {
font-size : 1.8em;
color : #0099ff;
padding-left : 10px;
padding-top : 15px;
font-family : Helvetica, Arial, Verdana, sans-serif;
font-weight : lighter;
}
#rightcolumn p {
padding-left : 10px;
}
.clear {
clear : both;
}
#boxes {
margin-right : 10px;
margin-top : 15px;
}
.box {
width : 270px;
border : 1px solid #c9e3d8;
float : left;
padding-bottom : 10px;
margin : 8px 0 10px 15px;
background-image : url(new kitchen design-images/h3bg.jpg);
background-repeat : repeat-x;
background-position : top 0%;
}
.box p {
color : #333;
text-align : justify;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
}
.box h3 {
padding-top : 5px;
padding-left : 10px;
padding-bottom : 7px;
border-bottom : 3px solid #caff7a;
color : #393939;
font-weight : lighter;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.8em;
}
.box ul {
margin-left : 40px;
line-height : 18px;
padding-top : 10px;
}
.box li {
list-style-type : none;
color : #80b86a;
font-weight : bold;
font-style : italic;
}
.box a {
padding-left : 5px;
color : #80b86a;
text-decoration : none;
}
.bottombox {
border : 1px solid #c9e3d8;
padding-bottom : 5px;
margin : 15px 0 10px 15px;
background-image : url(new kitchen design-images/h3bg.jpg);
background-repeat : repeat-x;
background-position : top 0%;
}
.bottombox p {
color : #333;
text-align : justify;
padding-left : 10px;
padding-right : 10px;
padding-top : 12px;
font-size : 1.1em;
line-height : 1.5em;
}
.bottombox h3 {
padding-top : 5px;
padding-left : 10px;
padding-bottom : 7px;
border-bottom : 3px solid #caff7a;
color : #393939;
font-weight : lighter;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.8em;
}
.bottombox a {
padding-left : 5px;
color : #80b86a;
text-decoration : none;
}
#footer {
background-color : #e4ecf9;
display : inline;
float : left;
padding-top : 5px;
padding-bottom : 5px;
text-align : center;
display : inline;
float : left;
width : 100%;
border-top: 2px #b0cbe8 solid;}
#footer p {
font-size : 0.8em;
color : #0099ff;
}
#footer a {
font-size : 0.8em;
color : #80b86a;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<h1 class="top"><span class="green">Free</span> <span class="black">Template</span></h1>
<h3 class="top">by: <a href="http://www.getcsstemplates.com/">Get Free CSS Web Design and Templates</a></h3>
</div>
<div id="header">
<h1>Something Comes Here</h1>
<h2>Put Your Slogan Here</h2>
</div>
<ul id="menu">
<li><a href="http://www.getcsstemplates.com" title=""class="current"> Web Site Design</a></li>
<li><a href="" title="">Link Two</a></li>
<li><a href="" title="">Link Three</a></li>
<li><a href="" title="">Link Four</a></li>
<li><a href="" title="">Link Five</a></li>
<li><a href="" title="">Link Six</a></li>
<li><a href="" title="">More Linx</a></li>
<li><a href="" title="">Even More</a></li>
</ul>
<div id="leftcolumn">
<h2>Lorem Ipsum</h2>
<div class= "woborder">
<h3>consectetuer adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum feugiat lectus ut magna.</p>
</div>
<div class="leftbox">
<h3>Donec rutrum neque eu nisl</h3>
<img src="new kitchen design-images/img1.jpg" alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus...</p>
<a href="#">read more</a>
</div>
<br/>
<div class="leftbox">
<h3>Donec rutrum neque eu nisl</h3>
<img src="new kitchen design-images/img2.jpg" alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus...</p>
<a href="#">read more</a>
</div>
</div>
<div id="rightcolumn">
<h2>Free CSS Template</h2>
<p>This is a free 100% CSS/XHTML valid <strong>Web Site Design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Design and Templates for Free</a>. You can link back to my site if you use this template but you don't have to.</p>
<div class="clear"></div>
<div id="boxes">
<div class="box">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque. </p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.</p>
<a href="#">read more</a>
</div>
<div class="box">
<h3>Lorem Ipsum</h3>
<img src="new kitchen design-images/img3.jpg" alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.</p>
<a href="#">read more</a>
</div>
</div>
<div class="clear"></div>
<div class="bottombox"><h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curaes....</p>
<a href="#">read more</a>
</div>
</div>
<div id="footer"> <p><a href="http://validator.w3.org/">Valid XHTML</a> Copyright © 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="web site design">GET FREE CSS WEB DESIGN</a> </p> </div>
</div>
</body>
</html>
Related examples in the same category