chesspiece
<!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>CHESSPIECE</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% Helvetica, "lucida sans", Arial, Sans-Serif;
line-height: 1.7em;
background: #eee url(chesspiece-images/bg.jpg) repeat-x;
color: #444;
}
/*WRAP*/
#wrap {
width: 760px;
margin: 0 auto;
padding: 0;
background: #fff;
color: #444;
}
/*TOPBAR */
#topbar {
width: 760px;
height: 200px;
margin: 0 auto;
padding: 0;
overflow: hidden;
background: #fff url(chesspiece-images/header.jpg);
color: #000;
}
#topbar h1 {
margin-top: 50px;
padding: 0;
letter-spacing: 3px;
font-size: 150%;
color: #F48129;
background: transparent;
}
#topbar h2 {
margin-left: 25px;
padding: 5px;
font-size: 90%;
letter-spacing: 3px;
color: #fff;
background: transparent;
}
#topbar img a {
margin: 0;
border: none;
}
#topbarleft {
float: left;
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff url(chesspiece-images/logo.jpg);
color: #000;
}
#topbarright {
float: right;
width: 460px;
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: #666;
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: #666;
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: #752D00;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #C0C0C0;
}
#right_sidebar ul li a:hover {
background: #F0DED2;
color: #FF7A29;
}
#right_sidebar p {
padding: 3px 0 0 0;
margin: 0;
line-height: 20px;
}
/*FOOTER BACKGROUND*/
#footerbg {
background: #000;
border-top: 5px solid #F2720E;
}
/*FOOTER*/
#footer {
width: 760px;
height: 200px;
margin: 0 auto;
text-align: left;
position: relative;
line-height: 1.5em;
background: #000;
color: #fff;
}
#footer p {
padding: 0;
list-style-type: none;
margin: 0;
color: #F0DED2;
}
#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: 1px solid #333;
color: #F0DED2;
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: silver;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #333;
}
#footer ul li a:hover {
background: #444;
color: #fff;
}
#footerleft {
float: left;
width: 225px;
margin: 0 20px 0 0;
padding: 0;
background: #000;
}
#footermiddle {
float: left;
width: 225px;
margin: 0 20px 0 0;
padding: 0;
background: #000;
}
#footerright {
float: right;
width: 225px;
margin: 0;
padding: 0;
background: #000;
}
#credits {
padding: 5px;
margin: 0;
background: #000;
color: #eee;
}
/*LINKS*/
a, a:visited {
color: #FF7A29;
background: inherit;
text-decoration: none;
}
a:hover {
color: #666;
background: inherit;
text-decoration: underline;
}
a img {
border: none;
}
/*CLASS*/
.small {
font-size: 90%;
font-weight: bold;
background: inherit;
color: #752D00;
}
/*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><em>company slogan here ....</em></h2>
</div>
<div id="content">
<div id="contentleft">
<h1>Main Content</h1>
<p class="small"><img src="chesspiece-images/clock.gif" alt="" /> February 28, 2007</p>
<blockquote>The page has been tested in Mozilla and IE7. This page validates as XHTML 1.0 Transitional using valid CSS. Top image from <a href="http://www.sxc.hu/">Stock xchg</a>. For more FREE templates visit <a href="http://www.mitchinson.net" title="my website" >my website</a>.</blockquote>
<p>Yacht, manor high-rise, silver estate respectable, brokerage echelon. Symphony, wishlist genuine pleasure, repertoire crafted panoramic club gold lifestyle cutlery. Gilded sheer gem blissfull dignified rare gifted first-class benefactor. Acumen, fashion theatre sheer gifted european becoming auction caviar sport gifted investments luxury, with doctoral. De-jour, on board cultered fine becoming travel monogram monogram rare, purebred. Silver acumen crafted symphony presidential reserved handmade fine tailored using, ballroom distinctly, stockmarket. </p>
<p><a href="http://www.free-css.com/"><img src="chesspiece-images/document.gif" alt="" /> Read more</a> | <a href="http://www.free-css.com/"><img src="chesspiece-images/comment.gif" alt="" /> Comments</a></p>
<h1>Sub Content</h1>
<p class="small"><img src="chesspiece-images/clock.gif" alt="" /> February 26, 2007</p>
<p>Handmade regal sport pearl accredited high-rise fashion wishlist respectable. Using, blissfull, gentlemen purebred becoming distinctly high-rise cruise. Fashion cultered ladies cutlery, architectural regal board genuine luxury five-star, housekeeping private regal, sport. Template inspired by <a href="http://www.briangardner.com/themes/vertigo-squared-wordpress-theme.htm">Brian Gardner's Wordpress themes.</a></p>
<p><a href="http://www.free-css.com/"><img src="chesspiece-images/document.gif" alt="" /> Read more</a> | <a href="http://www.free-css.com/"><img src="chesspiece-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 Design Community</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/">James Koster</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