chocolate : Food « Templates « HTML / CSS






chocolate

     

<!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>
<title>Chocolate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */



/* CSS Document */


/* General */

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
font-size: 62.5%;
}

body {
height: 100%;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
background: #2B1300 url('chocolate-img/bg.gif') repeat 0 0;
min-width: 900px;
}

a:link, a:visited {
color: #A42A00;
text-decoration: underline;
font-weight: bold;
}

a:hover {
text-decoration: none;
}

.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}

.cleaning-box { 
min-height: 1px;
}

.cleaning-box:after {
display: block; 
clear: both; 
visibility: hidden; 
height: 0; 
font-size: 0; 
content: ' ';
}

.noscreen {
display: none;
}

.hidden { /* Skip menu */
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}


/* Wrapper */

.wrapper {
width: 900px;
margin: 115px auto 0 auto;
padding-bottom: 60px;
text-align: left;
position: relative;
}


/* Paragraphs, headings, ... */

p {
color: #A42A00;
line-height: 1.7;
}

h1, h1 a:link, h1 a:visited, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
letter-spacing: 1px;
}

h2, h3 {
color: #A42A00;
}

h1 {
font-size: 2.6em;
color: #EBD391;
margin-bottom: 10px;
}

h1 a:link, h1 a:visited {
color: #EBD391;
text-decoration: none;
}

h2 {
font-size: 1.8em;
margin-bottom: 8px;
}

h3 {
font-size: 1.5em;
}


/* Search form */

form.searching {
width: 201px;
position: absolute;
top: 6px;
right: 14px;
}

fieldset {
border: 0;
}

#picture-input {
position: absolute; 
top: 0;
left: 0;
overflow: hidden;
width: 162px;
height: 26px;
background: url('chocolate-img/input-bg.png') 0 0 no-repeat;
border: 0;
}

#picture-input input {
position: relative;
top: 5px;
left: 37px;
width: 123px;
border: 0;
letter-spacing: 1px;
background-color: #FFF4D5
}

form.searching input.hledat {
letter-spacing: 1px;
padding-left: 0;
font-weight: bold;
color: #FFFFFF;
position: absolute;
top: 0;
right: 0;
}

form.searching label {
display: none;
}


/* Menu */

.menu {
list-style: none;
width: 870px;
margin: 5px auto 0 auto;
padding-left: 30px;
background: #682E00 url('chocolate-img/menu-bg.gif') repeat-x 0 0;
}

.menu li {
float: left;
display: inline;
line-height: 55px;
margin-right: 2.1em;
padding-right: 2.1em;
background: url('chocolate-img/li-bg.gif') no-repeat 100% 50%;
white-space: nowrap;
}

.menu li a, .menu li a:visited {
float: left;
display: inline;
color: #EBD391;
font-weight: normal;
padding: 0 7px;
}

.menu li a:hover {
color: #FFF4D3;
}

.menu li a.active {
background: url('chocolate-img/li-hover.gif') repeat-x 0 50%;
text-decoration: none;
}

.menu li.last {
background: none;
}


/* Content */

.content {
width: 900px;
margin: 0 auto;
background-color: #FFF4D5;
}

.column-left {
float: left;
width: 63%;
}

.column-left-in {
margin: 1.7em 1em 3em 1.8em;
}

p.text-content:first-letter {
font-size: 1.4em;
font-weight: bold;
line-height: 0.9;
}

.column-left h3 {
margin: 17px 0 12px 0;
}

.column-right {
float: right;
width: 36%;
}

.column-right-in {
margin: 1.7em 1em 3em 1em;
}

#board-top {
width: 295px;
height: 25px;
background: #8B5F26 url('chocolate-img/board-top.gif') no-repeat 0 0;
}

#board {
background-color: #8B5F26;
width: 295px;
}

.board-in {
margin: 0 1.8em;
padding: 0.7em 0;
}

#board-bottom {
width: 295px;
height: 21px;
background: #8B5F26 url('chocolate-img/board-bottom.gif') no-repeat 0 0;
}

#board h3 {
font-size: 1.35em;
color: #FFF9E7;
}

#board dl {
color: #FFF9E7;
margin-top: 13px;
}

#board dt {
font-size: 0.95em;
font-weight: bold;
margin-bottom: 2px;
}

