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"> </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…</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…</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"> </div>
</div>
</div>
</div>
<hr class="noscreen" />
<div class="column-right">
<div class="column-right-in">
<div id="board-top"> </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…</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…</a></dd>
</dl>
</div>
<div class="divider"> </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@
company.com<br />
Fax: 0 123 456 789<br />
Tel.: 0 123 456 789
</address>
</div>
</div>
</div>
<div id="board-bottom"> </div>
</div>
</div>
<div class="cleaner"> </div>
</div>
<hr class="noscreen" />
<div class="footer">
<p class="text-left">© <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> | <a href="#top">Top</a> ↑</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