Simpatico
<!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>Simpatico</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
margin:0;
padding: 0;
background: #fbeec7;
color: #444;
font: 13px Arial, Verdana, Tahoma, sans-serif;
line-height: 17px;
}
img {border: none;}
a{ color: #2A84E5; text-decoration: none; }
a:hover { color: #000; }
#top {
background: #fbeec7 url(Simpatico-images/top.jpg) no-repeat;
padding: 10px 0;
}
#contentt {
background: #fbeec7 url(Simpatico-images/content.jpg) repeat-y;
padding: 20px;
}
#bottom {
background: #fbeec7 url(Simpatico-images/bottom.jpg) no-repeat;
padding: 10px 0;
}
#wrap {
width: 970px;
margin: 0 auto;
}
#header {
height: 100px;
line-height: 30px;
}
#header h1 {
font-size: 50px;
letter-spacing: -1px;
padding: 30px 0 0 10px;
color: #000;
}
#header h1 a {
color: #3B8FE9;
text-decoration: none;
}
#header h1 a:hover {
color: #000;
}
#header h2 { letter-spacing: -1px; padding: 0 0 0 16px; font-size: 29px; color: #000; }
#headermenu {
height: 60px;
background: #3B8FE9 url(Simpatico-images/menubg.jpg) repeat-x;
line-height: 60px;
}
.headerm {
padding: 0;
text-transform: uppercase;
font-weight: 100;
}
.headerm li {
float:left;
list-style-type:none;
}
.headerm li a {
display:block;
padding:0 20px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
letter-spacing: -1px;
font-size: 20px;
}
.headerm li a:hover {
color:#000;
text-decoration:none;
}
.left {
margin-top: 10px;
float: left;
width: 200px;
line-height: 15px;
}
.left h2 {
margin-top: 10px;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
line-height: 30px;
background: #CC0001 url(Simpatico-images/contenth2.jpg) repeat-x;
height: 30px;
color: #fff;
padding-left: 10px;
}
.left ul {
color: #aaa;
text-align: left;
margin: 3px 0 8px 0;
padding-left: 10px;
text-decoration: none;
list-style-type:none;
}
.left ul li {
padding: 2px 0 2px 0px;
margin: 0 2px;
}
.left ul a {
font-weight: 600;
color: #2A84E5;
}
.left ul a:hover { color : #333; }
.middle {
margin-top: 10px;
float: left;
width: 510px;
margin-left: 10px;
line-height: 20px;
}
.middle h2 {
font: bold 14px Verdana, 'Trebuchet MS', Sans-serif;
color: #fff;
background: #CC0001 url(Simpatico-images/contenth2.jpg) repeat-x;
margin-bottom: 5px;
margin-top: 10px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.middle h2 a {
color: #fff;
}
.middle h2 a:hover {
color: #000;
}
.right {
margin-top: 10px;
float: right;
width: 200px;
}
.right h2 {
margin: 10px 0 20px 0;
font: bold 13px Verdana, 'Trebuchet MS', Sans-serif;
line-height: 30px;
background: #CC0001 url(Simpatico-images/contenth2.jpg) repeat-x;
height: 30px;
color: #fff;
padding-left: 10px;
}
#footer {
color: #777;
text-align: center;
padding-bottom: 10px;
}
#footer a { color: #777; text-decoration: none; }
#footer a:hover { color: #000; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Your Website</a></h1>
<h2>Super slogan for super site</h2>
</div>
<div id="top"> </div>
<div id="contentt">
<div id="headermenu">
<div class="headerm">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact US</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<div class="left">
<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li>
<li><a href="#">Europe Sport</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li>
<li><a href="#">Last Category</a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li>
<li><a href="#">February 2007</a></li>
<li><a href="#">March 2007</a></li>
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li>
<li><a href="#">June 2007</a></li>
<li><a href="#">July 2007</a></li>
<li><a href="#">August 2007</a></li>
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>
</div>
<div class="middle">
<h2><a href="#">License and terms of use</a></h2>
Simpatico is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
<br /><br />
<img src="Simpatico-images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta. Sed porttitor, tellus vitae tincidunt
feugiat, sem sapien pellentesque justo, vitae pretium justo risus id nunc. Mauris elit metus, varius sit amet,
rhoncus id, malesuada eget, tortor. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla.
<br /><br />
Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
<div class="right">
<h2>Tag Cloud</h2>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;">sit</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >amet</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;">consectetuer</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;">elit</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px; ">Donec</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;">dui</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;">a</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;">metus</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >non</a>
<a href="#" title="font-size: 25 - hits: 5" style="color:#000000;font-size:25px;" >ligula</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >rhoncus</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >in</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >nec</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >neque</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >Sed</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >suscipit</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >magna</a>
<a href="#" title="font-size: 25 - hits: 5" style="color:#000000;font-size:25px;" >vel</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >venenatis</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >vestibulum</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >convallis</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >erat</a>
<a href="#" title="font-size: 30 - hits: 6" style="color:#0000ff;font-size:30px;" >et</a>
<a href="#" title="font-size: 25 - hits: 5" style="color:#000000;font-size:25px;" >lobortis</a>
<a href="#" title="font-size: 25 - hits: 5" style="color:#000000;font-size:25px;" >lectus</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >nibh</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >urna</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >Maecenas</a>
<a href="#" title="font-size: 30 - hits: 6" style="color:#0000ff;font-size:30px;" >libero</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >Duis</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >lorem</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >tincidunt</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >bibendum</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >mi</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >imperdiet</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >enim</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >nisl</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >sem</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >velit</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >Fusce</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >odio</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >purus</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >Integer</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >elementum</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >Pellentesque</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >nulla</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >eros</a>
<a href="#" title="font-size: 17.5 - hits: 4" style="color:#4063B7;font-size:17.5px;" >ut</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >diam</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >Nullam</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >lacus</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >mollis</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >quam</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >luctus</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >est</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >accumsan</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >molestie</a>
<a href="#" title="font-size: 12.5 - hits: 3" style="color:#FFAF4C;font-size:12.5px;" >nunc</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >Aliquam</a>
<a href="#" title="font-size: 10 - hits: 2" style="color:#f6453c;font-size:10px;" >dignissim</a>
</div>
<div style="clear: both;"> </div>
</div>
<div id="bottom"> </div>
<div id="footer">
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></div>
</div>
</body>
</html>
Related examples in the same category