chinese-cuisine
<!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>Chinese Cuisine</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 11px;
text-align: center;
background: url(chinese-cuisine-images/page_bg.jpg);
color: #6f6f6f;
}
html, body, #wrapper, h1, #nav-top, #nav-top li, #nav-left, #nav-top li {
margin: 0;
padding: 0;
list-style: none;
}
th, td {
font-size: 11px;
}
img { border: 0; }
#wrapper {
margin: 16px auto;
text-align: left;
width: 750px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0 0 0 0;
padding: 0;
}
h3 {
padding: 4px 0 0 0;
}
p {
margin: 1em 0;
padding: 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 1px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
line-height: 1px;
}
* html .clear {
margin-top: -5px;
margin-bottom: -4px;
}
.left {
float: left;
margin: 1px 8px 0px 0px;
}
.softright {
text-align: right;
}
.readmore {
text-align: right;
}
/* ***** */
body {
background: #5D1F1F;
color: #251200;
}
#wrapper {
width: 780px;
background: #AD803D;
}
a {
color: #422100;
}
a:hover {
color: #231201;
}
#body #events .readmore a, #body .readmore a, #hotstuff .readmore a {
color: #e2c3a5;
text-decoration: none;
}
#body .readmore a:hover, #body #events .readmore a:hover, #hotstuff .readmore a:hover {
text-decoration: underline;
}
/* header */
#header {
background: url(chinese-cuisine-images/header.jpg) top left no-repeat;
height: 299px; width: 100%;
margin: 0;
border-bottom: 1px solid white;
}
#header h1 {
text-align: right;
}
#header #nav {
font-size: 9px;
text-align: center;
background: #170E01;
color: #D4A66F;
font-weight: bold;
width: 489px;
position: absolute;
top: 86px;
left: 291px;
padding: 9px 0 10px 0;
margin: 0;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
#header #nav li {
display: inline;
}
#header #nav a {
color: #D4A66F;
text-decoration: none;
}
#header #nav a:hover {
color: #fff;
text-decoration: underline;
}
#header #welcome {
position: absolute;
top: 122px; left: 291px;
width: 470px; height: 173px;
overflow: auto;
}
#header #welcome h2 {
padding: 0.2em 0 0 0;
margin: 0;
line-height: 1;
}
#header #welcome p {
margin: 0.5em 0;
}
* html #header #welcome p {
margin: 0.5em 0;
}
#header #welcome p {
padding-left: 2em;
}
/* body */
#body {
position: relative;
color: #251200;
background: url(chinese-cuisine-images/body_bg.gif) repeat-y;
}
#body-i {
width: 100%;
background: url(chinese-cuisine-images/photo.jpg) top right no-repeat;
}
#body #hevents {
position: absolute;
top: 0; left: 291px;
}
* html #body #hevents {
position: relative;
top: 0; left: 0;
margin-top: -32px;
}
#body #specials {
float: left;
width: 286px;
margin-left: 2px;
display: inline;
}
#body #events {
float: left;
width: 235px;
margin-left: 10px;
display: inline;
}
#body .imagebox {
padding: 2px 8px 2px 100px;
margin: 2px 0;
background: #9b6f2d 4px no-repeat;
}
#body h3, #body p {
margin: 0 0 0.2em 0;
}
#body #events a {
color: #ce9b5e;
}
#body #events a:hover {
color: #fff;
}
#events .readmore {
margin-bottom: 0;
}
/* hotstuff */
#hotstuff {
width: 100%;
background: url(chinese-cuisine-images/hotstuff_bg.gif) repeat-y;
}
* html #hotstuff {
padding-bottom: 10px;
}
#hotstuff h2 {
background: #3b2000;
border-top: 1px solid #fff;
}
* html #hotstuff h2 {
width: 100%;
}
#hotstuff .imagebox {
padding: 2px 8px 2px 103px;
margin: 2px 0;
background: 4px no-repeat;
float: left;
width: 200px;
}
#hotstuff #hot-one { width: 180px; }
#hotstuff #hot-two { width: 140px; margin-left: 2px; }
#hotstuff #hot-three { width: 120px; margin-left: 2px; }
* html #hotstuff #hot-one { width: 290px; w\idth: 180px; }
* html #hotstuff #hot-two { width: 250px; w\idth: 140px; }
* html #hotstuff #hot-three { width: 230px; w\idth: 120px; }
#hotstuff h3, #hotstuff p {
margin: 0 0 0.2em 0;
}
* html #spacer {
margin-top: 8px;
}
/* footer */
#footer {
padding-bottom: 2em;
}
#footer, #footer a {
color: #986D6D;
}
#footer a:hover {
color: #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.free-css.com/"><img src="chinese-cuisine-images/logo.gif" alt="" /></a></h1>
<ul id="nav">
<li><a href="http://www.free-css.com/">HOME</a> | </li>
<li><a href="http://www.free-css.com/">RESTAURANT</a> | </li>
<li><a href="http://www.free-css.com/">MENUS</a> | </li>
<li><a href="http://www.free-css.com/">RESERVATIONS</a> | </li>
<li><a href="http://www.free-css.com/">EVENTS</a> | </li>
<li><a href="http://www.free-css.com/">CONTACT US</a></li>
</ul>
<!-- end nav -->
<div id="welcome">
<h2><img src="chinese-cuisine-images/title_welcome.gif" alt="" /></h2>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
</div>
<!-- end welcome -->
</div>
<!-- end header -->
<div id="body">
<div id="body-i">
<h2 id="hspecials"><img src="chinese-cuisine-images/title_menus.gif" alt="" /></h2>
<div id="specials">
<div style="background-image: url(chinese-cuisine-images/picture_1.jpg);" class="imagebox">
<h3><a href="http://www.free-css.com/">Menu Name</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<div style="background-image: url(chinese-cuisine-images/picture_2.jpg);" class="imagebox">
<h3><a href="http://www.free-css.com/">Menu Name</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<div style="background-image: url(chinese-cuisine-images/picture_3.jpg);" class="imagebox">
<h3><a href="http://www.free-css.com/">Menu Name</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
</div>
<!-- end specials -->
<h2 id="hevents"><img src="chinese-cuisine-images/title_events.gif" alt="" /></h2>
<div id="events">
<h3><a href="http://www.free-css.com/">02.04.2005</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
<h3><a href="http://www.free-css.com/">03.04.2005</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
<h3><a href="http://www.free-css.com/">04.04.2005</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
<h3><a href="http://www.free-css.com/">05.04.2005</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<!-- end events -->
<div class="clear" id="spacer"></div>
</div>
</div>
<!-- end body -->
<div id="hotstuff">
<h2><img src="chinese-cuisine-images/title_hot.gif" alt="" /></h2>
<div style="background-image: url(chinese-cuisine-images/picture_4.jpg);" id="hot-one" class="imagebox">
<h3><a href="http://www.free-css.com/">Today's Hot Item Name</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<div style="background-image: url(chinese-cuisine-images/picture_5.jpg);" id="hot-two" class="imagebox">
<h3><a href="http://www.free-css.com/">Today's Hot Item Name</a></h3>
<p>Some demo text goes here. Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<div style="background-image: url(chinese-cuisine-images/picture_6.jpg);" id="hot-three" class="imagebox">
<h3><a href="http://www.free-css.com/">Today's Hot Item Name</a></h3>
<p>Some demo text goes here. Some demo text goes here.</p>
<p class="readmore"><a href="http://www.free-css.com/">... more</a></p>
</div>
<div class="clear"></div>
</div>
<!-- end hotstuff -->
</div>
<!-- end wrapper -->
<div id="footer"> Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
<!-- end footer -->
</body>
</html>
Related examples in the same category