sunset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SUNSET</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
width : 100%;
font : 76% Helvetica, "lucida sans", Tahoma, "Trebuchet MS", Arial, sans-serif;
color : #a52a2a;
background : #191919;
}
/*WRAP*/
#container {
width : 100%;
margin : 0 auto;
background : #191919 url(sunset-images/sun.jpg) no-repeat;
color :#ccc;
line-height : 1.8em;
}
/*TOP BAR*/
#top {
height : 140px;
border-bottom : 1px solid #FFD300;
background : #FFD300 url(sunset-images/header.jpg) no-repeat;
color : #191919;
}
#top h1 {
float : right;
padding : 0;
margin : 0 5px 0 0;
font-size : 150%;
letter-spacing: 3px;
}
/*TOP BAR MENU*/
#menu {
height : 100px;
margin : 0;
padding : 0;
list-style-type : none;
list-style-image : none;
text-transform : lowercase;
}
#menu li {
float : left;
width :7em;
border-right : 1px solid #eee;
}
#menu a {
display : block;
height : 100px;
width : 7em;
font-weight : bold;
line-height : 50px;
padding : 40px 0 0 0;
text-align : center;
color : #000;
background : #FF7900;
}
#menu a:hover {
color : #fff;
background : #FF3B00 url(sunset-images/sun2.jpg);
}
/*LEFT SIDEBAR*/
#leftnav {
margin-top : 30px;
float : left;
width : 180px;
padding : 2em;
}
#leftnav p {
margin : 0 0 1em 0;
}
#leftnav h2 {
margin: 0 0 10px 0;
font-size : 150%;
letter-spacing: 5px;
color : #FFD300;
background : inherit;
}
/*MAIN CONTENT*/
#content {
margin : 30px 0 0 240px;
border-left : 1px solid #808080;
padding : 2em 3em 1em 3em;
}
#content h2 {
margin: 0 0 10px 0;
font-size : 150%;
letter-spacing: 5px;
color : #FFD300;
background : inherit;
}
/*FOOTER*/
#footer {
clear : both;
margin : 0;
padding : .5em 0 1em 0;
border-bottom : 0px solid #808080;
border-top : 1px solid #808080;
color : #eee;
background : #191919;
}
#footer img {
float : right;
}
/* seen by IE5mac only, by Philippe Wittenbergh www.l-c-n.com */
*>html #footer img {
margin : 0;
}
/* end */
#footer p {
padding-left : 5px;
}
/*LINKS*/
a:link, a:visited {
color : #FF7900 ;
background : inherit;
text-decoration : none;
}
a:hover {
color : #FFD300;
background : inherit;
text-decoration : none;
}
a:active {
color : #666;
background : inherit;
text-decoration : none;
}
.navlist li {
margin: 0 15px 5px 0;
padding: 2px;
font-size: 90%;
list-style-image:url(sunset-images/arrow.gif);
background: inherit;
color: #D5D9B4;
}
img {
border : none;
}
/*CLASS*/
.quote {
font-weight: bold;
border-top : 1px solid #808080;
padding : 10px;
}
/*TYPOGRAPHY*/
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Resources</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h1>Your Company Name</h1>
</div>
<div id="leftnav">
<h2>Navigation</h2>
<ul class="navlist">
<li><a href="http://www.free-css.com/">SNAPP HAPPY</a></li>
<li><a href="http://www.free-css.com/">Open Designs</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/">CSS play</a></li>
<li><a href="http://www.free-css.com/">LISTAMATIC</a></li>
<li><a href="http://www.free-css.com/"> LAYOUTGALA</a></li>
<li><a href="http://www.free-css.com/"> BLUEROBOT</a></li>
</ul>
<h2>Archives</h2>
<ul class="navlist">
<li><a href="http://www.free-css.com/">January</a></li>
<li><a href="http://www.free-css.com/">February</a></li>
<li><a href="http://www.free-css.com/">March</a></li>
<li><a href="http://www.free-css.com/">April</a></li>
<li><a href="http://www.free-css.com/">May</a></li>
</ul>
<p class="quote"> 'Hold me close, under the sunset and let Gods reds and oranges soothe your eyes, like this is all a dream.'</p>
</div>
<div id="content">
<h2>Welcome to <span style="color:#fff;">Sunset</span> Template</h2>
<blockquote>This page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. For more FREE CSS templates visit my website.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem. Quisque elit elit, tincidunt vitae, tempus et, venenatis eget, turpis. Suspendisse porttitor volutpat justo. Etiam bibendum, diam quis nonummy malesuada, tortor sapien laoreet metus, quis varius augue velit eget ligula. Praesent massa felis, pulvinar quis, fringilla eget, suscipit in, diam. Curabitur dapibus rhoncus eros.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem. Quisque elit elit, tincidunt vitae, tempus et, venenatis eget, turpis. Suspendisse porttitor volutpat justo. Etiam bibendum, diam quis nonummy malesuada, tortor sapien laoreet metus, quis varius augue velit eget ligula. Praesent massa felis, pulvinar quis, fringilla eget, suscipit in, diam. Curabitur dapibus rhoncus eros.</p>
<h2>Sub content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem. Quisque elit elit, tincidunt vitae, tempus et, venenatis eget, turpis. Suspendisse porttitor volutpat justo. Etiam bibendum, diam quis nonummy malesuada, tortor sapien laoreet metus, quis varius augue velit eget ligula. Praesent massa felis, pulvinar quis, fringilla eget, suscipit in, diam. Curabitur dapibus rhoncus eros.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem. Quisque elit elit, tincidunt vitae, tempus et, venenatis eget, turpis. Suspendisse porttitor volutpat justo. Etiam bibendum, diam quis nonummy malesuada, tortor sapien laoreet metus, quis varius augue velit eget ligula. Praesent massa felis, pulvinar quis, fringilla eget, suscipit in, diam. Curabitur dapibus rhoncus eros.</p>
</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> | 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