#board dd {
margin-bottom: 17px;
}

#board dd a, #board dd a:visited  {
color: #FFF9E7;
font-weight: normal;
text-decoration: none;
line-height: 1.3;
margin-bottom: 17px;
}

#board dd a:hover {
text-decoration: underline;
}

.divider {
width: 295px;
height: 13px;
background: #8B5F26 url('chocolate-img/divider.gif') no-repeat 0 0;
margin: -5px 0 16px 0;
}

.paper {
width: 295px;
height: 210px;
background: #8B5F26 url('chocolate-img/paper.gif') no-repeat 0 0;
margin-top: 4px;
padding-bottom: 9px;
}

.paper-in {
margin: 0 2.5em;
padding-top: 1.7em;
}

#board address {
font-style: normal;
font-weight: bold;
color: #803900;
line-height: 1.45;
background-color: #FFFFFF;
}


/* Lists */

ul.we-do {
list-style: none;
margin-bottom: 30px;
}

ul.we-do li {
background: url('chocolate-img/bullet.gif') no-repeat 0 1px;
padding: 0 0 1px 27px;
margin-bottom: 10px;
color: #A42A00;
line-height: 1.3;
}


/* Image gallery */

.gallery {
width: 99%;
}

.photo {
float: left;
display: inline;
width: 174px;
height: 170px;
overflow: auto;
position: relative;
}

.photo a img {
margin: 0 auto 1px auto;
border: 4px solid #DEBE81;
}

.photo a:hover img {
border: 4px solid #A42A00;
}

.photo p, .photo p a, .photo p a:visited {
margin-left: 1px;
}


/* Footer */

.footer {
width: 900px;
height: 47px;
margin: 0 auto;
background: #893D00 url('chocolate-img/footer-bg.gif') repeat-x 0 0;
border-top: 2px solid #612900;
}

.footer p {
color: #FFF4D5;
line-height: 47px;
}

.footer p a, .footer p a:visited {
color: #FFF4D5;
font-weight: normal;
}

.footer p.text-left {
float: left;
width: 415px;
margin-left: 27px;
display: inline;
}

.footer p.text-right {
float: right;
text-align: right;
width: 415px;
margin-right: 27px;
display: inline;
}

#printer {
background: url('chocolate-img/printer.gif') no-repeat 0 bottom;
padding-left: 27px;
}


p#subfooter {
color: #C7BEA8;
font-size: 0.95em;
text-align: right;
margin: 7px 4px 0 0;
}

p#subfooter a, p#subfooter a:visited {
color: #C7BEA8;
}

p#subfooter a:hover {
color: #FFF4D5;
}

#light-link {
font-weight: normal;
}


</style>


