foodsonline : Food « Templates « HTML / CSS






foodsonline

     

<!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>FoodsOnline</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
   margin:0;
   font-family:"trebuchet MS";
   font-size:11px;
   color:#000000;
   font-weight:normal;
   background:url(foodsonline-images/top_bg.gif) repeat-x top;
}
h1,h2,h3,h4,p {
   margin:0;
   line-height:normal;
   padding:0;
}
a {
   text-decoration:none;   
}
#main {
    margin: 0 auto;
  width:963px;
}
#header{
   height:92px;
   background:url(foodsonline-images/food_top.jpg) no-repeat right;
   margin-right:260px;
}
#header h1 {
    font-size:30px;
  float:left;
  padding-top:35px;
}
#header h1 span.green{
    font-size:30px;
  color:#52B700;

}
#conts {
   margin:0;
   clear:both;
}
#leftCol {
    width:738px;
  float:left;
  background:url(foodsonline-images/content_bg.gif) repeat-x top;
  }
  #topNav {
   margin: 0 auto;
   width:690px;
   margin-top:50px;
   height:75px;
  }
    #topNav a{
   margin: 0;
   font-size:18px;
   color:#000000;
     padding-right:30px;
   height:60px;
   float:left;
   background:url(foodsonline-images/nav_line.gif) no-repeat  left top;
   padding-left:10px;
  }
      #topNav a span{
      display:block;
      font-size:11px;
      text-align:justify;
      line-height:1.0em;
      width:100px;
  }     
  #topNav a.spacer1 {
  width:90px;
  }
    #topNav a.spacer2 {
  width:80px;
  }
      #topNav a.spacer3 {
  width:80px;
  }
        #topNav a.spacer4 {
  width:130px;
  }
          #topNav a.spacer5 {
  width:100px;
  }
  #topNav a:hover{
    color:#CE1C01;
}
  #banner {
  background:url(foodsonline-images/banner_bg.jpg) no-repeat;
  height:169px;
  }
  #banner h1 {
  font-size:30px;
   color:#52B700;
   padding-left:20px;
   padding-top:30px;
   margin:0;
  }
    #banner p {
         padding-left:20px;
     margin:0;
     display:block;
     width:290px;
  }
  #welcomeBlock-left {
  float:left;
  width:379px;
  margin-top:20px;
  margin-left:20px;
  }
  
  #welcomeBlock-left h3 {
  color:#D92001;
  font-size:21px;
  background:url(foodsonline-images/drop.gif) no-repeat left top;
  height:30px;
  padding-left:25px;
  padding-top:5px;
  
  }
  #welcomeBlock-left p.style1 {
    margin-left:25px;
    margin-top:10px;
  }
  #menu {
  margin: 20px auto;
  background:url(foodsonline-images/leftconts_bg.gif) no-repeat;
  width:326px;
  height:288px;
     }
     #menu h4{
         padding-left:20px;
    padding-top:10px;
    color:#fff;
    font-size:18px;
    font-weight:normal;
}
    
    .menuBox {
     margin-top:15px;
     height:85px;
    } 
    .menuBox .menu1 {
    background:url(foodsonline-images/menu1.gif) no-repeat;
    height:79px;
    float:left;
    width:141px;
    margin-left: 13px;
    }
        .menuBox .menu2 {
    background:url(foodsonline-images/menu2.gif) no-repeat;
    height:130px;
    float:left;
    width:141px;
    margin-left: 13px;
    }
     .menuBox .menuText {
      width:171px;
    float:left;
   }
        .menuBox .menuText p.head {
         font-size:12px;
         font-weight:bold;
   }
   #rightConts {
     float:left;
     width:200px;
   }
     #rightConts h3 {
  color:#D92001;
  font-size:21px;
  background:url(foodsonline-images/drop.gif) no-repeat left top;
  height:30px;
  padding-left:25px;
  padding-top:5px;
  
  }
  #onlineBlock-right {
      float:left;
      width:318px;
    margin-top:20px;
        padding-left:20px;
      background:url(foodsonline-images/right_conts_part.gif) repeat-y left;
  }
    #onlineBlock-right h3 {
  color:#D92001;
  font-size:21px;
  background:url(foodsonline-images/online_booking.gif) no-repeat left top;
  height:30px;
  padding-left:30px;
  padding-top:5px;
  
  }
  .bookingBox {
     margin-top:25px;
  }
  
#onlineBlock-right .bookingBox .box  {
  height:25px;
  clear:both;
}
#onlineBlock-right .bookingBox .box p,input {
  float:left;
}
#onlineBlock-right .bookingBox .box p {

 display:block;
 width:62px;
}
#mesg {
  margin:20px auto;
  background:url(foodsonline-images/message.gif) no-repeat;
  height:173px;
  
}
#mesg p  {
   display:block;
   width:195px;
   float:right;
   padding-right:10px;
}
#mesg p strong {
   font-size:12px;
}


  #rightCol {
    float:left;
    background:url(foodsonline-images/leftcol_bg.gif) no-repeat left 35px;    
    width:225px; 
    height:787px;
  }
  .top {
  margin-top:50px;
  background:url(foodsonline-images/leftcol_leaveas.gif) no-repeat 20px top;
  height:170px;
   
  }
  .bottom {
    padding-left:15px;
     padding-right:15px;
  }
    .bottom  h3{
    background:url(foodsonline-images/welcomeImg2.gif) no-repeat left top;
    padding-left:30px;
    border-bottom:solid 3px #000;
    height:20px;
     padding-bottom:5px;
     padding-top:5px;
  }
