foodonline : Food « Templates « HTML / CSS






foodonline

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Food Online</title>
<style type='text/css'>
html, body, form, h1, h2, h3, h4, ul, li {
  margin: 0;
  padding: 0;
}
h1 img {
  display: block;
}
img {
  border: 0;
}
a {
  color: #FF6600;
}
a:hover {
  color: #FFA405;
}
.left {
  float: left;
}
.right {
  float: right;
}
.more {
  text-align: right;
}
.clear {
  clear: both;
}

body {
  background: #2D0202;
  text-align: center;
  font: 11px arial, sans-serif;
  color: #F4C389;
  padding-bottom: 10px;
}

/** layout **/
#wrapper {
  text-align: left;
  margin: auto;
  width: 749px;
  position: relative;
  background: #7C0000 top right url(foodonline-images/header.jpg) no-repeat;
}
#logo {
  width: 357px;
  background: url(foodonline-images/logo.jpg) no-repeat;
  height: 185px;
  text-align: center;
}
#logo h1 {
  padding-top: 50px;
  color: #fff;
  font: bold 27px "arial black", arial, sans-serif;
}
#logo p {
  margin: 0em;
  padding-left: 50px;
  font: 17px "arial narrow", arial, sans-serif;
}

#nav li {
  list-style: none;
}
#nav-left {
  width: 178px;
}
#nav-left li {
  background: url(foodonline-images/nav_bg.jpg) repeat-x;
  font: 18px "arial narrow", arial, sans-serif;
  height: 62px;
  line-height: 62px;
  text-align: right;
}
#nav-left a {
  color: #fff;
  text-decoration: none;
  padding-right: 20px;
}
#nav-left .orange a {
  color: #FFC559;
}
#nav-left a:hover {
  text-decoration: underline;
}
#nav-right {
  position: absolute;
  top: 185px;
  left: 178px;
  width: 178px;
  border-left: 1px solid white;
}
#nav-right ul {
  text-align: right;
}
#nav-right li {
  font: 14px "arial narrow", arial, sans-serif;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid white;
  background: 152px 10px url(foodonline-images/arr.gif) no-repeat;
  padding-right: 40px;
}
#nav-right a {
  color: white;
  text-decoration: none;
}
#nav-right a:hover {
  text-decoration: underline;
}

/** body **/

#body {
  border-top: 1px solid white;
  padding-top: 20px;
}
#left {
  float: left;
  width: 352px;
  padding-left: 15px;
}
#right {
  float: right;
  width: 291px;
  padding-right: 37px;
}

#welcome {
  padding-left: 29px;
}

h2.guilded {
  background: bottom left url(foodonline-images/welcome_bg.gif) repeat-x;
  height: 20px;
  margin-bottom: 0.8em;
  font-weight: normal;
  font-size: 20px;
}
h2.guilded span {
  background: #7C0000 url(foodonline-images/h_glif.gif) no-repeat;
  padding-left: 38px;
  padding-right: 8px;
  padding-top: 2px;
  float: left;
}

.more a {
  color: #C47552;
  text-decoration: none;
  font-weight: bold;
}
.more a:hover {
  text-decoration: underline;
}

#chef {
  background: bottom left url(foodonline-images/pic_1.jpg) no-repeat;
  padding-left: 164px;
  padding-top: 47px;
}
#chef h2 {
  font: 17px "arial narrow", arial, sans-serif;
  background: bottom url(foodonline-images/divider.gif) repeat-x;
  padding-bottom: 5px;
  margin-left: -50px;
  padding-left: 70px;
  padding-right: 0;
}

p {
  margin: 1em 0;
  line-height: 1.1;
}

/** right **/

#booking {
  background: #911702;
  border: 1px solid #B43708;
  padding-bottom: 6px;
  margin-bottom: 1.1em;
}
#booking h2 {
  background: url(foodonline-images/h_booking_bg.jpg) repeat-x;
  border: 1px solid #7C0000;
  height: 27px;
  line-height: 27px;
  color: #660100;
  font-weight: normal;
  font-size: 16px;
  padding-left: 20px;
  margin: 4px 4px 10px 4px;
}
#booking th {
  text-align: left;
  padding-left: 20px;
  padding-right: 10px;
}
#booking td.submission {
  text-align: right;
}