<!--[if IE]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen, projection, tv" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie6.css" media="screen, projection, tv" /><![endif]-->
<link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
</head>
<body>
<div id="top">&nbsp;</div>
<div class="wrapper">
  <h1><a href="http://www.free-css.com/">COMPANY NAME</a></h1>
  <a href="#skip-menu" class="hidden">Skip menu</a>
  <ul class="menu cleaning-box">
    <li><a href="http://www.free-css.com/" class="active">Home</a></li>
    <li><a href="http://www.free-css.com/">About</a></li>
    <li><a href="http://www.free-css.com/">Services</a></li>
    <li><a href="http://www.free-css.com/">Portfolio</a></li>
    <li><a href="http://www.free-css.com/">Price list</a></li>
    <li class="last"><a href="http://www.free-css.com/">Contact</a></li>
  </ul>
  <hr class="noscreen" />
  <a name="skip-menu"></a>
  <div class="content">
    <div class="column-left">
      <div class="column-left-in">
        <h2>Welcome to our website</h2>
        <p class="text-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla aliquet tincidunt neque. In in ante. Donec non quam sed lacus tincidunt aliquet. Nullam varius lorem a sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas rhoncus lacinia lectus.</p>
        <br />
        <p class="text-content">Morbi pede risus, mattis vel, mattis sit amet, semper in, dui. Suspendisse nisl metus, commodo ut, tempor sed, <a href="http://www.free-css.com/">malesuada sagittis</a>, pede. Suspendisse in elit nec diam aliquet fermentum. Aliquam erat volutpat. Integer et enim a lorem lacinia convallis. Vestibulum et ipsum. Pellentesque semper. Praesent et metus. Donec dolor.</p>
        <h3>What we do&hellip;</h3>
        <ul class="we-do">
          <li>Lorem <strong>ipsum dolor</strong> sit amet, consectetuer adipiscing elit.</li>
          <li>Proin lacus. Class <strong>aptent taciti</strong> sociosqu ad litora torquent per&hellip;</li>
          <li>Suspendisse potenti. Fusce felis.</li>
          <li>Ut lorem est, vestibulum nec, aliquam <strong>ullamcorper</strong>, elementum<br />
            eu, diam. Ut <strong>venenatis pede at sapien</strong> egestas dictum.</li>
          <li>In hac <strong>habitasse platea</strong> dictumst.</li>
          <li>Nunc metus nisi, blandit ut, sodales non, <strong>porta</strong>.</li>
        </ul>
        <h3>Examples of our work</h3>
        <div class="gallery">
          <div class="photo"> <a href="http://www.free-css.com/"><img src="chocolate-img/foto.jpg" alt="" width="155" height="110" /></a>
            <p><a href="http://www.free-css.com/">Example 1</a></p>
          </div>
          <div class="photo"> <a href="http://www.free-css.com/"><img src="chocolate-img/foto.jpg" alt="" width="155" height="110" /></a>
            <p><a href="http://www.free-css.com/">Example 2</a></p>
          </div>
          <div class="photo"> <a href="http://www.free-css.com/"><img src="chocolate-img/foto.jpg" alt="" width="155" height="110" /></a>
            <p><a href="http://www.free-css.com/">Example 3</a></p>
          </div>
          <div class="cleaner">&nbsp;</div>
        </div>
      </div>
    </div>
    <hr class="noscreen" />
    <div class="column-right">
      <div class="column-right-in">
        <div id="board-top">&nbsp;</div>
        <div id="board">
          <div class="board-in">
            <h3>News and actual offers</h3>
            <dl>
              <dt>25. 4. 08</dt>
              <dd><a href="http://www.free-css.com/">Sed porttitor purus non libero. Aliquam pulvinar, sem vitae euismod tempus, quam orci&hellip;</a></dd>
              <dt>12. 4. 08</dt>
              <dd><a href="http://www.free-css.com/">Sed porttitor purus non libero. Aliquam pulvinar, sem vitae euismod tempus, quam orci&hellip;</a></dd>
            </dl>
          </div>
          <div class="divider">&nbsp;</div>
          <div class="board-in">
            <h3>Contact information</h3>
          </div>
          <div class="paper">
            <div class="paper-in">
              <address>
              Company name<br />
              Street 1212/36<br />
              500003 City Park<br />
              <br />
              E-mail: info&#64;
              
              company.com<br />
              Fax: 0 123 456 789<br />
              Tel.: 0 123 456 789
              </address>
            </div>
          </div>
        </div>
        <div id="board-bottom">&nbsp;</div>
      </div>
    </div>
    <div class="cleaner">&nbsp;</div>
  </div>
  <hr class="noscreen" />
  <div class="footer">
    <p class="text-left">&copy; <a href="http://www.free-css.com/">Company name</a>, 2008. All rights reserved.</p>
    <p class="text-right"><a id="printer" href="http://www.free-css.com/" onclick="print();">Print</a> &nbsp;|&nbsp; <a href="#top">Top</a> &uarr;</p>
  </div>
  <p id="subfooter"><a href="http://www.free-css.com/" id="light-link">Mantis-a templates</a>, tip <a href="http://www.photoextract.com/cs/">Fotoaparty a fotogalerie</a></p>
  <form class="searching" action="#">
    <fieldset>
    <label>Search form</label>
    <div id="picture-input">
      <input type="text" class="search" />
    </div>
    <input class="hledat" type="image" src="chocolate-img/search-button.gif" name="" value="Search" alt="OK" />
    </fieldset>
  </form>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.foodonline
2.foodplaza
3.foodresturant
4.foodsonline
5.breakfast
6.chinese-cuisine
7.beer-bongs
8.cooking
9.delicious-1
10.delicious-2
11.delicious-golden
12.delicious-v.1
13.deliciouslyblue
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