delicious-2
<!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>
<!-- This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. -->
<meta name="Description" content="..." />
<meta name="Keywords" content="..." />
<meta name="robots" content="all,follow" />
<meta name="author" content="..." />
<meta name="copyright" content="Mantis-a [http://www.mantisa.cz/]" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<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: #242424 url('delicious-2-img/bg.gif') repeat-x 0 0;
min-width: 980px;
}
a:link, a:visited {
color: #AFBC25;
text-decoration: underline;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
content: ' ';
}
.noscreen {
display: none;
}
.hidden { /* Skip menu */
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Paragraphs, headings, ... */
p {
line-height: 170%;
margin-bottom: 10px;
color: #FDFDFD;
}
p.more {
float: right;
display: inline;
margin-right: 7px;
}
p.more a, p.more a:visited {
font-weight: normal;
}
h1 {
font-size: 2.2em;
font-weight: normal;
color: #FFFFFF;
text-align: left;
padding: 43px 0 4px 0;
letter-spacing: 1px;
background: url('delicious-2-img/h1-bg.gif') repeat-x 0 100%;
width: 50%;
}
h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}
h2 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FFFFFF;
text-align: left;
margin: 4px 0 0 0;
letter-spacing: 1px;
}
h3 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FDFDFD;
letter-spacing: 1px;
background: url('delicious-2-img/h3-bg.gif') no-repeat 0 54%;
padding-left: 18px;
margin-bottom: 7px;
}
address {
}
/* Images */
img.image-main {
border: 1px solid #AFBC25;
margin: 0.2em 0 0.6em 0;
}
/* Header */
#header {
width: 980px;
height: 178px;
position: relative;
margin: 0 auto;
text-align: left;
}
ul#navigation {
float: right;
margin: 8px 1px 0 0;
display: inline;
color: #FFFFFF;
}
ul#navigation li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
font-size: 0.9em;
}
ul#navigation li a, ul#navigation li a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: normal;
}
ul#navigation li a:hover {
text-decoration: underline;
}
li#house {
background: url('delicious-2-img/house.gif') no-repeat 0 1px;
padding-left: 24px;
}
li#house a {
margin-right: 16px;
}
li#sitemap {
background: url('delicious-2-img/sitemap.gif') no-repeat 0 2px;
padding-left: 24px;
margin-left: 16px;
}
li#sitemap a {
margin-right: 16px;
}
li#envelope {
background: url('delicious-2-img/envelope.gif') no-repeat 0 2px;
padding-left: 23px;
margin-left: 16px;
}
/* Search form */
form.searching {
width: 204px;
position: absolute;
top: 43px;
right: 1px;
}
form.searching fieldset {
border: 0;
}
#picture-input {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 171px;
height: 26px;
background: #FAFFE5 url('delicious-2-img/input-bg.gif') no-repeat 0 0;
border: 0;
}
#picture-input input {
position: relative;
top: 5px;
left: 10px;
width: 160px;
border: 0;
letter-spacing: 1px;
background-color: #FAFFE5;
}
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 {
position: absolute;
top: 145px;
right: 1px;
}
#menu li {
float: left;
display: inline;
list-style-type: none;
}
#menu li a {
float: left;
display: inline;
list-style-type: none;
text-align: center;
color: #FFFFFF;
font-size: 1.1em;
text-decoration: underline;
padding: 0 1.1em;
height: 32px;
line-height: 32px;
margin-left: 3px;
background: #242424 url('delicious-2-img/li-bg.gif') repeat-x 0 0;
border: 1px solid black;
border-bottom: none;
}
#menu li a:hover {
color: #FFFFFF;
text-decoration: none;
background: #242424;
border: 1px solid #222222;
border-bottom: none;
}
#menu li a.active {
background: #232323 url('delicious-2-img/li-bg-hover.gif') repeat-x 0 0;
color: #FFFFFF;
text-decoration: none;
border: 1px solid #2D4A00;
border-bottom: none;
}
/* 3 columns layout */
#content {
font-size: 0.9em;
width: 980px;
margin: 23px auto 0 auto;
text-align: left;
background: #242424 url('delicious-2-img/content-bg.gif') repeat-y 0 0;
}
#column-1 {
float: right;
width: 650px;
}
#column-1 #column-11 {
float: left;
width: 330px;
}
#column-1 #column-12 {
float: right;
width: 296px;
}
#column-2 {
float: left;
width: 300px;
}
/* Footer */
#footer {
width: 970px;
height: 80px;
margin: 60px auto 0 auto;
border-top: 1px solid #404040;
}
p.footer-left {
float: left;
width: 465px;
color: #FFFFFF;
text-align: left;
margin: 9px 0 0 15px;
display: inline;
}
p.footer-left a, p.footer-left a:visited {
color: #FFFFFF;
font-weight: normal;
}
p.footer-right {
float: right;
width: 465px;
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" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Website name | Homepage</title>
</head>
<body>
<!-- Header -->
<div id="header">
<ul id="navigation">
<li id="house"><a href="#">Homepage</a>|</li>
<li id="sitemap"><a href="#">Sitemap</a>|</li>
<li id="envelope"><a href="#">Contact us</a></li>
</ul>
<!-- Your website name -->
<h1><a href="#">MY DELICIOUS SITE</a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2>Lorem ipsum dolor sit amet</h2>
<!-- Your slogan end -->
<!-- Search form -->
<form class="searching" action="">
<fieldset>
<label></label>
<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…" />
</div>
<input class="hledat" type="image" src="delicious-2-img/search-button.gif" name="" value="Search" alt="Search" />
</fieldset>
</form>
<!-- Search form end -->
<!-- Menu -->
<a href="#skip-menu" class="hidden">Skip menu</a>
<ul id="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Menu end -->
</div>
<!-- Header end -->
<hr class="noscreen" />
<div id="skip-menu"></div>
<div id="content">
<!-- Middle and right column wrapper-->
<div id="column-1">
<!-- Middle column -->
<div id="column-11">
<h3>Lorem ipsum dolor</h3>
<img src="delicious-2-img/foto.jpg" alt="foto" width="280" height="119" class="image-main" />
<p>Lorem ipsum dolor sit amet consectetuer dui lacus natoque vitae et. Vestibulum ornare Curabitur
Nullam Ut sapien id sollicitudin senectus aliquam id. Cum et congue pede turpis lacus in gravida
dignissim interdum condimentum.</p>
<p class="more"><a href="#">Learn more →</a></p>
<div class="cleaner"> </div>
<h3>Lorem ipsum dolor</h3>
<p>Lacinia pulvinar orci Aliquam adipiscing turpis id Aenean eu wisi nec. Vitae sit hac augue
vestibulum id neque condimentum pede ultrices Phasellus.</p>
</div>
<!-- Middle column end -->
<!-- Right column -->
<div id="column-12">
<h3>Lorem ipsum dolor</h3>
<img src="delicious-2-img/foto.jpg" alt="foto" width="280" height="119" class="image-main" />
<p>Lorem ipsum dolor sit amet consectetuer dui lacus natoque vitae et. Vestibulum ornare Curabitur
Nullam Ut sapien id sollicitudin senectus aliquam id. Cum et congue pede turpis lacus in gravida
dignissim interdum condimentum.</p>
<p class="more"><a href="#">Learn more →</a></p>
<div class="cleaner"> </div>
<h3>Lorem ipsum dolor</h3>
<p>Lacinia pulvinar orci Aliquam adipiscing turpis id Aenean eu wisi nec. Vitae sit hac augue
vestibulum id neque condimentum pede ultrices Phasellus.</p>
</div>
<!-- Right column end -->
</div>
<!-- Middle and right column wrapper end-->
<!-- Left column -->
<div id="column-2">
<h3>Lorem ipsum dolor</h3>
<img src="delicious-2-img/foto.jpg" alt="foto" width="280" height="119" class="image-main" />
<p>Lorem ipsum dolor sit amet consectetuer dui lacus natoque vitae et. Vestibulum ornare Curabitur
Nullam Ut sapien id sollicitudin senectus aliquam id. Cum et congue pede turpis lacus in gravida
dignissim interdum condimentum.</p>
<p class="more"><a href="#">Learn more →</a></p>
<div class="cleaner"> </div>
<h3>Lorem ipsum dolor</h3>
<p>Lacinia pulvinar orci Aliquam adipiscing turpis id Aenean eu wisi nec. Vitae sit hac augue
vestibulum id neque condimentum pede ultrices Phasellus.</p>
</div>
<!-- Right column end -->
<div class="cleaner"> </div>
</div>
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<div id="footer-in">
<p class="footer-left">© <a href="#">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>
<!-- Footer end -->
</body>
</html>
Related examples in the same category