shadesofgrey
<!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" xml:lang="en" lang="en">
<head>
<title>*SHADES of GREY*</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
font: 75% tahoma, Verdana, Arial, sans-serif;
line-height: 1.8em;
background: #eaeaea url(shadesofgrey-images/bg.jpg) top left repeat-x;
}
/*TOP BANNER*/
#header {
padding: 20px;
border-bottom: 1px solid #fff;
background: #333;
}
#header h1 {
padding: 0;
margin: 0;
font-family: Georgia, sans-serif;
font-weight: normal;
font-size: 180%;
color: #ccc;
}
/* TOP NAVIGATION */
#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #ccc;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
float: left;
display: block;
padding: 0.5em 2.5em 0.5em 1em;
text-decoration: none;
font-weight: bold;
font-size: 100%;
color: #73868c;
background: #ccc url(shadesofgrey-images/nav_slant.gif) no-repeat top right;
}
#nav #nav-1 a {
padding-left: 20px;
}
#nav a:hover {
color: #000;
}
/*MAIN CONTAINER*/
#container {
margin: 0 auto;
padding: 0;
width: 770px;
}
#contentleft {
float: left;
margin-top: 8px;
width: 500px;
padding: 0 1em 1em 1em;
}
#contentright {
float: right;
margin-top: 8px;
width: 200px;
padding: 0 1em 1em 1em;
background: #aaa;
}
/*FOOTER */
#footer {
font-size: 1em;
clear:both;
margin:0;
padding: 0.5em;
background: #333;
color: #aaa;
}
/*TYPOGRAPHY */
h1 {
font-family: Georgia, serif;
font-size: 180%;
padding: 30px 0 10px 0;
color: #73868c;
}
h2 {
font-family: Georgia, sans-serif;
font-size: 180%;
padding: 30px 0 10px 0;
color: #333;
}
/*LINKS*/
a:link, a:visited {
color : #666;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #73868c;
background : inherit;
text-decoration : none;
}
ul li {
list-style-type: none;
}
.navlist ul li {
list-style-image : url(shadesofgrey-images/arrow.gif);
padding-left : 5px;
margin-bottom : 0;
}
a img {
border: none;
}
/* IMAGES */
.imgleft {
float : left;
padding : 5px;
margin-right : 10px;
}
.imgright {
float : right;
padding : 5px;
margin-left : 10px;
}
/*3 COLUMNS*/
#bottom {
margin: 0 auto;
width: 770px;
}
#bottom h1 {
margin: 0;
letter-spacing: 3px;
font-family: Georgia, sans-serif;
font-size: 130%;
padding: 10px 0 10px 40px;
color: #73868c;
}
.col3,.col3center {
float: left;
width: 33%;
margin-bottom: 20px;
}
.col3center {
margin: 0;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/"><img src="shadesofgrey-images/blank.png" alt="" /></a> Your <span style="font-weight:bold; color:#73868C;">Company</span> Name</h1>
</div>
<div id="container">
<div id="navcontainer">
<ul id="nav">
<li id="nav-1"><a href="http://www.free-css.com/">Home</a></li>
<li id="nav-2"><a href="http://www.free-css.com/">About</a></li>
<li id="nav-3"><a href="http://www.free-css.com/">Portfolio</a></li>
<li id="nav-4"><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="contentleft">
<h1>Welcome to <span style="font-weight:bold; color:#C4DA64;">Shades of Grey</span> Template</h1>
<p><img class="imgleft" src="shadesofgrey-images/info.png" alt="" /><strong> 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. The images used in this template are courtesy of <a href="http://www.sxc.hu/" title="free images">stock xchng</a>. The top navigation menu is from <a href="http://www.snook.ca/archives/html_and_css/improved_bullet/" title="Article:Bulletproof Slants">Article:Bulletproof Slants</a> & the icons are from <a href="http://www.MouseRunner.com" title="free resources"> Mouse Runner</a>.</strong></p>
<p><strong><em>For more FREE CSS templates visit <a href="http://www.mitchinson.net">my website</a>.</em></strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque libero orci, interdum id, tempus a, gravida sed, odio. In tincidunt, turpis eu dignissim malesuada, urna massa tincidunt sem, a pharetra turpis nisi sit amet ante. Donec accumsan, diam nec nonummy fringilla, magna quam sollicitudin tellus, quis dignissim lorem dolor non dolor. Fusce vitae arcu. Duis sodales rutrum quam. Aenean nisi. Nullam vel justo sit amet tortor ullamcorper tempor. Praesent fermentum, massa ac tincidunt semper, massa elit malesuada ipsum, euismod commodo tortor arcu iaculis metus. Etiam hendrerit libero eu ante. Cras elit lectus, adipiscing a, sollicitudin eget, varius non, ipsum. Praesent ac massa. Duis pellentesque. Maecenas sit amet risus in purus scelerisque molestie. Sed posuere ullamcorper velit.</p>
<p>Nullam pulvinar sagittis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi luctus eros eu eros. Duis blandit nonummy risus. Pellentesque et nisl in quam ultrices ultricies. Proin egestas, massa ac consectetuer imperdiet, nibh elit ultricies turpis, at consequat eros nibh vitae felis. In blandit. In sit amet orci quis tellus hendrerit tempus. Donec porttitor massa id nulla. Nunc sem metus, dapibus id, hendrerit vitae, auctor nec, risus.</p>
</div>
<div id="contentright">
<h2>Header</h2>
<ul>
<li><a href="http://www.free-css.com/"><img src="shadesofgrey-images/home.png" alt="homepage" /></a></li>
<li><a href="http://www.free-css.com/"><img src="shadesofgrey-images/magnifier.png" alt="search" /></a></li>
<li><a href="http://www.free-css.com/"><img src="shadesofgrey-images/mail.png" alt="contact" /></a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque libero orci, interdum id, tempus a, gravida sed, odio. Maecenas sit amet risus in purus scelerisque molestie. <a href="http://www.free-css.com/"> Read more</a> » </p>
</div>
</div>
<div id="footer">
<div id="bottom">
<div class="col3center">
<h1>Web Resources</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">CSS Drive</a></li>
</ul>
</div>
</div>
<div class="col3">
<h1>Links</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">BBC News Frontpage</a></li>
<li><a href="http://www.free-css.com/">Hartlepool Today</a></li>
<li><a href="http://www.free-css.com/">SV Horizons Travelblog</a></li>
</ul>
</div>
</div>
<div class="col3">
<h1>More Links</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Dynamic Drive CSS Library</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/">CSS Play</a></li>
</ul>
</div>
</div>
<a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a rel="license" 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