delicious-v.1 : Food « Templates « HTML / CSS

HTML / CSS » Templates » Food 
delicious-v.1
    

<!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>Delicious 1</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: #1A1A1A url('delicious-v.1-img/bg.gif') repeat-x 0 0;
min-width: 900px;
}

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

a:hover {
text-decoration: none;
}

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

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


/* Paragraphs, headings, ... */

{
line-height: 170%;
margin-bottom: 10px;
color: #FFFFFF;
}

h1 {
font-size: 2.4em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
text-align: left;
padding: 23px 0 4px 0;
letter-spacing: 1px;
background: url('delicious-v.1-img/h1-bg.gif') repeat-x 0 100%;
width: 60%;
}

h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}

h1 span {
color: #FFCB5C;
}

h2 {
font-size: 1.6em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FFFFFF;
text-align: left;
margin: 3px 0 0 0;
letter-spacing: 1px;
}

h3 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FFFFFF;
letter-spacing: 1px;
margin-bottom: 8px;
background: url('delicious-v.1-img/h3-bg.gif') no-repeat center;
padding-left: 27px;
}

address {
}


/* Header */

#header {
width: 900px;
height: 157px;
margin: auto;
position: relative;
background: url('delicious-v.1-img/hdbg.gif') repeat-x 0 0;
text-align: left;
}


/* Search form */

form.searching {
width: 209px;
position: absolute;
top: 19px;
right: -7px;
}

form.searching fieldset {
border: 0;
}

#picture-input {
position: absolute; 
top: 0;
left: 0;
overflow: hidden;
width: 171px;
height: 28px;
background: #FFDDDD url('delicious-v.1-img/input-bg.gif') no-repeat 0 0;
border: 0;
margin-top: 1px;
}

#picture-input input {
position: relative;
top: 5px;
left: 10px;
width: 160px;
border: 0;
letter-spacing: 1px;
background-color: #ffdddd;
}

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-box {
background: #323232 url('delicious-v.1-img/menu-bg.gif') repeat-x 0 0;
border-bottom: 1px solid #3B3B3B;
}

#menu {
width: 900px;
margin: auto;
background: #323232 url('delicious-v.1-img/menu-bg.gif') repeat-x 0 0;
}

#menu li {
display: inline;
list-style-type: none;
text-align: center;
}

#menu li a {
font-size: 1.1em;
color: #FFFFFF;
font-weight: bold;
float: left;
display: block;
padding: 0 1.6em;
line-height: 35px;
background: url('delicious-v.1-img/li-border.gif') no-repeat 100% center;
}

#menu li a:hover, #menu li a.active {
font-weight: bold;
color: #FFCB5C;
}


/* RSS */

#rss-block {
position: absolute;
top: 158px;
right: 0;
font-size: 1.2em;
color: white;
height: 34px;
line-height: 34px;
}

#rss-icon {
background: url('delicious-v.1-img/rss-icon.gif') no-repeat center;
padding-left: 30px;
}


/* Content */

#content {
background: #1A1A1A url('delicious-v.1-img/content-bg.gif') repeat-x 0 0;
min-height: 231px;
}

#content-box {
width: 950px;
margin: auto;
text-align: left;
min-height: 544px;
}

#content-box-in-left {
width: 72%;
float: left;
}

#content-box-in-left-in {
margin: 2em 1em 5em 1.8em;
}

#content-box-in-right {
width: 27%;
float: right;
}

#content-box-in-right h3 {
color: #FFFFFF;
font-size: 1.2em;
margin-bottom: 13px;
padding: 0;
background: none;
}

#content-box-in-right-in {
margin: 2em 1.4em 5em 2.8em;
}


/* Right column directives */

#content-box-in-right-in ul {
list-style-type: none;
margin: 0 0 30px 4px;
}

#content-box-in-right-in ul li {
color: white;
display: inline;
}

#content-box-in-right-in ul li a, #content-box-in-right-in ul li a:visited {
color: #FAFAFA;
font-weight: normal;
text-decoration: none;
padding: 4px 0 4px 16px;
line-height: 130%;
border-left: 2px solid #404040;
display: block;
}

#content-box-in-right-in ul li a:hover, #content-box-in-right-in ul li a.active {
border-left: 2px solid #FF9C31 !important;
text-decoration: underline !important;
}


