delicious-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>
<!-- 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: #1A1A1A url('delicious-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, ... */
p {
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-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-1-img/h3-bg.gif') no-repeat 0 center;
padding-left: 27px;
}
address {
}
/* Header */
#header {
width: 900px;
height: 157px;
margin: 0 auto;
position: relative;
background: url('delicious-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-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-1-img/menu-bg.gif') repeat-x 0 0;
border-bottom: 1px solid #3B3B3B;
}
#menu {
width: 900px;
margin: 0 auto;
background: #323232 url('delicious-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-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-1-img/rss-icon.gif') no-repeat 0 center;
padding-left: 30px;
}
/* Content */
#content {
background: #1A1A1A url('delicious-1-img/content-bg.gif') repeat-x 0 0;
min-height: 231px;
}
#content-box {
width: 950px;
margin: 0 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: 0 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" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Website name | Homepage</title>
</head>
<body>
<div id="main">
<!-- Header -->
<div id="header">
<!-- Your website name -->
<h1><a href="#">MY <span>DELICIOUS</span> 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-1-img/search-button.gif" name="" value="Search" alt="Search" />
</fieldset>
</form>
<!-- Search form end -->
<div id="rss-block"><a id="rss-icon" href="#">RSS</a></div>
</div>
<!-- Header end -->
<!-- Menu -->
<div id="menu-box" class="cleaning-box">
<a href="#skip-menu" class="hidden">Skip menu</a>
<ul id="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">My work</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</div>
<!-- Menu end -->
<hr class="noscreen" />
<div id="skip-menu"></div>
<div id="content">
<div id="content-box">
<!-- Left column -->
<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="#">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="#"><img src="delicious-1-img/foto/01.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/02.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/03.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/04.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/05.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/06.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/07.jpg" alt="Image 1" width="96" height="72" /></a>
<a href="#"><img src="delicious-1-img/foto/08.jpg" alt="Image 1" width="96" height="72" /></a>
</div>
</div>
</div>
<!-- Left column end -->
<hr class="noscreen" />
<!-- Right column -->
<div id="content-box-in-right">
<div id="content-box-in-right-in">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#" class="active">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</div>
</div>
<div class="cleaner"> </div>
<!-- Right column end -->
</div>
</div>
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<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>
<!-- Footer end -->
</div>
</body>
</html>
Related examples in the same category