wide-blue
<!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;
min-width: 950px;
}
#main {
width: 100%;
background: url('wide-blue-img/main-bg.gif') repeat-y center 0;
min-height: 100%;
height: 100%;
position: relative;
}
body>#main {
height: auto;
}
a:link, a:visited {
color: #005AA1;
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: #003B69;
}
h1 {
font-size: 2.8em;
font-weight: normal;
color: #FFFFFF;
text-align: left;
padding: 49px 0 0 42px;
background: url('wide-blue-img/h1-bg-flame.png') no-repeat 0 43px;
}
h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}
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 2px;
}
h3 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #004C87;
letter-spacing: 1px;
padding-bottom: 3px;
border-bottom: 1px solid #004C87;
margin-bottom: 7px;
}
address {
font-style: normal;
line-height: 180%;
margin-left: 7px;
}
/* Images */
img.float {
float: left;
border: 1px solid #004C87;
margin: 0.5em 0.8em 0.5em 0;
}
/* Header */
#header {
height: 198px;
position: relative;
background: #004A75 url('wide-blue-img/hd-bg.gif') repeat-x 0 0;
}
#header-in {
width: 900px;
height: 198px;
position: relative;
margin: 0 auto;
}
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('wide-blue-img/house.gif') no-repeat 0 1px;
padding-left: 24px;
}
li#house a {
margin-right: 16px;
}
li#sitemap {
background: url('wide-blue-img/sitemap.gif') no-repeat 0 2px;
padding-left: 24px;
margin-left: 16px;
}
li#sitemap a {
margin-right: 16px;
}
li#envelope {
background: url('wide-blue-img/envelope.gif') no-repeat 0 2px;
padding-left: 23px;
margin-left: 16px;
}
/* Search form */
form.searching {
width: 210px;
position: absolute;
top: 47px;
right: 0;
}
form.searching fieldset {
border: 0;
}
form.searching input.search {
letter-spacing: 1px;
float: left;
padding: 2px 0 2px 6px;
width: 139px;
border: 1px solid gray;
}
form.searching input.hledat {
letter-spacing: 1px;
padding-left: 0;
margin-left: 4px;
font-weight: bold;
color: #FFFFFF;
float: left;
}
form.searching label {
display: none;
}
/* Menu */
#menu-box {
background: #4A4A4A url('wide-blue-img/menu-bg.gif') repeat-x 0 0;
border-bottom: 3px solid black;
}
#menu {
width: 950px;
margin: 0 auto;
}
#menu li {
display: inline;
list-style-type: none;
text-align: center;
}
#menu li.first a {
margin-left: 1.6em;
display: inline
}
#menu li a {
float: left;
color: #FFFFFF;
font-weight: bold;
font-size: 1.1em;
display: block;
padding: 0.9em 1.4em 0.7em 1.4em;
}
#menu li a:hover, #menu li a.active {
color: #000000;
background-color: #D0F500;
font-weight: bold;
font-size: 1.1em;
}
/* Content box */
#content {
background: #FFFFFF url('wide-blue-img/content-bg.gif') repeat-x 0 0;
min-height: 624px;
}
#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 80px;
min-height: 544px;
}
#content-box-in-left {
width: 70%;
float: left;
background-color: #FFFFFF;
}
#content-box-in-left-in {
margin: 1.8em 1em 7em 1.8em;
}
#content-box-in-right {
width: 29%;
float: right;
background-color: #FFFFFF;
}
#content-box-in-right h3 {
border: 0;
background-color: #252525;
color: #FFFFFF;
padding: 3px 0 4px 10px;
font-size: 1.3em;
}
#content-box-in-right-in {
margin: 1.8em 0 7em 1.5em;
}
#content-box-in-right-in dl {
margin: 0 0 40px 2px;
}
#content-box-in-right-in dt {
margin-bottom: 3px;
font-weight: bold;
background-color: #E2F5FF;
color: #002C4E;
line-height: 140%;
padding: 1px 0 1px 5px;
}
#content-box-in-right-in dd {
margin: 0 5px 18px 2px;
line-height: 140%;
}
/* Table */
table {
font-size: 1.1em;
border-collapse: collapse;
border: 2px solid #004C87;
margin: 15px 0 20px 0;
table-layout: fixed;
width: 90%;
}
th, td {
padding: 3px 13px;
border: 1px solid #004C87;
}
th {
text-align: right;
font-weight: bold;
}
td {
text-align: right;
}
.first-row {
background: #F4FF7C;
}
.first-row th {
text-align: center;
font-weight: bold;
border-bottom: 2px solid #004C87;
}
.first-column {
background: #FFD162;
border-right: 1px solid #004C87;
}
.last-column {
background-color: #FFD162;
border-left: 1px solid #004C87;
}
#footer {
width: 100%;
height: 60px;
background: #004A75 url('wide-blue-img/footer-bg.gif') repeat-x 0 0;
position: absolute;
bottom: 0;
left: 0;
}
#footer-in {
width: 950px;
margin: 0 auto;
}
p.footer-left {
float: left;
width: 450px;
color: #FFFFFF;
text-align: left;
margin: 9px 0 0 15px;
display: inline;
}
p.footer-left a, p.footer-left a:visited {
color: #FFFFFF;
padding: 1px 2px;
}
p.footer-left a:hover {
background-color: #FFFFFF;
color: #006497;
}
p.footer-right {
float: right;
width: 450px;
color: #FFFFFF;
text-align: right;
margin: 9px 15px 0 0;
display: inline;
}
p.footer-right a, p.footer-right a:visited {
color: #FFFFFF;
padding: 1px 2px;
}
p.footer-right a:hover {
background-color: #FFFFFF;
color: #006497;
}
p.footer-right a, p.footer-right a:visited {
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">
<div id="header-in">
<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="#">Website name</a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2>Your slogan, your sevices, your offer…</h2>
<!-- Your slogan end -->
<!-- Search form -->
<form class="searching" action="">
<fieldset>
<label>Searching</label>
<input class="search" type="text" onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" value="Search term…" />
<input class="hledat" type="image" src="wide-blue-img/search-button.gif" name="" alt="Search" />
</fieldset>
</form>
<!-- Search end -->
</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 class="first"><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="#">Price list</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Menu end -->
<hr class="noscreen" />
<div id="skip-menu"></div>
<div id="content">
<!-- Content box with white background and gray border -->
<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>
<img src="wide-blue-img/image.jpg" alt="Image1" width="141" height="101" class="float" />
<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>
<div class="cleaner"> </div>
<p>Phasellus mollis. Vivamus sapien. Proin imperdiet. Sed ultrices erat sit amet massa. Praesent quis mi. Pellentesque eu neque.
Sed congue felis eget risus. Morbi nulla lectus, viverra ac, elementum eu, faucibus tempor, purus. Pellentesque venenatis,
eros vel viverra varius, est velit tristique tellus, in commodo est arcu nec nisi. Phasellus pulvinar, magna at gravida pretium,
diam massa lobortis sem, quis <a href="">pharetra neque</a> ante ac velit. Vivamus semper. Quisque fermentum turpis quis mauris.
Sed massa ipsum, consectetuer non, ornare vitae, rhoncus eu, mauris. Curabitur id purus. Vivamus laoreet.</p>
<h3>LOREM IPSUM DOLOR SIT AMET</h3>
<table>
<col class="first-column" />
<col span="6" />
<col class="last-column" />
<tr class="first-row">
<th></th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>∑</th>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<th>Lorem</th>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</table>
</div>
</div>
<!-- Left column end -->
<hr class="noscreen" />
<!-- Right column -->
<div id="content-box-in-right">
<div id="content-box-in-right-in">
<h3>News</h3>
<dl>
<dt>February 2008</dt>
<dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
<dt>February 2008</dt>
<dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
<dt>February 2008</dt>
<dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
<dt>February 2008</dt>
<dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
</dl>
<h3>Contact information</h3>
<address>
<strong>Company</strong><br />
Street<br />
City<br />
Phone: 0 123 456 789<br />
Fax: 0 123 456 789<br />
E-mail: info@<!---->company.com
</address>
</div>
</div>
<div class="cleaner"> </div>
<!-- Right column end -->
</div>
<!-- Content box with white background and gray border end -->
</div>
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<div id="footer-in">
<p class="footer-left">© <a href="#">Your website name</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 -->
</div>
</body>
</html>
Related examples in the same category