/* Block of text with dotted border-bottom */

.block {
padding-bottom: 1px;
margin-bottom: 20px;
border-bottom: 1px dotted #606060;
}


/* Small gallery */

#small-gallery {
margin: 1.5em 0 3em 0;
width: 80%;
padding: 1px 0;
}

#small-gallery img {
border: 2px solid #434343;
margin: 0 10px 15px 0;
}

#small-gallery a:hover img {
border: 2px solid #FF9C31;
}


/* Footer */

#footer {
width: 900px;
height: 80px;
margin: auto;
border-top: 1px solid #404040;
}

p.footer-left {
float: left;
width: 430px;
color: #FFFFFF;
text-align: left;
margin: 9px 0 0 15px;
display: inline;
}

p.footer-left a, p.footer-left a:visited {
color: #FFFFFF;
}

p.footer-right {
float: right;
width: 430px;
color: #999999;
text-align: right;
margin: 9px 15px 0 0;
display: inline;
}

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

p.footer-right a:hover {
color: #FFFFFF;
font-weight: normal;
}


</style>


<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen, projection, tv" /><![endif]-->
<link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
</head>
<body>
<div id="main">
  <div id="header">
    <h1><a href="http://www.free-css.com/"><span>DELICIOUS</span> V.1</a></h1>
    <h2>Free CSS Template</h2>
    <form class="searching" action="http://www.free-css.com/">
      <fieldset>
      <div id="picture-input">
        <input type="text" class="search" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" value="Search&hellip;" />
      </div>
      <input class="hledat" type="image" src="delicious-v.1-img/search-button.gif" name="search" value="Search" alt="Search" />
      </fieldset>
    </form>
    <div id="rss-block"><a id="rss-icon" href="http://www.free-css.com/">RSS</a></div>
  </div>
  <div id="menu-box" class="cleaning-box"> <a href="#skip-menu" class="hidden">Skip menu</a>
    <ul id="menu">
      <li><a href="http://www.free-css.com/" class="active">Home</a></li>
      <li><a href="http://www.free-css.com/">About me</a></li>
      <li><a href="http://www.free-css.com/">My work</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Contact me</a></li>
    </ul>
  </div>
  <hr class="noscreen" />
  <div id="skip-menu"></div>
  <div id="content">
    <div id="content-box">
      <div id="content-box-in-left">
        <div id="content-box-in-left-in">
          <h3>LOREM IPSUM DOLOR SIT AMET</h3>
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, odio enim viverra libero, a <a href="http://www.free-css.com/">volutpat nisl</a> dui sed quam. Proin venenatis gravida nunc. Aliquam justo felis, consequat nec, ultricies vel, sollicitudin eleifend, dolor. Nullam nec eros. Etiam semper mi et erat. Curabitur vel leo. Suspendisse potenti. Maecenas aliquet fermentum tellus. Curabitur purus dolor, congue eu, pulvinar eleifend, ultricies dictum, nisi. Aliquam erat volutpat. Donec pulvinar est vel leo.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, odio enim viverra libero, a volutpat nisl dui sed quam. Proin venenatis gravida nunc.</p>
          </div>
          <h3>LOREM IPSUM DOLOR SIT AMET</h3>
          <div id="small-gallery"> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/01.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/02.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/03.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/04.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/05.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/06.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/07.jpg" alt="" width="96" height="72" /></a> <a href="http://www.free-css.com/"><img src="delicious-v.1-img/foto/08.jpg" alt="" width="96" height="72" /></a> </div>
        </div>
      </div>
      <hr class="noscreen" />
      <div id="content-box-in-right">
        <div id="content-box-in-right-in">
          <h3>Lorem ipsum</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/" class="active">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
          </ul>
          <h3>Lorem ipsum</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
            <li><a href="http://www.free-css.com/">Lorem ipsum</a></li>
          </ul>
        </div>
      </div>
      <div class="cleaner">&nbsp;</div>
    </div>
  </div>
  <hr class="noscreen" />
  <div id="footer">
    <p class="footer-left">&copy; <a href="http://www.free-css.com/">MY DELICIOUS SITE</a>, 2008.</p>
    <p class="footer-right"><a href="http://www.mantisatemplates.com/">Free web templates</a> by <a href="http://www.mantisa.cz/">Mantis-a</a></p>
  </div>
</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.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.