website-traffic
<!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>Website Traffic</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
project: website traffic (free CSS templates)
author: luka cvrk (www.solucija.com)
*/
*{ margin: 0; padding: 0; }*
body { font: .74em Verdana, Arial, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.6em; background: #D0D4D4; color: #444; }
a { color: #B60D0A; background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 15px 0; }
h1 { font: normal 3.7em "Trebuchet MS", Arial, Sans-Serif; color: #fff; }
h1 a { color: #fff; background: inherit; }
h1 a:hover { color: #E4FFD3; background: inherit; }
sup { font-size: .3em; color: #DFCDA2; }
h2 { color: #B60D0A; font: bold 1.6em "Trebuchet MS", Arial, Sans-Serif; margin: 0 0 12px; border-bottom: 1px solid #ccc; }
h3 { color: #808080; background: #D0D4D4; padding: 3px 10px; margin: 0 0 15px; }
#content { width: 960px; margin: 10px auto; background: #fff; padding: 10px; }
#header { background: #fff url(website-traffic-images/header.jpg) no-repeat; height: 252px; }
#header p { margin: 30px 0 0; color: #D6E5EA; }
#logo { padding: 40px 0 0 20px; float: left; width: 400px; }
#search { float: right; width: 240px; text-align: right; margin: 10px 15px 0 0; }
#search a, #watch a { color: #fff; font-size: .8em; cursor: pointer; }
#searchform { padding: 10px; background: #A1BDD2; }
#searchform p { margin: 0; }
#menu { margin: 0 0 50px; }
#menu li { list-style: none; float: left; }
#menu li a { cursor: pointer; padding: 5px 39px; line-height: 25px; background: #D0D4D4; margin: 0 1px 0 0; color: #808080; }
#menu li a:hover { background: #B2B6B6; color: #000; }
#menu li a.current { background: #66A3CF; color: #fff; }
#menu li a#last { margin: 0; padding: 5px 41px 5px 40px; }
.third { font-size: .9em; float: left; width: 280px; margin: 0 30px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }
.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }
#prefooter { width: 944px; margin: 0 auto; background: #fff; padding: 15px 18px 1px; font-size: .9em; }
#footer { width: 960px; margin: 15px auto; color: #808080; font-size: .9em; }
#footer a { color: #444; }
.right { float: right; text-align: right; font-size: 1em; }
#footer .right a { margin: 0 0 0 2px; padding: 3px 10px; }
#footer .right a:hover { background: #fff; color: #444; text-decoration: underline; }
</style>
<script type="text/javascript">
// toggle dynamic divs
function toggle(div) {
var elem = document.getElementById(div);
if (elem.style.display=='') {elem.style.display='none'; return;}
elem.style.display='';
}
</script>
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">
<h1>Website Traffic<sup> beta</sup></h1>
<p>Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam blandit ultricies nisl.</p>
</div>
<div id="search"> <a onclick="toggle('searchform');">+ SEARCH</a>
<div id="searchform" style="display: none;">
<form method="post" action="http://www.free-css.com/">
<p>
<input class="searchfield" name="search_query" id="keywords" value="Search Keywords" type="text" />
<input class="searchbutton" name="submit" value="Search" type="submit" />
</p>
</form>
</div>
</div>
</div>
<ul id="menu">
<li><a class="current" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Speed Test</a></li>
<li><a href="http://www.free-css.com/">Accessibility Test</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a id="last" href="http://www.free-css.com/">Contact</a></li>
</ul>
<div style="clear: both;"></div>
<div class="third">
<h2>Who we are?</h2>
<p>Maecenas libero neque, volutpat sit amet, varius et, pretium quis, purus. Nulla ut magna. Nunc nec dui eget erat vulputate sagittis. Suspendisse fermentum odio. Mauris magna sem, pellentesque sit amet, nonummy vel, nonummy id, velit. Curabitur sodales lacus at massa. In hac habitasse platea dictumst. Aliquam lacus massa, pellentesque sit amet, feugiat et, cursus volutpat. Integer nibh. Maecenas mattis ipsum.</p>
<p class="more"><a href="http://www.free-css.com/">Read More</a></p>
</div>
<div class="third">
<h2>What we do?</h2>
<p>Mauris facilisis, quam ut semper adipiscing, magna diam laoreet ante, ac varius massa dolor sit amet augue. Vivamus purus. Integer consequat. Nunc et nunc. Phasellus augue diam, vestibulum non, iaculis eget, tristique sed, lectus. Sed pede. Nullam egestas ante a mauris. Aliquam metus turpis, luctus ac, sagittis eget, elementum tincidunt, massa. Aenean justo nisl, luctus sit amet, malesuada ac, dignissim.</p>
<p class="more"><a href="http://www.free-css.com/">Read More</a></p>
</div>
<div class="third last">
<h2>Get in touch!</h2>
<p>Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam blandit ultricies nisl. Nullam dapibus, mauris id scelerisque feugiat, sapien augue porta ipsum, ut blandit tellus enim vel mauris. Praesent accumsan metus vel ipsum. Maecenas aliquam blandit mi. Pellentesque dolor magna, posuere vel, condimentum id.</p>
<p class="more"><a href="http://www.free-css.com/">Read More</a></p>
</div>
<div style="clear: both;"></div>
</div>
<div id="prefooter">
<p>Powered by Truck Accident Lawyers · Davis & McCabe</p>
</div>
<div id="footer">
<p class="right"><a href="http://www.free-css.com/">Sitemap</a><a href="http://www.free-css.com/">Contact</a></p>
<p> Copyright 2008, <a href="http://www.free-css.com/">Website Traffic</a>, Design: <a href="http://www.solucija.com">Luka Cvrk</a></p>
</div>
</body>
</html>
Related examples in the same category