limelight
<!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>Limelight</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0 auto;
padding: 0;
font: 73% "lucida sans", Arial, Helvetica, Sans-Serif;
line-height: 1.7em;
background: #fff url(limelight-images/bg.jpg) repeat-x;
color: #555;
}
/*WRAP*/
#wrap {
width: 760px;
margin: 0 auto;
padding: 0;
background: #fff;
color: #555;
}
/*TOPBAR */
#topbar {
width: 760px;
height: 200px;
margin: 0 auto;
padding: 0;
overflow: hidden;
background: #fff url(limelight-images/header.jpg);
color: #000;
}
#topbar h1 {
margin-top: 30px;
padding: 20px;
letter-spacing: 3px;
font-size: 150%;
color: #fff;
background: transparent;
}
#topbar h2 {
margin: 5px;
padding: 5px;
font-size: 90%;
letter-spacing: 3px;
color: #fff;
background: transparent;
}
#topbar img a {
margin: 0;
border: none;
}
#topbarleft {
float: left;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
background: #fff url(limelight-images/logo.jpg);
color: #000;
}
#topbarright {
float: right;
width: 560px;
text-align: right;
margin: 0;
padding: 10px 0 0 0;
}
#topbarright li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#topbarright ul {
margin: 0;
padding: 0;
}
#topbarright a, #topbarright a:visited {
color: #000;
font-size: 120%;
font-weight: bold;
margin: 0;
padding: 6px 10px 6px 10px;
text-decoration: none;
}
#topbarright a:hover {
color: #666;
font-weight: bold;
text-decoration: underline;
}
/*CONTENT */
#content {
width: 760px;
margin: 0 auto;
padding: 0;
}
#content p {
padding: 0 0 10px 0;
margin: 0;
line-height: 2em;
}
#content h1 {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
border-bottom: 1px solid #ccc;
font: normal 200% Century Gothic, Verdana, Arial, Sans-Serif;
color: #809337;
background: inherit;
}
#content h2 {
padding: 20px 0 10px 0;
margin: 0;
border-bottom: 1px solid #ccc;
font: normal 200% Century Gothic, Verdana, Arial, Sans-Serif;
color: #809337;
background: inherit;
}
#contentleft {
float: left;
width: 470px;
margin: 0;
padding: 0 0 20px 0;
}
/*RIGHT SIDEBAR*/
#right_sidebar {
float: right;
width: 225px;
margin: 20px 0 0 20px;
padding: 0 0 20px 0;
border-bottom: 0px solid #ccc;
}
#right_sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#right_sidebar ul li {
display: inline;
padding: 0;
margin: 0;
}
#right_sidebar ul li a {
display: block;
color: #000;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #C0C0C0;
}
#right_sidebar ul li a:hover {
background: #eee;
color: #7E9135;
}
#right_sidebar p {
padding: 3px 0 0 0;
margin: 0;
line-height: 20px;
}
/*FOOTER BACKGROUND*/
#footerbg {
background: #555;
border-top: 5px solid #A6BA61;
}
/*FOOTER*/
#footer {
width: 760px;
height: 200px;
margin: 0 auto;
text-align: left;
position: relative;
line-height: 1.5em;
background: #555;
color: #fff;
}
#footer p {
padding: 0;
list-style-type: none;
margin: 0;
color: #fff;
}
#footer h2 {
padding: 0 0 20px 0;
margin: 15px 0 0 0;
text-transform: uppercase;
letter-spacing: 3px;
font: bold 120% Arial, Helvetica, Sans-Serif;
border-bottom: 2px solid #666;
color: #A6BA61;
background: inherit;
}
#footer a {
color: #aaa;
text-decoration: none;
}
#footer a:hover {
color: #fff;
text-decoration: none;
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer ul li {
display: inline;
padding: 0;
margin: 0;
}
#footer ul li a {
display: block;
color: #B5C28A;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #666;
}
#footer ul li a:hover {
background: #444;
color: #fff;
}
#footerleft {
float: left;
width: 225px;
margin: 0 20px 0 0;
padding: 0;
background: #555;
}
#footermiddle {
float: left;
width: 225px;
margin: 0 20px 0 0;
padding: 0;
background: #555;
}
#footerright {
float: right;
width: 225px;
margin: 0;
padding: 0;
background: #555;
}
#credits {
padding: 5px;
margin: 0;
background: #555;
color: #fff;
}
/*LINKS*/
a, a:visited {
color: #A6BA61;
background: inherit;
text-decoration: none;
}
a:hover {
color: #7E9135;
background: inherit;
text-decoration: underline;
}
a img {
border: none;
}
/*CLASS*/
.small {
font-size: 90%;
font-weight: bold;
background: inherit;
color: #809337;
}
/*TYPOGRAPHY*/
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="topbar">
<div id="topbarleft"> </div>
<div id="topbarright">
<ul>
<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/">Product</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<h1>Your Site Name</h1>
<h2>company slogan here ....</h2>
</div>
<div id="content">
<div id="contentleft">
<h1>Main Content</h1>
<p class="small"><img src="limelight-images/clock.gif" alt="" /> February 28, 2007</p>
<blockquote>This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 & 1280x1064. For more FREE templates visit my website.</blockquote>
<p>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. </p>
<p><a href="http://www.free-css.com/"><img src="limelight-images/document.gif" alt="" /> Read more</a> | <a href="http://www.free-css.com/"><img src="limelight-images/comment.gif" alt="" /> Comments</a></p>
<h1>Sub Content</h1>
<p class="small"><img src="limelight-images/clock.gif" alt="" /> February 26, 2007</p>
<p>Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats! Template inspired by Brian Gardner's Wordpress themes.</p>
<p><a href="http://www.free-css.com/"><img src="limelight-images/document.gif" alt="" /> Read more</a> | <a href="http://www.free-css.com/"><img src="limelight-images/comment.gif" alt="" /> Comments</a></p>
<div style="clear:both;"></div>
</div>
<div id="right_sidebar">
<ul>
<li id="About">
<h2>About Us</h2>
<p>Monogram career cutlery philanthropic society reserved handmade charity distinctly portfolio suite grande architectural five-star.</p>
</li>
<li id="Visit">
<h2>Worth a visit</h2>
<ul>
<li><a href="http://www.free-css.com/" id="current">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>
</ul>
</li>
<li id="Articles">
<h2>Recent Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">Embedding Windows Media Files</a></li>
<li><a href="http://www.free-css.com/">Installing Apache PHP & MySQL</a></li>
</ul>
</li>
<li id="Archives">
<h2>Monthly Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">February 2007</a></li>
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div id="footerbg">
<div id="footer">
<div id="footerleft">
<h2>Resources</h2>
<ul>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/"> Layout Gala</a></li>
<li><a href="http://www.free-css.com/"> Bluerobot</a></li>
</ul>
</div>
<div id="footermiddle">
<h2>Blogs</h2>
<ul>
<li><a href="http://www.free-css.com/">SV Horizons</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">Another</a></li>
</ul>
</div>
<div id="footerright">
<h2>Design Showcase</h2>
<ul>
<li><a href="http://www.free-css.com/">CSS Vault</a></li>
<li><a href="http://www.free-css.com/">CSS Zen Garden</a></li>
<li><a href="http://www.free-css.com/">CSS Heaven</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="credits">
<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>
</body>
</html>
Related examples in the same category