greyworld
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GreyWorld</title>
<style type='text/css'>
/*
sNews 1.5 RC 2 - Grey World Design
by Herreman David
http://www.free-css-templates.com
*/
* { padding: 0; margin: 0 }
body {
margin: 0 auto;
padding: 0; background: #FFF url(greyworld-images/topbg.jpg) repeat-x top;
font: .8em Verdana, Arial, Sans-Serif;
line-height: 1.4em;
color : #000
}
.content {
margin: 0 auto;
padding: 0;
width: 800px;
background: transparent url(greyworld-images/imgtop.jpg) no-repeat top center
}
#top { width: 800px; height: 111px }
#part1 { height: 72px; width: 800px; margin: 0; padding: 0 }
#top h1 { padding: 25px 0 0 0px; color: #555; font-size: 1.6em; background: transparent }
#top h1 a { color: #555; text-decoration: none; background: transparent }
#top h2 { padding: 0px 0 0 0px; background: transparent; color: #FFF; font-size: 90%; font-family: Arial, Verdana, Helvetica, Sans-Serif }
#top .padding { padding-top: 5px }
/* custom search box ************/
#search { float: right; padding: 25px 0px 0px 0px; margin: 0; background: transparent }
#search input.text {
background-image: url(greyworld-images/searchbox.gif);
width: 126px;
height: 13px;
border: 0;
padding-left: 5px;
padding-top: 2px;
font-size: 0.9em
}
#search input.searchbutton { border:0; background: transparent; color: #666; font-size: 10px; font-weight: bold; cursor: pointer }
/* BREADCRUMS PART ***************************************/
#breadcrumbs{
height: 28px;
background: transparent;
width: 800px;
margin: 10px 0;
color: #aaa;
padding-left: 0px;
font-size: 0.8em
}
#breadcrumbs a { text-decoration: none }
/* TOP MENU PART PART ------ **********************************/
#topmenu { float: right; margin: 0; padding: 0; background: transparent; height: 31px; width: 800px }
#topmenu ul { list-style: none; padding: 9px 0; margin: 0; float: right; background-color: transparent }
#topmenu li {
width: auto !important;
width: 0%;
float: left;
margin: 0;
font-size: 10px;
line-height: 30px;
white-space: nowrap;
background: url(greyworld-images/menul_a.gif) top left no-repeat;
background-color: transparent;
list-style: none;
padding-right: 2px
}
#topmenu a {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1.1em;
display: block;
padding-left: 0px;
padding-right: 10px;
text-decoration: none;
color: #FFF;
background: url(greyworld-images/menur_a.gif) top right no-repeat;
margin-top: 0px;
margin-left: 9px
}
#topmenu a.current { font-weight: bold }
/*** Main area *****/
#main { margin: 0 auto; width: 800px; padding-top: 0px; background: transparent }
a { color: #0066B3; background: inherit }
h1 { font: bold 1.9em Arial, Arial, Sans-Serif }
h2 { font: bold 1.2em Arial, Arial, Sans-Serif; padding: 0; margin: 0 }
ul { padding: 0; margin: 0 }
li { list-style-type: none }
.capital { float:left; color:silver; font-size:100px; line-height:70px; padding:2px; font-family: "Times New Roman", times, Sans-Sherif; background: #FFF }
#left { float: left; width: 550px; padding: 0; color: #555; background: #FFF }
#left p { color: #555; text-align: justify; margin: 7px 0 7px 0; background: inherit }
#left img { margin: 0px 10px 3px 0px; position: relative; float: left; border: 1px solid #f5f5f5; padding: 1px; background: #FFF }
#left h2 { color: #999; width: 100%; border-bottom: 1px solid #BBB; margin-bottom: 8px; line-height: 20px; background: inherit }
#left ul { }
ul#left ul { list-style-position: inside; margin-left: 2px }
#left ul li { list-style-type: square; margin-left: 15px }
#left ul ul li { list-style: none; margin-left: 10px; list-style-type: lower-alpha; list-style-position: inside }
#left .citation { background: #FFF url(greyworld-images/cit1.gif) no-repeat top left; font-style: italic; padding: 10px 0px 0 35px; font-size: 1.0em }
#left .citation p { background: #FFF url(greyworld-images/cit2.gif) no-repeat bottom right; padding-bottom: 20px; padding-right: 35px; color: #555; }
.torightc { float: right; margin: 0 10px; border: 1px solid #ddd; padding: 5px; background: #f5f5f5 }
#left blockquote { text-align: justify; border-left: 8px solid #f0f0f0; padding-left: 8px; margin-left: 15px; margin-top: 5px; background: inherit }
#left .date { margin-bottom: 25px; margin-top: 10px; padding-top: 5px; text-align: right; border-top: 1px solid #f5f5f5; background: inherit }
#left .date a { text-decoration: none; background: inherit; }
#left .comment { background: #F5F5F5 }
#left .comment .date {
text-align: left;
background: #CCC;
margin: -10px -10px 8px -10px;
padding: 5px;
color: #FFF;
font-weight: bold;
border: none
}
#left .comment .date a { color: #FFF; text-decoration: underline; background: inherit }
#left br { margin: 0px 0 5px 0; background: inherit }
#right { float: right; width: 210px; margin: 0; background: #FFF }
#right h2 {
color: #FFF;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9em;
padding-left: 8px;
line-height: 20px;
background: #a1a1a1 url(greyworld-images/rh2.jpg) no-repeat top center;
margin-bottom: 5px
}
#right .box { border: none; padding: 0px 0 10px 0; margin: 0 0 1em 0; background: #f5f5f5 url(greyworld-images/rbot.jpg) no-repeat bottom center }
#right .box ul { padding-left: 8px }
#right .box li a { text-decoration: none; font-size: 0.9em }
.extra {
text-align: right;
padding:8px;
font-size:1.8em;
font-family: "Times New Roman", times;
margin:0px;
color: #AAA;
line-height: 25px;
background: #FFF;
}
.extra h3 { color: #CCD8E1; margin-bottom: 5px; font-size: 1.2em; background: #FFF }
.extra a { color: #8FB9DB; text-decoration: none; font-style: italic; background: #FFF }
.extra p { margin-top: 15px; background: #FFF }
#footer { clear: both; border-top: 2px dotted #e5e5e5; margin: 0 0 3em 0; color: #777; font-size: 0.8em; background: #FFF }
#footer .right { float: right; text-align: right; background: #FFF; }
#footer a { text-decoration: none; background: #FFF }
/* SNEWS */
fieldset { border: 1px solid #ddd; padding: 10px 8px; margin: 0 0 8px 0; background: #f5f5f5; color: #000 }
input { padding: 3px; margin: 0; border: 1px solid #BBB; margin-top: 5px }
textarea { width: 97%; height: 20em; padding: 3px; border: 1px solid #BBB }
.comment { background: #eee; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc }
.commentsbox { background: #f5f5f5; color: #808080; padding: 10px; margin: 0 0 10px 0; border: 1px solid #ddd }
</style>
</head>
<body>
<div class="content">
<div id="top">
<div id="part1">
<div id="search"> </div>
<h1><a href="http://www.free-css.com/">Grey World Design</a></h1>
<h2>The Best Slogan here - H2</h2>
</div>
<div id="topmenu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ARTICLES</a></li>
<li><a href="http://www.free-css.com/">GALLERY</a></li>
<li><a href="http://www.free-css.com/">AFFILIATES</a></li>
<li><a href="http://www.free-css.com/">ARTICLES</a></li>
<li><a href="http://www.free-css.com/">ABOUTS US</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="breadcrumbs"></div>
<div id="main">
<div id="left">
<h2>Download this template for free!</h2>
<p> <img src="greyworld-images/img_sample.jpg" alt="img" /> <span class="capital">P</span>hasellus quis est eget metus blandit lacinia. Quisque molestie, diam a dignissim mattis, lectus felis placerat lectus, eget sollicitudin neque nunc eleifend metus. <a href="http://www.free-css.com/">Curabitur ullamcorper</a> sem ac pede gravida sagittis. Sed et felis. Vestibulum placerat, ipsum nec congue auctor, ante massa placerat felis, sit amet <strong>consectetuer</strong> elit arcu vitae metus. In commodo, risus sed tristique luctus, ipsum diam dapibus eros, et vehicula dui augue tempus quam. In laoreet. Suspendisse et pede volutpat lacus interdum consequat. Cras dui. Quisque ac turpis nec ligula rutrum pulvinar. Quisque lectus ligula, vehicula nec, fringilla eu, dignissim ut, nisl. Vestibulum non turpis. Maecenas urna. </p>
<div class="citation">
<p>Sed et felis. Vestibulum placerat, ipsum nec congue auctor, ante massa placerat felis, sit amet consectetuer elit arcu vitae metus. </p>
</div>
<div class="date"><a href="http://www.free-css.com/">Comments (5)</a> . 05 Jan 2007 . 10:37</div>
<h2>Lorem Ipsum</h2>
<div class="torightc "> <strong>List example</strong>:
<ul>
<li>list line 1</li>
<li>list line 2
<ul>
<li>sublist line a</li>
<li>sublist line b</li>
</ul>
</li>
</ul>
</div>
<p> <span class="capital">S</span>ed odio tortor, rhoncus ac, auctor a, volutpat sed, diam. Quisque imperdiet. Maecenas quis nisl. Fusce sed nibh eget odio faucibus lobortis. Fusce sagittis est sed elit. Sed venenatis elit ut urna. Etiam varius imperdiet leo. Integer rhoncus venenatis arcu. Donec sollicitudin lectus. Cras ac est. Fusce odio. Donec posuere fermentum dolor. Sed a lacus tristique tellus ultrices mattis. Sed adipiscing urna a orci. Maecenas pharetra volutpat sem. </p>
<div class="date"><a href="http://www.free-css.com/">Comments (11)</a> . 07 Jan 2007 . 02:56</div>
</div>
<div id="right">
<div class="box">
<h2>Categories:</h2>
<ul>
<li><a href="http://www.free-css.com/">Templates (15)</a></li>
<li><a href="http://www.free-css.com/">Internet (10)</a></li>
<li><a href="http://www.free-css.com/">Tutorials (23)</a></li>
<li><a href="http://www.free-css.com/">Photoshop (11)</a></li>
<li><a href="http://www.free-css.com/">sNews (16)</a></li>
<li><a href="http://www.free-css.com/">Personal (5)</a></li>
</ul>
</div>
<div class="box">
<h2>New Articles:</h2>
<ul>
<li><a href="http://www.free-css.com/">I would like to send big...</a></li>
<li><a href="http://www.free-css.com/">This simple tutorial will...</a></li>
<li><a href="http://www.free-css.com/">To make this nice fade ...</a></li>
<li><a href="http://www.free-css.com/">If you want to advertise...</a></li>
<li><a href="http://www.free-css.com/">This has to be one of the...</a></li>
<li><a href="http://www.free-css.com/">This day I would like to...</a></li>
</ul>
</div>
<div class="box">
<h2>Sponsored Links</h2>
<ul>
<li><a href="http://www.free-css.com/">Links4se.com</a></li>
</ul>
</div>
<div class="extra">
<h3>Lightweight!</h3>
<p>sNews is extremely lightweight, easy to install, and easy to use via a simple web interface. </p>
</div>
</div>
</div>
<div id="footer">
<div class="right">© Copyright 2006, Your Website - <a href="http://www.free-css.com/">Home</a> <br />
Design: <a href="http://www.free-css-templates.com">David Herreman</a></div>
<br />
<a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> </div>
</div>
</body>
</html>
Related examples in the same category