foodplaza
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to Food Plaza</title>
<style type='text/css'>
/* CSS Document */
body{
padding:0;
margin:0;}
form, div, p , ul, span, h2, h3, h4, h1,input, img{
padding:0;
margin:0;}
p{
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul{
list-style-type:none
}
img {
border:none;
}
.spacer{
font-size:0; line-height:0; clear:both;
}
/*---------------header-------------------------------*/
#main{
width:780px;
margin:0 auto 0 auto;
background:#FFFCEC;
}
#main #header{
position:relative;
width:780px;
height:286px;
background:url(images/header.jpg) no-repeat 0 89px;
}
#header a.title{
position:absolute;
left:23px;
top:37px;
width:228px;
height:25px;
display:block;
}
#header h1.title a{
display:block; text-decoration:none;
}
#header ul.nav{
position:absolute;
left:568px;
top:91px;
background:url(images/nav.gif) repeat-x 0 0 #FFFEE4;
width:213px;
padding:10px 0 18px 0;
margin:0;
}
#header ul.nav li{
background:url(images/h_line.gif) repeat-x left bottom;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#484848;
width:197px;
padding:5px 0 5px 0;
}
#header ul.nav li a{
background:url(images/arrow.gif) no-repeat 0 5px;
margin:0 0 0 15px;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#484848;
text-decoration:none;
padding:0 0 0 15px;
}
#header ul.nav li a:hover{
color:#000000;
}
/*------body-------*/
#main #left{
background:url(images/v_line.gif) repeat-y right top;
width:543px;
margin:0 0 0 0;
padding:18px 0 31px 23px;
float:left;
}
#left h2.welcome{
background:url(images/welcome.gif) no-repeat 0 0;
width:518px;
height:16px;
text-indent:-200000px;
}
#left p.weltxt{
font:12px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#3D3B45;
text-align:justify;
width:518px;
margin:18px 0 0 0;
}
#left p.weltxt a.more{
float:right;
padding:25px 0 21px 0;
color:#3D3B45;
text-decoration:none;
font-weight:bold;
}
#left p.weltxt a:hover{
color:#990000;
text-decoration:underline;
}
#left h2.resturent{
background: url(images/resturent.gif) no-repeat 0 0;
width:522px;
height:16px;
line-height:0;
font-size:0;
margin:0 0 0 0;
text-indent:-200000px;
clear:both;
}
#left div.menu{
background:url(images/menu_bg.gif) repeat-x 0 0;
width:520px;
height:104px;
padding:21px 0 0 7px;
}
#left div.menu ul.brown{
float:left;
width:94px;
margin:0 8px 30px 0;
display:block;
}
ul.brown li{
background:url(images/brown.gif) no-repeat 0 8px;
padding:0 0 13px 10px;
color:#3D3B45;
}
ul.brown li a{
text-decoration:none;
color:#3D3B45;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
}
ul.brown li a:hover{
color:#990000;
text-decoration:underline;
}
#left h2.order{
background:url(images/order.gif) no-repeat 0 0;
width:513px;
height:16px;
text-indent:-200000px;
clear:both;
}
#left ul.image{
margin:15px 0 0 0;
width:520px;
}
#left ul.image li{
height:153px;
width:95px;
text-align:center;
margin:0 6px 0 0 ;
background:url(images/order_now.gif) no-repeat 14px 134px;
float:left;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#3D3B45;
}
#left ul.image li span{
color:#B57D0A;
}
#left ul.image li a{
margin:0 0 0 0;
text-decoration:none;
color:#990000;
}
#left ul.image li a:hover{
color:#000000;
text-decoration:underline;}
/*------right----*/
#main #right{
width:200px;
background:url(images/right_bg.gif) repeat-x left bottom #FFFEE4;
float:left;
padding:17px 0 97px 13px;
}
#right h2.our{
background: url(images/our_service.gif) no-repeat 0 0;
width:112px;
height:15px;
text-indent:-200000px;
}
#right p.ourtxt{
font:12px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#3D3B45;
text-align:justify;
width:168px;
margin:18px 0 0 0;
}
#right img{
margin:13px 0 0 0;
}
#right p.border{
width:178px;
height:5px;
margin:23px 0 0 0;
font-size:0;
line-height:0;
background:#FCF2B8;
}
#right p.ourtxt span{
color:#8F1401;
font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma;
}
#right p.ourtxt a{
color:#B57D0A;
font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma;
text-decoration:underline;
}
#right p.ourtxt a:hover{
color:#000000;
}
/*----footer-----*/
#footer{
width:780px;
position:relative;
background:url(images/footer_bg.gif) repeat-x 0 0 #FDF6D2 ;
clear:both;
height:88px;
}
#footer ul.foot{
position:absolute;
top:21px;
left:140px;
width:522px;
}
#footer ul.foot li{
float:left;
margin:0 14px 0 0;
color:#232323;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
}
#footer ul.foot li a{
text-decoration:none;
text-transform:uppercase;
color:#232323;
}
#footer ul.foot li a:hover{
color:#990000;
}
#footer p{
position:absolute;
top:43px;
left:324px;
text-align:center;
color:#232323;
font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma;
}
#footer p a{
color:#232323;
font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma;
text-decoration:underline;
}
#footer p a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<!--main div start -->
<div id="main" >
<!--header -->
<div id="header">
<h1><a href="index.html" title="Food plazaa" class="title"><img src="images/title.gif" alt="Welcome to Food Plaza" title="Welcome to Food Plaza" width="228" height="25" /></a></h1>
<ul class="nav">
<li><a href="#" title="Home">HOME</a></li>
<li><a href="#" title="About us">ABOUT US </a></li>
<li><a href="#" title="Our services">OUR SERVICE</a></li>
<li><a href="#" title="Menu card">MENU CARD</a></li>
<li><a href="#" title="booking">BOOKING</a></li>
<li><a href="#" title="Price list">PRICE LIST</a></li>
<li><a href="#" title="Contact us">CONTACT US </a></li>
</ul>
</div>
<!--body start -->
<div id="left">
<h2 class="welcome">Welcome to our Food Plazaa</h2>
<p class="weltxt">
This is <strong>Food Plaza</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
<br /> This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
<a href="#" class="more">...read more</a></p>
<h2 class="resturent">Restaurant Menus</h2>
<div class="menu">
<ul class="brown">
<li><a href="#" title="Consectetur">Consectetur </a></li>
<li><a href="#" title="Adipisicing">Adipisicing </a></li>
<li><a href="#" title="Voluptate">Voluptate </a></li>
<li><a href="#" title="Deserunt">Deserunt </a></li>
</ul>
<ul class="brown">
<li><a href="#" title="Reprehenderit">Reprehenderit </a></li>
<li><a href="#" title="Commodo">Commodo</a></li>
<li><a href="#" title="Excepteur">Excepteur </a></li>
<li><a href="#" title="Magna">Magna </a></li>
</ul>
<ul class="brown">
<li><a href="#" title="Adipisicing">Adipisicing </a></li>
<li><a href="#" title="Deserunt">Deserunt </a></li>
<li><a href="#" title="Consectetur">Consectetur </a></li>
<li><a href="#" title="Voluptate">Voluptate </a></li>
</ul>
<ul class="brown">
<li><a href="#" title="Excepteur">Excepteur </a></li>
<li><a href="#" title="Magna">Magna</a></li>
<li><a href="#" title="Commodo">Commodo </a></li>
<li><a href="#" title="Excepteur">Excepteur </a></li>
</ul>
<ul class="brown">
<li><a href="#" title="Mollit anim">Mollit anim </a></li>
<li><a href="#" title="Sint occaecat">Sint occaecat</a></li>
<li><a href="#" title="Duis aute">Duis aute </a></li>
<li><a href="#" title="Cupidatat">Cupidatat </a></li>
</ul>
<br class="spacer" />
</div>
<h2 class="order">Order Online</h2>
<ul class="image">
<li><img src="images/image01.jpg" alt="pic01" title="pic01" /><br /><span>Rncididunt</span><br />Price : $ 5.11<br /><br />
<a href="#">Order Now</a></li>
<li><img src="images/image02.jpg" alt="pic02" title="pic02" width="95" height="91" /><br /><span>Rncididunt</span><br />Price : $ 5.69<br /><br />
<a href="#">Order Now</a></li>
<li><img src="images/image03.jpg" alt="pic03" title="pic03" width="95" height="91" /><br /><span>Rncididunt</span><br />Price : $ 5.55<br /><br />
<a href="#">Order Now</a></li>
<li><img src="images/image04.jpg" alt="pic04" title="pic04" width="95" height="91" /><br /><span>Rncididunt</span><br />Price : $ 5.32<br /><br />
<a href="#">Order Now</a></li>
<li><img src="images/image05.jpg" alt="pic05" title="pic05" width="95" height="91" /><br /><span>Rncididunt</span><br />Price : $ 5.25<br /><br />
<a href="#">Order Now</a></li>
</ul>
<br class="spacer" />
</div>
<!--right start -->
<div id="right">
<h2 class="our">Our Service</h2>
<p class="ourtxt"><strong>Ut enim ad</strong> minim veniam, quis nostrud exercitation ut aliquip ex ea commodo consequat.</p>
<img src="images/order_img.jpg" alt="Our Service01" title="Our Service01" />
<p class="ourtxt"><strong>Ut enim ad</strong> minim veniam, quis nostrud exercitation ut aliquip ex ea commodo consequat.</p>
<img src="images/order_img2.jpg" alt="Our Service02" title="Our Service02"/>
<p class="border"></p>
<p class="ourtxt"><strong>Phone Numbers:</strong><br />
<span>+55(0)777 8748200/+00400</span><br />
<strong>e-mail to:</strong><br />
<a href="#" title="mail to : info@foodplazaa.com">info@foodplazaa.com</a></p>
</div>
<!--footer -->
<div id="footer">
<ul class="foot">
<li><a href="#" title="HOME">HOME</a></li>
<li><a href="#" title="ABOUT US">ABOUT US</a> </li>
<li><a href="#" title="OUR SERVICE">OUR SERVICE</a></li>
<li><a href="#" title="MENU CARD">MENU CARD</a></li>
<li><a href="#" title="BOOKING">BOOKING</a></li>
<li><a href="#" title="PRICE LIST">PRICE LIST</a></li>
<li><a href="#" title="CONTUCT US">CONTUCT US</a> </li>
</ul>
<p>copyright information2007<br />
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
<br class="spacer" />
</div>
</body>
</html>
Related examples in the same category