#footer {
         background:url(foodsonline-images/footer_bg.gif) repeat-x;
     height:81px;
     clear:both;
     padding-top:20px;
}
  .footLinks {
   margin: 0 auto;
   width:660px;
  }
      .footLinks a{
   font-size:16px;
   color:#D92004;
   font-weight:bold;
   padding-right:35px;
  }
        .footLinks a:hover{
      color:#FF3333;
  }


</style>


</head>
<body>
<div id="main">
  <div id="header">
    <h1>Foods<span class="green">Online</span></h1>
  </div>
  <div id="conts">
    <div id="leftCol">
      <div id="topNav"> <a href="http://www.free-css.com/" class="spacer1">ABOUT US <span>This is just a place holder to show </span></a> <a href="http://www.free-css.com/" class="spacer2">MENU <span>This is just a place holder to show </span> </a> <a href="http://www.free-css.com/" class="spacer3">SERVICES <span>This is just a place holder to show </span> </a> <a href="http://www.free-css.com/" class="spacer4">SPECIAL OFFERS <span>This is just a place holder to show </span> </a> <a href="http://www.free-css.com/" class="space5">CONTACTS <span>This is just a place holder to show </span> </a></div>
      <div id="banner">
        <h1 class="green">Slogan Goes Here</h1>
        <p>Small details about slogan cn be placed here.Add few text line as the product of menu detil herefew more text can be plced in betwen theselines.Few more lines here.</p>
      </div>
      <div id="welcomeBlock-left">
        <h3> Welcome </h3>
        <p class="style1"> Don't forget to check free website templates every day, because we add a new free website template almost daily. </p>
        <p class="style1">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 class="style1">This is just a place holder so you can see how the site would look like.</p>
        <div id="menu">
          <h4>Special Menu</h4>
          <div class="menuBox">
            <div class="menuText">
              <p class="head">Menu1</p>
              If you're having problems editing the template ask for help on the forum.</div>
            <div class="menu1"></div>
          </div>
          <div class="menuBox">
            <div class="menuText">
              <p class="head">Menu2</p>
              If you're having problems editing the template ask for help on the forum.</div>
            <div class="menu2"></div>
          </div>
        </div>
      </div>
      <div id="onlineBlock-right">
        <h3>Online Booking</h3>
        <div class="bookingBox">
          <div class="box">
            <p>Name</p>
            <input type="text" name="textfield" id="textfield" />
          </div>
          <div class="box">
            <p>E-mail</p>
            <input type="text" name="textfield" />
          </div>
          <div class="box">
            <p>Phone</p>
            <input type="text" name="textfield"  />
          </div>
          <div class="box">
            <p>Date</p>
            <input type="text" name="textfield"  />
          </div>
          <div class="box">
            <p>Members</p>
            <input type="text" name="textfield"  />
          </div>
          <div class="box">
            <p>Time</p>
            <input type="text" name="textfield" />
          </div>
          <div class="box">
            <p>&nbsp;</p>
            <select name="e">
              <option value="dinner">Dinner</option>
              <option value="drinks">Drinks</option>
            </select>
          </div>
          <div class="box">
            <p>&nbsp;</p>
            <img src="foodsonline-images/button.gif" alt="" /> </div>
        </div>
        <div id="mesg">
          <p><strong>Aliquam erat volutpat.</strong></p>
          <p>Even more websites all about website templates on Just Web Templates.</p>
          <p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
        </div>
      </div>
    </div>
    <div id="rightCol">
      <div class="top"><img src="foodsonline-images/menu.gif" alt="" /></div>
      <div class="bottom">
        <h3>What is new</h3>
        <p>Don't forget to check free website templates every day, because we add a new free website template almost daily. You can remove any link to our websites from this template you're free to use the template without linking back to us. This is just a place holder so you can see how the site would look like.</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. This is just a place holder so you can see how the site would look like.You can remove any link to our websites from this template you're free to use the template without linking back to us. This is just a place holder so you can see how the site would look like.</p>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="footLinks"> <a href="http://www.free-css.com/" class="space">ABOUT US</a> <a href="http://www.free-css.com/" class="space">MENU</a> <a href="http://www.free-css.com/" class="space">SERVICES</a> <a href="http://www.free-css.com/" class="space">SPECIAL OFFERS</a> <a href="http://www.free-css.com/" class="space">CONTACTS</a>
      <p>Site Usage Agreement | Privacy Policy | Terms and Conditions | Contact Us  2001-2008 Designed by <a href="http://www.elegant-templates.com">Elegant Templates</a>. </p>
    </div>
  </div>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.foodonline
2.foodplaza
3.foodresturant
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