#menu {
  background: bottom left url(foodonline-images/specials.jpg) no-repeat;
  border: 1px solid #97321D;
  padding-left: 60px;
  padding-right: 58px;
  padding-top: 22px;
}
#menu h2 {
  margin-left: -48px;
  font-weight: normal;
  color: #FF8A00;
  margin-bottom: 1em;
  font-size: 16px;
}
#menu form {
  text-align: center;
}
#menu p {
  margin: 1.3em 0;
  margin-left: -48px;
}

/** footer **/

#footer {
  text-align: center;
  background: url(foodonline-images/divider.gif) repeat-x;
  padding: 20px 20px 12px 20px;
  margin: 0 2em;
}
#footer li {
  list-style: none;
  display: inline;
}
#footer a {
  color: #E49E6F;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}

</style>


</head>
<body>
  <div id="wrapper">
    <div id="logo">
      <h1>Food Online</h1>
      <p>Next Food Network Star</p>
    </div>
    <div id="nav">
      <div id="nav-left">
        <ul>
          <li><a href="http://www.freewebsitetemplates.com">Home</a></li>
          <li class="orange"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
        </ul>
      </div>
      <div id="nav-right">
        <ul>
          <li><a href="http://www.freewebsitetemplates.com">About us</a></li>
          <li><a href="http://www.freewebsitetemplates.com">Menu</a></li>
          <li><a href="http://www.freewebsitetemplates.com">Services</a></li>
          <li><a href="http://www.freewebsitetemplates.com">Special offer</a></li>
        </ul>
      </div>
    </div>
    <div id="body">
      <div id="left">
        <div id="welcome">
          <h2 class="guilded"><span>Welcome</span></h2>
         <p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
 <p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
          <p>This is just a place holder so you can see how the site would look like.</p>
          <p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
        </div>
        <div id="chef">
          <h3>Aliquam erat volutpat.</h3>
          <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
          <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
          <p>&nbsp;</p>
          <p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
        </div>
      </div>
      <div id="right">
        <div id="booking">
          <h2>Online booking</h2>
          <form action="" method="get" accept-charset="utf-8">
            <table border="0" cellspacing="2" cellpadding="0">
              <tr><th>Name</th><td><input type="text" name="a" value="" class="text" /></td></tr>
              <tr><th>Email/Phone</th><td><input type="text" name="b" class="text" value="" /></td></tr>
              <tr><th>Date</th><td><input type="text" name="c" value="" class="text" /></td></tr>
              <tr><th>Members</th><td><input type="text" name="d" value="" class="text" /></td></tr>
              <tr><th>Time</th><td>
                <select name="e">
                  <option value="dinner">Dinner</option>
                  <option value="drinks">Drinks</option>
                </select>
              </td></tr>
              <tr><td class="submission" colspan="2"><input type="image" src="foodonline-images/submit-button.PNG" name="s" value="Submit"></td></tr> 

            </table>
          </form>
        </div>
        <div id="menu">
    
          <h2>Special menu</h2>
          <p> If you're having <br/>
        problems editing the <br/>template  ask for help <br/>
        on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.
      </p>
          <form action="" method="get" accept-charset="utf-8">
            <p style="margin-left:-200px;"><input type="image" src="foodonline-images/details-button.PNG" name="s" value="Details"></p>
          </form>
        </div>
    
      </div>
      <div class="clear">&nbsp;</div>
      <div id="footer">
        <ul>
          <li><a href="http://www.freewebsitetemplates.com">Home</a> | </li>
          <li><a href="http://www.freewebsitetemplates.com">About Us</a> | </li>
          <li><a href="http://www.freewebsitetemplates.com">Menu</a> | </li>
          <li><a href="http://www.freewebsitetemplates.com">Service</a> | </li>
          <li><a href="http://www.freewebsitetemplates.com">Special offer</a> | </li>
          <li><a href="http://www.freewebsitetemplates.com">Contact</a></li>
        </ul>
        <p>Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.</p>
      </div>
    </div>
  </div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.foodplaza
2.foodresturant
3.foodsonline
4.breakfast
5.chinese-cuisine
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