cooking
<!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>Cooking Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* Designed by w w w . t e m p l a t e m o . c o m */
body{
margin: 0 ;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.4em;
color: #444444;
background: url(cooking-images/body_bg.jpg) repeat;
}
a:link, a:visited { color: #720803; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #720803; text-decoration: none; font-weight: bold; }
h1 {
margin:0px;
font-weight: bold;
font-size: 22px;
color:#518b10;
}
h1 span {
font-size: 14px;
color: #666666;
line-height: 1.6em;
}
h2 {
font-weight: bold;
margin-bottom: 0px;
font-size: 14px;
color:#427707;
padding-top: 20px;
}
#container {
margin: auto;
width: 770px;
background: url(cooking-images/container_bg.jpg) repeat-y;
}
#left_column {
float: left;
width: 483px;
}
#title {
float: left;
padding-top: 20px;
padding-left: 30px;
height: 55px;
font-size: 24px;
font-weight: bold;
color: #4c770c;
line-height: 1.6em;
}
#title span {
color: #666666;
}
#header {
float: left;
clear: left;
width: 483px;
height: 191px;
background: url(cooking-images/header.jpg) no-repeat;
}
#header_slogan {
width: 483px;
float: left;
margin-top: 162px;
color: #000;
font-weight: bold;
text-align: center;
}
#left_content {
float: left;
margin: 30px 30px 30px 30px;
padding-left: 10px;
padding-bottom: 10px;
width: 413px;
text-align: justify;
}
.service {
font-weight: bold;
font-size: 14px;
color:#427707;
height: 31px;
padding-top: 20px;
padding-left: 55px;
background: url(cooking-images/photo1.jpg) no-repeat;
}
.aboutus {
font-weight: bold;
font-size: 14px;
color:#427707;
height: 30px;
padding-top: 20px;
padding-left: 70px;
background: url(cooking-images/photo2.jpg) no-repeat;
}
#right_column {
float: right;
width: 287px;
}
.domain {
float: left;
width: 267px;
padding-top: 55px;
padding-left: 20px;
background: #FFFFFF;
color:#006633;
height: 20px;
}
#menucolumn {
float: left;
background: #3a3f3a;
height: 189px;
width: 287px;
border-bottom: solid 1px #547d16;
border-top: solid 2px #547d16;
}
.menu_list {
float: left;
width: 230px;
padding-left: 25px;
}
.menu_list ul {
list-style-type: none;
margin: 10px;
padding: 0;
width: 213px;
}
.menu_list li a {
display: block;
height: 24px;
padding-top: 4px;
color: #edf1e8;
padding-left: 50px;
background: url(cooking-images/menu_button.jpg);
}
.menu_list li a:hover, .menu_list li .current {
background: url(cooking-images/menu_hover.jpg);
}
#right_content {
float: left;
width: 200px;
padding-left: 27px;
padding-bottom: 20px;
text-align: justify;
}
#right_content ul {
list-style-type: disc;
}
#right_content a{
font-weight: normal;
color: #333333;
text-decoration: underline;
line-height: 20px;
}
#right_content a:hover {
text-decoration: underline;
}
#contact {
width: 225px;
padding-left: 30px;
padding-top: 10px;
height: 93px;
float: left;
color: #fff;
border-top: solid 3px #FFFFFF;
background: url(cooking-images/contact_bg.jpg) repeat-x;
}
#contact img {
float: right;
}
.special {
float: left;
width: 180px;
}
#footer {
clear: both;
width: 770px;
height: 32px;
padding-top: 20px;
text-align: center;
background: #545e54;
font-weight: bold;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="left_column">
<div id="title">COOKING<span> WEBSITE</span></div>
<div id="header">
<div id="header_slogan">YOUR COMPANY SLOGAN TEXT GOES HERE</div>
</div>
<div id="left_content">
<h1>WELCOME<br />
<span>FREE COOKING WEBSITE LAYOUT</span></h1>
<p>This free CSS layout is provided by TemplateMo.com. You may download, modify and use this layout for your websites. It would be helpful if you put a credit link back to TemplateMo.com website. Thank you.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est.</p>
<div class="service">ABOUT OUR SERVICES</div>
<p>Cras sed leo tempor neque placerat pretium. Curabitur nec odio. Phasellus tincidunt, tortor lacinia blandit commodo, nunc augue mattis eros, ut convallis est augue vel orci. Nunc ante erat, varius eu, luctus ac, tristique nec, justo. Fusce dignissim eros ac massa. Phasellus ligula augue, vestibulum in, cursus non, euismod et, pede. </p>
<div class="aboutus">WHO WE ARE</div>
<p>Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus.</p>
</div>
</div>
<div id="right_column">
<div class="domain">http://www.yourcompany.com</div>
<div id="menucolumn">
<div class="menu_list">
<ul>
<li><a href="http://www.free-css.com/">HOMEPAGE</a></li>
<li><a href="http://www.free-css.com/">SPECIALITY RECIPES</a></li>
<li><a href="http://www.free-css.com/">COOKIES & DESSERTS</a></li>
<li><a href="http://www.free-css.com/">VEGETARIAN FOOD</a></li>
<li><a href="http://www.free-css.com/">COOKING TIPS</a></li>
<li><a href="http://www.free-css.com/">CONTACT US</a></li>
</ul>
</div>
</div>
<div id="right_content">
<h2>FEATURED TOPICS</h2>
<ul>
<li><a href="http://www.free-css.com/">Health and Nutrition</a></li>
<li><a href="http://www.free-css.com/">Soups and Salads</a></li>
<li><a href="http://www.free-css.com/">Breakfast Recipes</a></li>
<li><a href="http://www.free-css.com/">Vegetarian Foods</a></li>
<li><a href="http://www.free-css.com/">Cooking Tools</a></li>
</ul>
<h2>NEWS & EVENTS</h2>
<p><img src="cooking-images/photo3.jpg" alt="" width="183" height="70" /></p>
<p><strong>Cooking Show (24-12-2020</strong>)<br />
Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
<p><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/cooking-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
<div id="contact"> <strong>QUICK CONTACT</strong> <img src="cooking-images/contact.png" alt="" width="46" height="73" /><br />
Tel: 000-200-0022<br />
Fax: 001-100-0011<br />
Email: info [at] templatemo.com<br />
</div>
</div>
<div id="footer">Copyright Your Company Name - Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
</div>
</body>
</html>
Related examples in the same category