chinese-cuisine : Food « Templates « HTML / CSS

HTML / CSS » Templates » Food 
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;
}

{
  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;
}

{
  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.jpgtop 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.gifrepeat-y;
}

#body-i {
  width: 100%;
  background: url(chinese-cuisine-images/photo.jpgtop 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 {
  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.gifrepeat-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> &nbsp;|&nbsp; </li>
      <li><a href="http://www.free-css.com/">RESTAURANT</a> &nbsp;|&nbsp; </li>
      <li><a href="http://www.free-css.com/">MENUS</a> &nbsp;|&nbsp; </li>
      <li><a href="http://www.free-css.com/">RESERVATIONS</a> &nbsp;|&nbsp; </li>
      <li><a href="http://www.free-css.com/">EVENTS</a> &nbsp;|&nbsp; </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
1.foodonline
2.foodplaza
3.foodresturant
4.foodsonline
5.breakfast
6.beer-bongs
7.cooking
8.delicious-1
9.delicious-2
10.delicious-golden
11.delicious-v.1
12.deliciouslyblue
13.chocolate
14.culinary
15.ondieting_blue
16.ondieting_lime
17.ondieting_orange
18.ondieting_red
19.ondieting_teal
20.saltandsoap
21.saltpepper
22.steak-house
23.wine
24.strawberry
25.tomatoes
26.ilove-cocktail
27.madeofcheese
28.hotsause
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.