smoothandsleek
<!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>Smooth and Sleek</title>
<style type='text/css'>
/*
Author : Christopher Robinson
Email : christopher@edg3.co.uk
Website : http://www.edg3.co.uk/
*/
* {
border:0;
margin:0;
padding:0;
}
/* body */
body {
background:#fff;
color:#666;
font:0.75em/100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
line-height:1.4em;
}
/* general */
a {
color:#9C0;
text-decoration:none;
}
a:hover {
color:#555;
text-decoration:none;
}
/* header */
#header {
background:#323232 url('smoothandsleek-image/background_header.jpg') center repeat-y;
width:100%;
}
#header:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
#header_inside {
border-left:1px solid #bbb;
border-right:1px solid #bbb;
margin:0 auto;
width:800px;
}
#header_inside h1 {
color:#fff;
float:left;
font:3.2em 'Trebuchet MS', Verdana, sans-serif;
height:100px;
line-height:100px;
margin:0 0 0 20px;
width:180px;
}
#header_inside h1 span {
color:#9c0;
}
#header_inside ul {
float:right;
height:100px;
list-style:none;
width:600px;
}
#header_inside ul li {
border-right:1px solid #555;
float:right;
height:100px;
list-style:none;
width:75px;
}
#header_inside ul li a {
color:#fff;
display:block;
height:50px;
line-height:50px;
padding:50px 0 0;
text-align:center;
width:75px;
}
#header_inside ul li a:hover {
background:#fff;
color:#111;
}
#header_inside ul li a.active {
background:#fff;
color:#111;
}
/* content */
#content {
background:#fff url('smoothandsleek-image/background_content.jpg') center repeat-y;
width:100%;
}
#content:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
#content_inside {
border-left:1px solid #bbb;
border-right:1px solid #bbb;
margin:0 auto;
width:800px;
}
#content_inside_sidebar {
border-left:1px solid #bbb;
float:right;
line-height:175%;
margin:5px 0 5px 570px;
padding:0 0 0 10px;
position:absolute;
width:200px;
}
#content_inside_sidebar h2 {
background:#fff;
color:#000;
font-size:110%;
font-weight:400;
padding:5px 0;
text-align:right;
}
#content_inside_sidebar ul {
letter-spacing:-1px;
list-style:none;
margin:0 0 10px;
}
#content_inside_sidebar ul li {
list-style:none;
}
#content_inside_sidebar ul li a {
border-bottom:1px solid #e9e9e9;
display:block;
padding:3px;
text-align:right;
width:194px;
}
#content_inside_sidebar ul li a:hover {
background:#ddd;
color:#000;
}
#content_inside_main {
background:#fff;
letter-spacing:-1px;
line-height:175%;
margin:0 auto;
padding:10px 235px 10px 10px;
width:550px;
}
#content_inside_main h1 {
border-bottom:1px solid #ccc;
font-size:125%;
padding:0 0 2px;
}
#content_inside_main h2 {
color:#ccc;
font-size:115%;
text-align:right;
}
#content_inside_main p {
padding:0 0 10px;
}
/* footer */
#footer {
background:#323232 url('smoothandsleek-image/background_footer.jpg') center repeat-y;
height:100px;
width:100%;
}
#footer:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
#footer_inside {
border-left:1px solid #bbb;
border-right:1px solid #bbb;
height:100px;
margin:0 auto;
width:800px;
}
#footer_inside p {
color:#fff;
line-height:100px;
text-align:center;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="smoothandsleek-image/favicon.ico" />
</head>
<body>
<div id="header">
<div id="header_inside">
<h1><span>Site</span> Name</h1>
<ul>
<li><a href="http://www.free-css.com/">link six</a></li>
<li><a href="http://www.free-css.com/">link five</a></li>
<li><a href="http://www.free-css.com/">link four</a></li>
<li><a href="http://www.free-css.com/">link three</a></li>
<li><a class="active" href="http://www.free-css.com/">active link</a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content_inside">
<div id="content_inside_sidebar">
<h2>Recent Entries</h2>
<ul>
<li><a href="http://www.free-css.com/">Hammond Airlifted To New Hospital</a></li>
<li><a href="http://www.free-css.com/">EDG3 Design Seven Released</a></li>
<li><a href="http://www.free-css.com/">Hammond Has Taken First Steps</a></li>
<li><a href="http://www.free-css.com/">Usb Cell</a></li>
<li><a href="http://www.free-css.com/">EDG3 Design Six Released</a></li>
</ul>
<h2>Sponsered Links</h2>
<ul>
<li><a href="http://www.free-css.com/">4Templates</a></li>
<li><a href="http://www.free-css.com/">Christopher Robinson</a></li>
<li><a href="http://www.free-css.com/">EVO Hosting</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">Text Link Ads</a></li>
<li><a href="http://www.free-css.com/">W3C Sites</a></li>
</ul>
</div>
<div id="content_inside_main">
<h1>Important</h1>
<p>Licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. I have left the actual text design style very basic for you to add your own text / header / quotes / list etc. styles yourself.</p>
<h1>header two</h1>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
<h1>header three</h1>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit.</p>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit.</p>
<p>Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
<p>Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inside">
<p>Copyright © <a href="http://www.free-css.com/">Smooth and Sleek</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> | Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a href="http://validator.w3.org/">XHTML</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category