warmblue
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Warm Blue</title>
<style type='text/css'>
/* standard elements */
html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {color: #175072;}
a:hover {color: #FF7D00;}
img {
border: 0;
}
body {
background: #114054 url(warmblue-Warm_Blue/img/bg.jpg) repeat-x left bottom;
color: #114054;
font: normal 62.5% Tahoma,sans-serif;
}
p,code,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
}
h1,h2,h3 {padding-top: 6px;}
/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
/* structure */
.container {
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}
/* header */
.top {
padding: 10px 10px 0;
}
/* title */
.header {
background-color: #fff;
font-size: 1.2em;
height: 105px;
margin: 0 auto;
padding: 10px 10px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #333;
color: #FFF;
height: 105px;
}
.header .left {
background-color: #1D597C;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 105px;
width: 564px;
text-align: left;
background-image: url(warmblue-Warm_Blue/img/bgheader.gif);
background-repeat: repeat-x;
}
.header .right {
overflow: auto;
width: 212px;
background-image: url(warmblue-Warm_Blue/img/bgheader_r.gif);
background-repeat: repeat-x;
background-color: #FF7D00;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}
/* navigation */
.navigation {
background: #D9E1E5 url(warmblue-Warm_Blue/img/nav.jpg);
border: 1px solid #ffffff;
height: 41px;
}
.navigation a {
background: transparent url(warmblue-Warm_Blue/img/nav.jpg) left top repeat-x;
border-right: 1px solid #D8EBD8;
color: #1C455E;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 18px;
text-decoration: none;
}
.navigation a:hover {
background: transparent url(warmblue-Warm_Blue/img/nav.jpg) left bottom;
color: #1C455E;
}
/* main */
.main {
border-top: 4px solid #FFF;
background: url(warmblue-Warm_Blue/img/bgmain.gif) repeat-y;
}
/* sub navigation */
.sidenav {
float: right;
width: 210px;
}
.sidenav h2 {
color: #1C455E;
font-size: 1em;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #D8EBD8;
}
.sidenav li {border-bottom: 1px solid #D8EBD8;}
.sidenav li a {
font-size: 1.1em;
color: #1C455E;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #EBF0F3;
color: #2E7198;
}
/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 531px;
}
.content .descr {
color: #1C455E;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
margin-left: 18px;
}
.content .imgright {
padding: 5px;
border: 1px solid #ADD1E7;
margin-left: 4px;
float: right;
}
.content p
{
color: #9A9A9A;
}
/* footer */
.footer {
background: url(warmblue-Warm_Blue/img/bgfooter.gif) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div>
<div class="top">
<div class="header">
<div class="left"> Warm Blue </div>
<div class="right">
<h2>Tableless Layout <br />
Valid CSS<br />
XHTML Strict </h2>
</div>
</div>
</div>
<div class="container">
<div class="navigation"><a href="http://www.free-css.com/">Home </a><a href="http://www.free-css.com/">Warm Blue </a><a href="http://www.free-css.com/">Integrated Labels </a><a href="http://www.free-css.com/">About Us </a><a href="http://www.free-css.com/">Contact Us </a>
<div class="clearer"><span></span></div>
</div>
<div class="main">
<div class="content">
<h3><img src="warmblue-Warm_Blue/img/Sunset.jpg" alt="" width="182" height="275" class="imgright" /> Tableless layout using valid css and XHTML strict.</h3>
<p> </p>
<p>Warm blue has been provided by www.peeloutlabels.com. Peel Out Labels provide integrated labels and cards along with content management systems and ecommerce solutions. </p>
<p>You may view our integrated label and card solutions at: www.peeloutlabels.com</p>
<p> Although the decision is yours, I would appreciate you leaving the link at the base of the page intact. Not only will you be supporting our company but you will also be providing motivation for us to create more <a href="http://www.free-css.com/">free XHTML templates</a>. </p>
<h3>Heading 2 Text </h3>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> </p>
<p></p>
<p> </p>
</div>
<div class="sidenav">
<h2>Link Block</h2>
<ul>
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Website Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Open Source Templates</a></li>
</ul>
<h2>Link Block</h2>
<ul>
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Website Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Open Source Templates</a></li>
</ul>
<br />
<br />
</div>
<div class="clearer"><span></span></div>
</div>
<div class="footer"> copyright 2007 Your company name here Design by <a href="http://www.peeloutlabels.co.uk">Peel Out Labels </a> </div>
</div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;"> Design downloaded from Free Templates - your source for <a href="http://www.free-css.com/">free web templates</a> </div>
</body>
</html>
Related examples in the same category