groovyblue
<!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>Groovy Blue</title>
<style type='text/css'>
/*
Author: Donny Burnside
Website: http://www.ginger-ninja.net/
*/
/* Misc. */
* {
margin:0;
padding:0;
}
body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#393939;
margin:25px 0 4px 0;
color:#222222;
}
img {
border:0;
}
p {
margin-bottom:20px;
line-height:20px;
}
/* Structure */
#wrapper {
width:700px;
margin:0 auto;
}
#header {
height:100px;
line-height:100px;
background-image:url(groovyblue-images/bg-header.gif);
background-repeat:no-repeat;
padding-left:15px;
}
#navigation {
float:right;
margin-right:15px;
}
#content {
background-color:#fff;
background-image:url(groovyblue-images/bg-content.gif);
background-repeat:no-repeat;
background-position:top center;
padding:10px 5px;
}
#footer {
text-align:right;
background-image:url(groovyblue-images/bg-footer.gif);
background-repeat:no-repeat;
background-position:top center;
line-height:24px;
color:#efefef;
}
/* Navigation */
#navigation ul {
list-style-type:none;
}
#navigation li {
float:left;
text-align:center;
text-transform:lowercase;
}
#navigation li a {
display:block;
height:100px;
width:75px;
text-decoration:none;
color:#ffffff;
}
#navigation li a:hover {
color:#222222;
background:url(groovyblue-images/bg-navigation-hover.gif);
background-repeat:repeat-x;
}
#navigation .active {
color:#222222;
background:url(groovyblue-images/bg-navigation-hover.gif);
background-repeat:repeat-x;
}
/* Headings */
h1 {
font-size:30px;
font-weight:normal;
letter-spacing:-1px;
}
/* Link Colors */
h1 a {
color:#fff;
text-decoration:none;
}
h1 a:hover {
color:#fff;
}
#content a {
color:#222222;
text-decoration:none;
font-weight:bold;
}
#content a:hover {
color:#222222;
text-decoration:underline;
}
#footer a {
color:#ffffff;
text-decoration:none;
border-bottom:1px dotted #ffffff;
}
#footer a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
</ul>
</div>
<h1><a href="http://www.free-css.com/">Website Title</a></h1>
</div>
<div id="content">
<p>GROOVY BLUE was designed by Donny Burnside of Ginger-Ninja.net and is released under the <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons 2.5 license</a>. If you use the design all I ask is that you keep the credit link in the footer. Also, it would be nice if you email me at inbox[at]ginger-ninja.net to let me know how you're using the design. Editable Fireworks .PNG files are included for every image. Enjoy.</p>
<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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"><br />
© 2006 Your-Website.com | <a href="http://www.free-css.com/">XHTML</a> | Design by <a href="http://www.ginger-ninja.net/">Ginger Ninja!</a> </div>
</div>
</body>
</html>
Related examples in the same category