luxury-restaurant
<!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>Luxury Restaurant</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#540219; color:#fdf4b5; font:10px/14px Tahoma, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px; height:0}
p a{font:10px/14px Tahoma, sans-serif; color:#540219; text-decoration:none;}
p a:hover{ color:#FFF; text-decoration:none;}
.headline{font:12px/14px Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold}
.headline2{font:11px/14px Arial, Helvetica, sans-serif; color:#fdf4b5;}
#container{width:775px; position:relative; margin:0 auto; background:url(luxury-restaurant-images/b_header.jpg) 0 0 no-repeat; border:#64090e 1px solid}
/* HEADER */
#header{width:775px; height:301px; position:relative;}
#header img#logo{position:absolute; top:12px; left:169px}
#header img#slogan{position:absolute; top:190px; left:106px}
#header ul.menu{position:absolute; top:120px; left:101px; width:600px}
#header ul.menu li{height:15px; margin-right:17px; float:left}
#header ul.menu li a{height:15px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:15px;}
#header ul.menu li.btn_1 a{width:63px; background:url(luxury-restaurant-images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:63px; background:url(luxury-restaurant-images/btn_1_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_2 a{width:70px; background:url(luxury-restaurant-images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:70px; background:url(luxury-restaurant-images/btn_2_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_3 a{width:37px; background:url(luxury-restaurant-images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:37px; background:url(luxury-restaurant-images/btn_3_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_4 a{width:52px; background:url(luxury-restaurant-images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:52px; background:url(luxury-restaurant-images/btn_4_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_5 a{width:77px; background:url(luxury-restaurant-images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:77px; background:url(luxury-restaurant-images/btn_5_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_6{margin-right:0}
#header ul.menu li.btn_6 a{width:64px; background:url(luxury-restaurant-images/btn_6.gif) 0 0 no-repeat; }
#header ul.menu li.btn_6 a:hover{width:64px; background:url(luxury-restaurant-images/btn_6_over.gif) 0 0 no-repeat;}
#header ul.menu li.line{width:7px; background:url(luxury-restaurant-images/bullet1.gif) 0 4px no-repeat}
/* CONTENT */
#content{width:775px; position:relative; background:url(luxury-restaurant-images/b_content.gif) 0 0 repeat-y;}
#leftPan{width:275px; float:left; margin:21px 22px 0 105px; display:inline}
#rightPan{width:280px; float:left; margin:21px 0 0 0; display:inline}
#welcome{margin:0 0 30px 0;}
#welcome h2{height:19px; position:relative; background:url(luxury-restaurant-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:12px}
#welcome img{float:left; margin-right:11px;}
#welcome p{float:left; width:190px}
#services h2{height:19px; position:relative; background:url(luxury-restaurant-images/h_services.gif) 0 0 no-repeat; margin-bottom:8px}
#services p{display:block; margin-bottom:13px}
#services ul{width:125px;}
#services ul li{font:10px/14px Tahoma, sans-serif; background:url(luxury-restaurant-images/bullet2.gif) 0 4px no-repeat; padding-left:17px; height:18px;}
#services ul li a{color:#fff; text-decoration:none;}
#services ul li a:hover{color:#fff; text-decoration:underline;}
#services ul#u01{float:left; margin:0 15px 0 6px;}
#services ul#u02{float:left;}
#recipes h2{height:19px; position:relative; background:url(luxury-restaurant-images/h_recipes.gif) 0 0 no-repeat; margin-bottom:8px}
#recipes p.headline2{display:block; margin-bottom:10px; margin-left:5px}
#recipes .recipes_topic{margin-bottom:10px; margin-left:5px}
#recipes .recipes_topic img{float:left; margin-right:12px}
#recipes .recipes_topic p{float:left; width:188px}
#content .clear#end{height:15px}
/* FOOTER */
#footer{height:60px; clear:both; width:775px; background: url(luxury-restaurant-images/b_footer.gif) 0 0 repeat-x}
#footer p{padding: 22px 0 0 0; font:10px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:10px/16px Tahoma, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#fff}
</style>
</head>
<body>
<div id="container">
<div id="header"> <img src="luxury-restaurant-images/logo.jpg" width="438" height="93" alt="" id="logo" /> <img src="luxury-restaurant-images/slogan.gif" width="190" height="81" alt="" id="slogan" />
<ul class="menu">
<li class="btn_1"><a href="#">home page</a></li>
<li class="line"></li>
<li class="btn_2"><a href="#">our history</a></li>
<li class="line"></li>
<li class="btn_3"><a href="#">menu</a></li>
<li class="line"></li>
<li class="btn_4"><a href="#">specials</a></li>
<li class="line"></li>
<li class="btn_5"><a href="#">reservations</a></li>
<li class="line"></li>
<li class="btn_6"><a href="#">contacts</a></li>
</ul>
</div>
<div id="content">
<div id="leftPan">
<div id="welcome">
<h2></h2>
<img src="luxury-restaurant-images/img_welcome.jpg" width="72" height="72" alt="" />
<p><span class="headline">Morbi volutpat leo in ligula.</span><br />
Donec varius, erat in placerat pharetra, lorem est gravida erat, nec accumsan turpis erat sed velit. Duis malesuada, lacus sit amet dictum lobortis <a href="#">| more</a></p>
<div class="clear"></div>
</div>
<div id="services">
<h2></h2>
<p class="headline2">Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et nisi bibendum sagittis. Fusce elit ligula.</p>
<ul id="u01">
<li><a href="#">Donec varius, erat in </a></li>
<li><a href="#">placerat pharetra, </a></li>
<li><a href="#">lorem est gravida erat, </a></li>
<li><a href="#">nec accumsan turpis </a></li>
<li><a href="#">erat sed velit. Duis </a></li>
<li><a href="#">malesuada, lacus sit </a></li>
</ul>
<ul id="u02">
<li><a href="#">Donec varius, erat in </a></li>
<li><a href="#">placerat pharetra, </a></li>
<li><a href="#">lorem est gravida erat, </a></li>
<li><a href="#">nec accumsan turpis </a></li>
<li><a href="#">erat sed velit. Duis </a></li>
<li><a href="#">malesuada, lacus sit </a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="rightPan">
<div id="recipes">
<h2></h2>
<p class="headline2">Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et nisi bibendum sagittis. Fusce elit ligula.</p>
<div class="recipes_topic"> <img src="luxury-restaurant-images/img_recipes.jpg" width="72" height="72" alt="" />
<p><span class="headline">Morbi volutpat leo in ligula.</span> <br />
onec varius, erat in placerat pharetra, lorem est gravida erat, nec accumsan turpis erat sed velit. Duis malesuada, lacus sit amet dictum lobortis <a href="#">| more</a></p>
<div class="clear"></div>
</div>
<div class="recipes_topic"> <img src="luxury-restaurant-images/img_recipes-05.jpg" width="72" height="72" alt="" />
<p><span class="headline">Nunc egestas mauris ac leo</span> <br />
onec varius, erat in placerat pharetra, lorem est gravida erat, nec accumsan turpis erat sed velit. Duis malesuada, lacus sit amet dictum lobortis <a href="#">| more</a></p>
<div class="clear"></div>
</div>
<div class="recipes_topic"> <img src="luxury-restaurant-images/img_recipes-06.jpg" width="72" height="72" alt="" />
<p><span class="headline">Morbi volutpat leo in ligula.</span> <br />
onec varius, erat in placerat pharetra, lorem est gravida erat, nec accumsan turpis erat sed velit. Duis malesuada, lacus sit amet dictum lobortis <a href="#">| more</a></p>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear" id="end"></div>
</div>
<div id="footer">
<p><a href="#">HOME</a> | <a href="#">OUR HISTORY</a> | <a href="#">MENU</a> | <a href="#">SPECIALS</a> | <a href="#">RESERVATIONS</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
Copyright © Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category