easy-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;
background: #FFFFFF url('easy-blue-img/bg.gif') repeat-x 0 0;
min-width: 770px;
padding-bottom: 60px; /* Simulates margin-bottom for wrapper in IE */
}
a:link, a:visited {
color: #005886;
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: 170%;
}
h1 {
font-size: 2.6em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #595959;
letter-spacing: 1px;
text-align: left;
padding: 25px 0 2px 15px;
margin-left: 30px;
border-bottom: 1px solid #EEEEEE;
background: url('easy-blue-img/h1-bg.gif') no-repeat 0 34px;
}
h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #595959;
}
h2 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #595959;
text-align: left;
margin: 6px 0 0 30px;
}
h3 {
color: #00598D;
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: left;
letter-spacing: 1px;
margin: 30px 0 10px 0;
}
h3.first {
margin-top: 0;
}
ul {
list-style-type: none;
}
/* Images */
img.portfolio {
border: 3px solid #8ED8FF;
margin: 0 12px 16px 0;
}
a:hover img.portfolio {
border: 3px solid #FF6123;
margin: 0 12px 16px 0;
}
/* Site wrapper, content paragraph background */
#wrapper {
width: 770px;
margin: 35px auto 60px auto;
position: relative;
background-color: #FFFFFF;
border: 1px solid #C3C3C3;
display: table; /* margin-bottom for FF (?) */
}
.division {
background-color: #DBF1FF;
border: 1px solid #4899CC;
padding: 0.5em 0.9em;
margin-bottom: 17px;
}
.division p {
color: #003C5B;
}
/* Header */
#header {
margin: 0 auto;
height: 140px;
position: relative;
background: #FFFFFF url('easy-blue-img/hd-bg.gif') repeat-x 0 0;
padding-right: 330px;
}
#header-wrapper { /* Matrjoska hack for IE quirk box model by Pixy (Petr Stanicek) [http://www.pixy.cz/] */
width: 770px;
}
/* Search form */
form.searching {
width: 188px;
position: absolute;
top: 25px;
right: 20px;
}
fieldset {
border: 0;
}
form.searching input.search {
letter-spacing: 1px;
float: left;
width: 134px;
padding: 2px 0 2px 6px;
background-color: #F5FCFF;
border: 1px solid #A5D0E4;
}
form.searching input.hledat {
letter-spacing: 1px;
padding-left: 0;
font-weight: bold;
float: left;
margin-left: 4px;
}
form.searching label {
display: none;
}
/* Content boxes */
#content-box {
width: 100%;
margin: 0 auto;
text-align: left;
color: #151515;
position: relative;
}
#content-box-in {
width: 100%;
}
#content-box-left {
float: left;
width: 24%;
margin-bottom: 5em;
}
#content-box-right {
float: right;
width: 75%;
margin-bottom: 5em;
}
#content-box-left-in {
margin: 0.4em 0.3em 0 0;
}
#content-box-right-in {
margin: 0.4em 1.6em 0 0.6em;
}
/* Content boxes directives */
#content-box-left-in h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #007CBC url('easy-blue-img/h3-bg.gif') repeat-x 0 0;
color: #FFFFFF;
margin: 0;
text-align: center;
line-height: 24px;
font-size: 1.1em;
}
#content-box-left-in p {
margin: 0 0 5px 12px;
line-height: 130%;
}
#content-box-left-in p.first {
margin-top: 10px;
}
#content-box-left-in p span {
color: #4B4B4B;
}
#content-box-left-in ul li {
text-align: center;
border-bottom: 1px solid #CFCFCF;
border-right: 1px solid #CFCFCF;
display: block;
}
#content-box-left-in ul li.last {
border-bottom: none;
}
#content-box-left-in ul li a, #content-box-left-in ul li a:visited {
color: #006092;
display: block;
padding: 0.4em 0;
width: 100%;
text-decoration: none;
font-weight: normal;
}
#content-box-left-in ul li a:hover, #content-box-left-in ul li a.active {
background-color: #DBF3FF;
font-weight: bold !important;
}
/* Submit form */
form.send {
width: 450px;
position: relative;
top: 0;
left: 5px;
}
form.send fieldset {
padding: 10px 10px 5px 10px;
margin: 0 0 10px 0;
border: 1px solid #00598D;
}
form.send legend {
font-weight: bold;
color: blue;
margin-bottom: 10px;
padding: 3px 6px;
background-color: #00598D;
color: #FFFFFF;
}
form.send label {
width: 105px;
float: left;
height: auto;
display: block;
margin: 0 0 0 5px;
}
form.send br {
display: none;
}
form.send input, form.send select {
width: 300px;
margin-bottom: 15px;
}
form.send textarea {
width: 300px;
height: 130px;
margin-bottom: 10px;
}
form.send input.go {
margin-left: 110px;
width: auto;
padding: 1px 3px;
}
/* Footer */
#footer {
font-size: 0.9em;
margin-bottom: 5px;
}
#footer a, #footer a:visited {
padding: 1px 2px;
font-weight: normal;
}
#footer a:hover {
background-color: #005886;
color: #FFFFFF;
}
</style>
<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>Your website name | Homepage</title>
</head>
<body>
<div id="wrapper">
<!-- Header -->
<div id="header-wrapper"> <!-- Matrjoska hack for IE quirk box model by Pixy (Petr Stanicek) [http://www.pixy.cz/] -->
<div id="header">
<!-- Your website name -->
<h1><a href="#">MY WEBSITE</a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2>About my website…</h2>
<!-- Your slogan end -->
<!-- Search form -->
<form class="searching" action="">
<fieldset>
<label></label>
<input class="search" type="text" onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" value="Find it…" />
<input class="hledat" type="image" src="easy-blue-img/search-button.gif" name="" alt="Search" />
</fieldset>
</form>
<!-- Search end -->
</div>
</div>
<!-- Header end -->
<div id="content-box">
<div id="content-box-in">
<!-- Content right -->
<div id="content-box-right">
<div id="content-box-right-in">
<h3 class="first">Lorem ipsum dolor</h3>
<div class="division">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pretium, eros
at semper euismod, nisl nibh commodo tortor, eget feugiat leo nisl sed enim.
Cras diam est, lobortis nec, hendrerit a, porttitor vitae, mauris. Aenean quis
quam eu enim volutpat lobortis. Sed ullamcorper fringilla tortor. Aenean pharetra.
Donec arcu turpis, dapibus sed, dapibus at, facilisis vel, sapien. Donec venenatis
felis ac sem. Duis et libero. Donec auctor ante sit amet lacus. Pellentesque lobortis
odio id pede. Proin pulvinar ante vel urna. In pharetra, arcu at condimentum pharetra,
eros massa porttitor dui, id consequat tortor elit venenatis neque. Sed sed magna.
Nam ut erat at nulla pulvinar elementum. Ut nec elit. Cras porttitor risus vitae leo.
Morbi ut nibh in nunc iaculis fringilla.</p>
</div>
<div class="division">
<p>In vulputate adipiscing diam. Maecenas sit amet erat id lacus feugiat tristique.
Phasellus scelerisque pulvinar purus. Vivamus ullamcorper dignissim orci.
Nunc sodales auctor lorem. Proin a mauris. Donec ut lorem id est rhoncus aliquet.
Vivamus a sem. Proin dapibus risus commodo eros. Vestibulum at mi non eros vulputate
hendrerit. Ut sapien dolor, laoreet in, laoreet eget, fringilla vel, leo. Cras iaculis
arcu non felis. Aenean faucibus, purus ac laoreet ornare, velit eros commodo nibh, et
rutrum urna sapien at libero. Morbi vestibulum. Sed consequat enim id dui. Phasellus
cursus vulputate orci. Vestibulum tempus. Suspendisse est. Nullam imperdiet, est nonummy
dictum tempus, augue quam scelerisque neque, ut faucibus magna nibh eu lacus.</p>
</div>
<h3>Lorem ipsum dolor</h3>
<form class="send" action="">
<fieldset>
<legend>SUBMIT FORM</legend>
<label>Name:</label>
<input type="text" size="20" id="jmeno" /><br />
<label>E-mail:</label>
<input type="text" size="20" id="prijmeni" value="@" /><br />
<label>Selection1:</label>
<select id="select1" name="select">
<option value="1" selected="selected">-- First --</option>
<option value="2">-- Second --</option>
<option value="3">-- Third --</option>
</select><br />
<label>Selection2</label>
<select id="select2">
<option value="1" selected="selected">-- First --</option>
<option value="2">-- Second --</option>
<option value="3">-- Third --</option>
</select><br />
<label>Comment:</label><br />
<textarea id="comment" cols="20" rows="10"></textarea>
<input type="submit" alt="" class="go" name="Submit" value="SUBMIT" />
</fieldset>
</form>
</div>
</div>
<!-- Content right end -->
<!-- Content left -->
<div id="content-box-left">
<div id="content-box-left-in">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#" class="active">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
<li><a href="#">Item Six</a></li>
<li><a href="#">Item Seven</a></li>
<li><a href="#">Item Eight</a></li>
<li class="last"><a href="#">Item Nine</a></li>
</ul>
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
<li class="last"><a href="#">Item Six</a></li>
</ul>
<h3>Contact</h3>
<p class="first"><span>Jabber:</span><br /> nick@jabber.cz</p>
<p><span>Live Messenger:</span><br /> info@<!---->domain.com</p>
<p><span>Fax:</span><br /> 0 123 456 789</p>
<p><span>E-mail:</span><br /> info@<!---->domain.com</p>
</div>
</div>
<!-- Content left end -->
<div class="cleaner"> </div>
</div>
</div>
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<p>© <a href="#">MY WEBSITE</a>, 2008. <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