mistyblue
<!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">
<head>
<title>Misty Blue</title>
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
background-color: #FFFFFF;
font-size: 12px;
background-image: url(mistyblue-images/top-shade.jpg);
background-repeat: repeat-x;
}
.wrapper {
width: 650px;
margin: 0 auto;
}
/* Start Header */
.header {
margin: 30px 0px 10px 0px;
min-height: 118px;
}
* html .header {height: 118px} /* IE Min-Height Hack */
.header-left {
float: left;
width: 130px;
}
.header-right {
float: left;
width: 510px;
text-align: right;
}
/* End Header */
/* Start Navigation Bar */
.navbar {
margin: 0px 5px 0px 5px;
}
ul.navbar, li.nav-bar {
display: inline;
margin-right: 22px;
}
/* End Navigation Bar */
.block {
display: block;
border: 1px solid #ccc;
background-color: #F3F3F3;
padding: 4px;
}
blockquote {
margin-top: 20px;
background: url(mistyblue-images/quote-left.jpg) left top no-repeat;
}
blockquote div {
padding: 15px 15px;
background: url(mistyblue-images/quote-right.jpg) right bottom no-repeat;
}
/* Start Main Columns */
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 10px 0px 0px 0px;
display: inline; /* IE Hack */
width: 190px;
float: left;
}
#rightcolumn {
margin: 10px 0px 0px 15px;
display: inline; /* IE Hack */
float: left;
width: 440px;
min-height: 152px;
}
* html #rightcolumn {height: 155px} /* IE Min-Height Hack */
/* End Main Columns */
h1 {
margin-top: 10px;
font-size: 24px;
}
img {border: none; }
/* Start Links */
a:link {
text-decoration: none;
color: #83BDDA;
}
a:visited {
text-decoration: none;
color: #83BDDA;
}
a:hover {
text-decoration: none;
color: #5BA9CE;
}
/* End Links */
.footer {
padding: 7px 7px 7px 11px;
background-image: url(mistyblue-images/footer.jpg);
background-repeat: no-repeat;
width: 650px;
min-height: 32px;
margin-bottom: 15px;
}
* html .footer {height: 32px} /* IE Min-Height Fix */
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start header -->
<div class="header">
<!-- Start left header column -->
<div class="header-left"> <img src="mistyblue-images/logo.jpg" alt="Logo" /> </div>
<!-- End left header column -->
<!-- Start Right header column -->
<div class="header-right"> <br />
<br />
ADSENSE HERE </div>
<!-- Start Right header column -->
</div>
<!-- End header -->
<!-- Start Navigation Bar -->
<div class="navbar">
<ul>
<li class="nav-bar"><a href="http://www.free-css.com/"><img src="mistyblue-images/home.jpg" alt="home" /></a></li>
<li class="nav-bar"><a href="http://www.free-css.com/"><img src="mistyblue-images/services.jpg" alt="services" /></a></li>
<li class="nav-bar"><a href="http://www.free-css.com/"><img src="mistyblue-images/portfolio.jpg" alt="portfolio" /></a></li>
<li class="nav-bar"><a href="http://www.free-css.com/"><img src="mistyblue-images/our-team.jpg" alt="our team" /></a></li>
<li class="nav-bar"><a href="http://www.free-css.com/"><img src="mistyblue-images/location.jpg" alt="location" /></a></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- Start Main Columns -->
<div id="leftcolumn">
<ul>
<li class="block"><a href="http://www.free-css.com/">Home</a></li>
<li class="block"><a href="http://www.free-css.com/">Link</a></li>
<li class="block"><a href="http://www.free-css.com/">Link</a></li>
<li class="block"><a href="http://www.free-css.com/">Link</a></li>
<li class="block"><a href="http://www.free-css.com/">Link</a></li>
<li class="block"><a href="http://www.free-css.com/">Link</a></li>
</ul>
<blockquote>
<div>Aenean nec metus. Duis <br />
faucibus orci in dui. Curabitur faucibus, ipsum quis dapibus commodo, felis nisl vehicula massa, quis porta ligula neque quis elit. Fusce a urna et nulla luctus iaculis.<br />
Maecenas sodales dui vel <br />
urna.</div>
</blockquote>
<blockquote>
<div>Aenean nec metus. Duis <br />
faucibus orci in dui. Curabitur faucibus, ipsum quis dapibus commodo, felis nisl vehicula massa, quis porta ligula neque quis elit. Fusce a urna et nulla luctus iaculis.<br />
Maecenas sodales dui vel <br />
urna.</div>
</blockquote>
<br />
<p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/mistyblue-images/vcss" alt="Valid CSS!" /> </a> </p>
</div>
<!-- End Main Columns -->
<!-- Start Main Columns -->
<div id="rightcolumn"> <img src="mistyblue-images/feature.jpg" alt="Feature Image" />
<h1>Hello</h1>
<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</p>
<p> </p>
<h1>Goodbye</h1>
<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</p>
<p> </p>
<h1>See ya Later </h1>
<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</p>
<h1>Congratulations</h1>
<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</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- End Main Columns -->
<div style="display: block; clear: left; margin: -0.66em 0; visibility: hidden;"> HACK </div>
<!-- Start Footer -->
<div class="footer"> © Copyright with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006 </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category