seabreeze
<!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">
<head>
<title>Sea Breeze</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "lucida sans", "Trebuchet MS", verdana, tahoma, arial, sans-serif;
line-height : 1.7em;
background : #333 url(seabreeze-images/bgd.jpg) no-repeat;
color : #eee;
}
a:link, a:visited, a:active {
color : #666;
background : inherit;
}
a:hover {
color : #aaa;
background : inherit;
}
h1 {
font-size : 120%;
color : #fff;
background : inherit;
margin : 0;
padding : 20px;
}
#content h2 {
font-size : 140%;
text-transform : uppercase;
color : #fff;
background : inherit;
padding : 10px 0 10px 30px;
margin : 0;
}
p {
margin : 0;
text-align : left;
}
#container {
width : 750px;
border-right : 0 solid #ccc;
border-left : 0 solid #ccc;
margin-left : 0;
margin-right : auto;
color : #333;
background : inherit;
}
#header {
width : 750px;
height : 172px;
border-bottom : 0 solid #ccc;
background : transparent url(seabreeze-images/head.jpg) no-repeat;
margin-bottom : 0;
}
#title {
width : 750px;
height : 50px;
margin-bottom : 10px;
background : transparent url(seabreeze-images/title.jpg) no-repeat;
}
#title p {
text-align : right;
line-height : 1.5em;
text-transform : uppercase;
letter-spacing : 5px;
color : #c0d1e1;
background : inherit;
font-size : 120%;
padding : 20px 10px 20px 0;
}
#leftcol {
width : 260px;
float : right;
padding : 5px 0 5px 0;
}
#leftcol p {
padding : 5px 20px 5px 20px;
margin : 0;
}
#leftcol h2 {
font-size : 140%;
text-transform : uppercase;
color : #fff;
background : inherit;
padding : 10px 0 10px 20px;
margin : 0;
}
#leftcol ol, ul {
font-size : 100%;
color : #fff;
background : inherit;
}
#content {
margin-right : 0;
width : 460px;
}
#content p {
font-size : 100%;
line-height : 1.5em;
padding : 5px 20px 5px 30px;
margin : 0;
}
#footer {
width : 750px;
height : 50px;
clear : right;
color : #333;
background : #999;
padding : 5px 0 5px 0;
}
#footer p {
text-align : left;
padding-left : 25px;
font-size : 80%;
}
#navcontainer {
width : 200px;
margin-left : 20px;
padding-bottom : 20px;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 160px;
color : #c0d1e1;
background-color : #333;
border-bottom : 1px solid #c0d1e1;
}
#navcontainer a:link, #navlist a:visited {
background : #333;
color : #c0d1e1;
text-decoration : none;
}
#navcontainer a:hover {
background-color : #32679b;
color : #d6ddbc;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="title">
<p>Sea Breeze Template</p>
</div>
<div id="leftcol">
<h2>Navigate</h2>
<p> Welcome to your two column right sided layout. </p>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Mauris consectetuer congue ante.</li>
<li>Sed pulvinar consectetuer risus.</li>
<li>Maecenas placerat laoreet nisi.</li>
<li>Donec faucibus ligula non purus.</li>
</ul>
</div>
<div id="content">
<h2>Welcome</h2>
<p><em>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS. This is a <a href="http://www.free-css.com/">link</a> to nowhere. For more templates visit my website.</em></p>
<p> Fusce lorem. Suspendisse sit amet lectus. Nam laoreet, diam vel consequat consequat, eros nunc consectetuer libero, non elementum urna dui sed wisi. Phasellus vitae sapien. Nunc vestibulum malesuada dolor. Phasellus commodo neque nec purus. Praesent nec wisi id augue pulvinar ultrices. Ut malesuada, orci eget bibendum varius, sem ligula ultricies urna, at pharetra justo elit in diam. Vestibulum sit amet felis. In velit. Aenean sagittis pede vitae sem. In hac habitasse platea dictumst. Sed eleifend molestie est. Phasellus enim est, facilisis vel, placerat facilisis, ultricies sit amet, erat. Nullam sit amet velit et wisi dignissim placerat. Phasellus non lorem nec nunc aliquam lobortis. Nullam nec lectus. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec nibh in massa pellentesque scelerisque. Nullam in odio. Curabitur accumsan aliquet leo. Sed id nibh. Sed tempor. Integer ultricies. Morbi tempor urna eu ligula. Quisque nec diam. Aliquam imperdiet purus congue metus sodales imperdiet. Maecenas faucibus, ipsum eu pulvinar laoreet, dolor lacus tincidunt sapien, vel hendrerit magna nisl vel risus. Aliquam placerat, nibh eu vehicula molestie, quam ligula auctor felis, a luctus purus orci non quam. </p>
</div>
<div id="footer">
<p><a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category