hapal
<!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 Title</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: #111;
color: #444;
font: 12px Arial, Verdana, Tahoma, sans-serif;
line-height: 20px;
}
img {border: none;}
a{ color: #173D7F; text-decoration: none; }
a:hover { color: #000; }
#content {
width: 760px;
margin: 20px auto;
padding: 10px;
background: #fff;
}
#header {
background: #000 url(hapal-images/header.gif) no-repeat;
height: 90px;
}
#header h1 {
font-size: 22px;
letter-spacing: -1px;
padding: 15px 0 0 10px;
color: #fff;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h1 a:hover {
color: #ccc;
}
#header h2 {
font-size: 16px;
color: #ccc;
padding: 0 0 0 10px;
}
#navigation {
background: #111 url(hapal-images/menu.gif) repeat-x;
height: 30px;
line-height: 30px;
margin: 10px auto;
}
#navigation li {
float:left;
list-style-type:none;
border-right:1px solid #444;
}
#navigation li a {
display:block;
padding:0 20px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
}
#navigation li a:hover {
background: #333 url(hapal-images/menuover.gif) repeat-x;
color:#fff;
text-decoration:none;
}
.left {
float: left;
width: 220px;
padding: 10px;
line-height: 14px;
}
.left h2 {
margin-top: 10px;
font: bold 12px Verdana, 'Trebuchet MS', Sans-serif;
padding: 5px 0 5px 5px;
border-bottom: 1px dotted #999;
}
.left ul {
color: #999;
text-align: left;
margin: 3px 0 8px 0;
padding-left: 20px;
text-decoration: none;
list-style-type:square;
}
.left ul li {
padding: 2px 0 2px 0px;
margin: 0 2px;
}
.left ul a {
font-weight: 600;
color: #173D7F;
}
.left ul a:hover { color : #333; }
.right {
float: right;
width: 470px;
padding: 10px;
margin-right: 20px;
}
.right h2 {
padding: 2px 0 5px 0px;
font: bold 14px Verdana, 'Trebuchet MS', Sans-serif;
color: #444;
border-bottom: 1px dotted #999;
margin-bottom: 5px;
margin-top: 10px;
}
#footer {
background: #222;
color: #eee;
margin-top:20px;
height: 30px;
line-height: 30px;
text-align: center;
}
#footer a { color: #aaa; text-decoration: none; }
#footer a:hover { color: #777; }
</style>
</head>
<body>
<div id="content">
<div id="header">
<h1><a href="#">Your Website</a></h1>
<h2>Super slogan for super site</h2>
</div>
<div id="navigation">
<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 class="right">
<h2>Donec mauris metus, venenatis vitae</h2>
<p>This is Website Title, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
<p> This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
<br />
<a href="#" title="Comments">Comments (0)</a>
<h2><a href="#">Mauris suscipit justo id metus</a></h2>
Ut orci. Mauris suscipit justo id metus. Nullam suscipit, nisi sed consequat suscipit, felis arcu aliquam nisi, in felis arcu aliquam nisi, in tincidunt pede est nec sem. Curabitur sit amet pede. Suspendisse facilisis lectus in felis. Quisque vel sem eu mi egestas feugiat. Vestibulum luctus auctor sapien. Duis vel massa.
<br />
<a href="#" title="Comments">Comments (0)</a>
<h2>Praesent tincidunt enim non massa</h2>
<a href="#" title="Link Title"><img style="border: 3px solid #ddd;" src="pic1.jpg" alt="Something" /></a>
Duis nisl. In a augue varius nunc faucibus bibendum. Donec metus ipsum, convallis mollis, auctor eget, fermentum sit amet, nisl. Nam non leo a augue semper sodales. Suspendisse potenti. Cras luctus turpis ultricies metus. Duis non tellus. Vestibulum blandit, eros in tincidunt luctus, odio neque tempus ipsum, et porttitor odio dui vel arcu.
<br />
<a href="#" title="Comments">Comments (0)</a>
</div>
<div class="left">
<h2>Categories : </h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="http://www.onebucktemplates.com">$1 Templates</a></li>
<li><a href="http://www.top-bar-hive.com">Top Bar Hive</a></li>
<li><a href="http://www.industrial-revolution.info">Industrial Revolution</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>
</ul>
<h2>Blogroll : </h2>
<ul>
<li><a href="http://www.onebucktemplates.com">One Buck Templates</a></li>
<li><a href="http://www.opendesigns.org">OpenDesigns</a></li>
<li><a href="http://www.openwebdesign.org">OpenWebdesign</a></li>
<li><a href="http://www.oswd.org">OSWD</a></li>
<li><a href="http://www.minimalistic-design.net">Free CSS Templates</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
<div id="footer">
© Copyright by <a href="#">You</a> | <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