swansong
<!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>SWANSONG</title>
<style type='text/css'>
body {
margin : 20px;
padding : 0;
font : 73% "Trebuchet MS", verdana, arial, sans-serif;
color : #666;
background : #003250 url(swansong-img/bgd.png) repeat;
}
#container {
width : 750px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*TOP BANNERs*/
#banner {
float : left;
width : 510px;
height : 160px;
padding : 0;
margin-bottom : 15px;
color : #666;
background : inherit;
}
#bannerb {
float : right;
width : 200px;
margin : 0 0 15px 10px;
padding : 0;
color : #666;
background : #f2f2f5;
}
/*TOP MENU*/
#navcontainer {
clear : both;
width : 100%;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin-left : 0;
background : #036;
color : #fff;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 1em;
text-decoration : none;
border-right : 1px solid #fff;
background : #036;
color : #fff;
}
#navcontainer ul li a:hover {
background : #a1aac9;
color : #fff;
}
#active a:link, #active a:visited, #active a:hover {
background : #a1aac9;
color : #fff;
}
/*CENTRE CONTENT*/
#content {
padding : 10px;
margin-left : 190px;
margin-right : 190px;
background : inherit;
color : #666;
}
/*LEFT CONTENT*/
#sidebar {
float : left;
width : 170px;
margin : 0 0 0 0;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*LEFT MENU*/
#menu {
width : 160px;
padding : 10px 0 0 0;
}
#menu ul {
margin : 0;
padding : 0;
list-style-type : none;
}
#menu li {
margin : 0 0 0.1em 0;
}
#menu a {
display : block;
width : 140px;
padding : 0.1em 0.8em;
text-decoration : none;
color : #fff;
background : #003366;
}
#menu a:hover {
background : #a1aac9;
color : #fff;
}
/*RIGHT CONTENT*/
#sidebar-b {
float : right;
width : 170px;
margin : 0;
padding : 10px;
border-left : 1px solid #999;
background : #f2f2f5;
color : #666;
}
/*RIGHT SCROLLBAR*/
div.scroll {
overflow : auto;
height : 15em;
width : 140px;
padding : 1ex;
color : #333;
background : #f2f2f5;
border : 1px solid #eee;
margin : 20px 0 25px 10px;
}
/*FOOTER*/
#footer {
clear : both;
padding : 5px;
margin-top : 5px;
color : #bbd2e0;
background : #003366;
}
#footer a:link, #footer a:visited {
background : inherit;
color : #eee;
text-decoration : none;
}
#footer a:hover {
border-bottom : 1px dashed #f2f2f5;
background : inherit;
color : #f2f2f5;
}
/*TYPOGRAPHY*/
h1, h2 {
margin : 0 0 10px 5px;
letter-spacing : 3px;
font-size : 120%;
color : #003366;
background : inherit;
}
h3 {
font-size : 110%;
color : #826c45;
background : inherit;
}
/*LINKS*/
a {
color : #826c45;
font-weight : bold;
text-decoration : none;
background : inherit;
}
a:hover {
color : #697899;
background : inherit;
}
/*CLASSES*/
.news {
font-size : 100%;
background : inherit;
color : #333;
}
.sitename {
font-size : 180%;
margin : 0 0 10px 0;
color : #826c45;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<div id="banner"> <img src="swansong-img/swan_banner.jpg" alt="swan" title="swan" /> </div>
<div id="bannerb">
<p class="sitename">Your Company Name</p>
<h1>About Us</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Active link</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>
<div id="sidebar">
<h2>Navigation</h2>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Snapp Happy</a></li>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">James Koster</a></li>
<li><a href="http://www.free-css.com/">OSWD</a></li>
<li><a href="http://www.free-css.com/">CSS play</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
</ul>
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
<h2>More Links</h2>
<ul>
<li><a href="http://www.free-css.com/">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
</ul>
</div>
<div id="sidebar-b">
<h2>News & Updates</h2>
<div class="scroll">
<h3>Jan 01 2006</h3>
<p class="news"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
<h3>Dec 02 2005</h3>
<p class="news"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
</div>
<h2>More Links</h2>
<ul>
<li><a href="http://www.free-css.com/">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div id="content">
<h1>Welcome to Swansong Template</h1>
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE templates visit my website.</blockquote>
<p>The top and side navigation bars are from Listamatic and have been modified by me to fit in with the colour scheme. </p>
<h1>Filler Text</h1>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
</div>
<div style="clear:both"> </div>
<div id="footer"> <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><br/>
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> </div>
</div>
</body>
</html>
Related examples in the same category