fain-gray
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your website name | Homepage</title>
<!-- 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="..." />
<!-- Javascript -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!-- 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-color: #A9BBCE;
min-width: 850px;
padding-bottom: 80px; /* Simulates margin-bottom for wrapper in IE */
}
a:link, a:visited {
color: #C63D00;
text-decoration: underline;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
.noscreen {
display: none;
}
/* Paragraphs, headings, ... */
p {
line-height: 1.9;
margin-bottom: 7px;
}
p.text-content:first-letter {
font-size: 1.4em;
font-weight: bold;
line-height: 0.9;
color: #202020;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
font: 2.6em Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px 40px;
border-bottom: 1px solid #7F7F7F;
width: 55%;
padding: 15px 0 5px 0;
}
h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}
h2 {
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 1px;
color: #FFFFFF;
border-left: 3px solid #FFAE20;
padding-left: 14px;
margin: 12px 0 0 40px;
}
h3 {
color: #3D3D3D;
font: 1.7em Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
background: url('fain-gray-img/h3-bg.gif') no-repeat 0 50%;
padding-left: 35px;
margin: 18px 0 10px 0;
}
h4 {
font-size: 1em;
background-color: #343434;
color: #FFFFFF;
letter-spacing: 1px;
border: 2px solid #FFFFFF;
margin-top: 7px;
padding: 6px 10px;
}
ul {
list-style-type: none;
}
/* Site wrapper */
#wrapper {
width: 850px;
margin: 0 auto 80px auto;
position: relative;
background-color: #FFFFFF;
display: table; /* margin-bottom for FF (?) */
text-align: left;
}
/* Header */
#header {
margin: 0 auto;
height: 157px;
position: relative;
background: #004E6C url('fain-gray-img/header-bg.gif') repeat-x 0 0;
border-top: 4px solid #181818;
border-bottom: 1px solid #9E9E9E;
}
#header-arrow {
position: absolute;
top: 0;
right: 50px;
background: url('fain-gray-img/header-arrow.gif') no-repeat 0 0;
width: 148px;
height: 105px;
}
/* Menu */
#menu {
width: 850px;
margin: 0 auto;
background: #4A4A4A url('fain-gray-img/menu-bg.gif') repeat-x 0 0;
}
#menu li {
display: inline;
list-style-type: none;
}
#menu li.first a {
margin-left: 1.6em;
display: inline;
}
#menu li a {
float: left;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
font-size: 1.1em;
line-height: 33px;
margin: 0 0.5em;
padding: 0 1em;
}
#menu li a:hover {
text-decoration: underline;
}
#menu li a.active {
font-weight: bold;
color: #ffd07e;
}
.cleaning-box {
min-height: 1px;
}
.cleaning-box:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
content: ' ';
}
.hidden { /* Skip menu */
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Content boxes */
#content-box {
width: 100%;
margin: 0 auto;
color: #151515;
position: relative;
}
#content-box-in {
width: 100%;
}
.content-box-left {
float: left;
width: 625px;
margin-bottom: 4em;
}
.content-box-right {
float: right;
width: 220px;
margin-bottom: 4em;
background-color: #EEEEEE;
}
#column-right-bottom {
background: #DBF3FF url('fain-gray-img/column-right-bottom.gif') no-repeat 0 0;
width: 220px;
height: 20px;
}
.content-box-left-in {
margin: 0.4em 1.7em 0 2em;
}
.gallery {
margin-top: 18px;
}
.gallery a img, .gallery a:visited img {
margin: 0 11px 16px 0;
border: 4px solid #EEEEEE;
}
.gallery a:hover img {
border: 4px solid #FFB25F;
}
.content-box-right-in {
margin: 0.4em 1.6em 0 0.8em;
}
dt {
font-size: 0.9em;
font-weight: bold;
}
dd {
line-height: 1.4;
margin-bottom: 12px;
}
dd.heading, dd.heading a, dd.heading a:visited {
margin-bottom: 1px;
color: #D15900;
font-weight: bold;
}
address {
line-height: 1.5;
margin-bottom: 7px;
}
/* Footer */
#footer {
background-color: #404040;
color: white;
width: 850px;
height: 34px;
font-size: 0.9em;
border-bottom: 2px solid #141414;
}
#footer a, #footer a:visited {
font-weight: normal;
color: white;
}
#footer p.left, #footer p.right {
width: 400px;
display: inline;
margin-bottom: 0;
line-height: 30px;
}
#footer a.b, #footer a.b a:visited {
font-weight: bold !important;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 15px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 15px;
}
</style>
<link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Your website name -->
<h1><a href="#">Your website name</a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2>Lorem ipsum dolor sit amet…</h2>
<!-- Your slogan end -->
<div id="header-arrow"></div>
</div>
<!-- Header end -->
<!-- Menu -->
<a href="#skip-menu" class="hidden">Skip menu</a>
<ul id="menu" class="cleaning-box">
<li class="first"><a href="#" class="active">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">OUR OFFER</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<!-- Menu end -->
<hr class="noscreen" />
<div id="content-box">
<div id="content-box-in">
<a name="skip-menu"></a>
<!-- Content left -->
<div class="content-box-left">
<div class="content-box-left-in">
<h3>Welcome here</h3>
<p class="text-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur rhoncus mollis risus.
Aenean in pede eget ipsum feugiat lobortis. Vivamus dapibus. In luctus placerat purus. Etiam ultrices varius nulla.
Phasellus odio leo, <a href="#">rhoncus vitae</a>, ultrices nec, pulvinar vel, enim. Suspendisse sit amet nunc.
Proin id neque nec felis fringilla hendrerit. Nulla at odio. In vel enim quis est consectetuer aliquet.</p>
<p class="text-content">Nunc tincidunt pulvinar nulla. Aliquam erat volutpat. Nunc eros urna, vulputate pretium,
lacinia vitae, bibendum nec, nulla. Sed id leo. Pellentesque semper eleifend lacus. Lorem ipsum dolor sit amet,
<a href="#">consectetuer adipiscing elit</a>. Praesent a lorem. Quisque metus ipsum, sodales et, convallis non,
molestie et, nisl.</p>
<h3>Our latest work</h3>
<div class="gallery">
<a href="#"><img src="fain-gray-img/image.jpg" width="120" height="90" alt="image 1" /></a>
<a href="#"><img src="fain-gray-img/image.jpg" width="120" height="90" alt="image 2" /></a>
<a href="#"><img src="fain-gray-img/image.jpg" width="120" height="90" alt="image 3" /></a>
<a href="#"><img src="fain-gray-img/image.jpg" width="120" height="90" alt="image 4" /></a>
</div>
</div>
</div>
<!-- Content left end -->
<hr class="noscreen" />
<!-- Content right -->
<div class="content-box-right">
<h4>News</h4>
<div class="content-box-right-in">
<dl>
<dt>25. 4. 08</dt>
<dd class="heading"><a href="#">Lorem ipsum dolor</a></dd>
<dd>Sed porttitor purus non libero. Aliquam pulvinar, sem vitae euismod tempus, quam orci…</dd>
<dt>12. 4. 08</dt>
<dd class="heading"><a href="#">Lorem ipsum dolor</a></dd>
<dd>Sed porttitor purus non libero. Aliquam pulvinar, sem vitae euismod tempus, quam orci…</dd>
</dl>
</div>
<h4>Contact</h4>
<div class="content-box-right-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 id="column-right-bottom"> </div>
</div>
<!-- Content right end -->
<div class="cleaner"> </div>
</div>
</div>
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<p class="left">© <a class="b" href="#">MY WEBSITE</a>, 2008.</p>
<p class="right"><a href="http://www.mantisatemplates.com/">Free web templates</a>, <a href="http://csstemplatesfree.net/">Free web templates</a>, tip
<a class="b" href="http://www.junglegym.cz/uvodni-stranka.aspx" title="Detsk hrite, skluzavky a houpaky Jungle Gym">Detsk Hrite</a></p>
</div>
<!-- Footer end -->
</div>
</body>
</html>
Related examples in the same category