darkit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body { margin:40px 50px; font-size:11px; line-height:20px; font-family: Tahoma, Arial; background: url(darkit-images/body_bckg.jpg) repeat-x #056caa;}
a { color:#68d3ed; text-decoration:underline;}
a:hover { text-decoration:none;}
h1 { padding:0px; text-transform:uppercase; font-size:18px; color:#000; background-color:#818181; font-weight:normal; color:#fff; margin: 10px 0 ;height:21px;}
h1 span { background:#616161; padding:0px 10px 0px 0px;}
p {margin:0; background:#616161;}
#header {background:url(darkit-images/header_bckg.jpg) repeat-x #0287c2; clear:both; width:100%; height:161px; }
#left_header { float:left; width:380px; background: url(darkit-images/left_header.jpg) no-repeat; height:161px;}
#right_header { float:right; width:321px; background: url(darkit-images/right_header.jpg) no-repeat; height:161px;}
#logo {position:absolute; text-align:center; width:95%; text-align:center; margin-top:50px; }
#logo a {text-decoration:none; color:#FFFFFF; font-size:23px; }
#menu { height:30px; clear:both; padding-top:5px; }
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:104px; list-style:none; text-align:center;}
#menu a { display:block; float:left; width:104px; font-size:12px; text-transform:uppercase; text-decoration:none; color:#FFFFFF; text-decoration:none; font-weight:bold }
#menu a:hover {color:#68d3ed;}
#content {clear:both; background-color:#252525; width:100%;}
#content_top { height:20px;}
#content_top_left {float:left; width:20px; height:20px; background: url(darkit-images/left_top_round.gif) no-repeat;}
#content_top_right {float:right; width:20px; height:20px; background: url(darkit-images/right_top_round.gif) no-repeat;}
#content_bottom { clear:both;height:16px;}
#content_bottom_left {float:left; width:20px; height:16px; background: url(darkit-images/left_bottom_round.gif) no-repeat;}
#content_bottom_right {float:right; width:20px; height:16px; background: url(darkit-images/right_bottom_round.gif) no-repeat;}
#sidebar {float:left; width:231px; padding-left:10px;}
#sidebar p {background-color:#fff; padding:0 20px;}
#sidebar_top { height:10px; background:url(darkit-images/top_sidebar.gif) no-repeat;background-color:white;}
#sidebar_body { background-color:#fff;}
#sidebar_bottom { height:23px; background:url(darkit-images/bottom_sidebar.gif) no-repeat;}
#sidebar ul {margin:0; padding:0 0 0 40px;}
#sidebar ul li { padding:0; list-style:none;}
#sidebar a {color:#000; font-size:11px;}
#sidebar h1 {color:#0676bd; font-size:12px; font-weight:bold; padding:10px 0 0 20px; background-color:#fff; margin:0;}
#text {background-color:#616161; margin:0px 10px 0 251px; width:auto; vertical-align:top; color:#fff;}
#text_top {}
#text_top_left {float:left; width:13px; height:10px; background:url(darkit-images/left_top_content.gif) no-repeat;}
#text_top_right {float:right; width:11px; height:10px; background:url(darkit-images/rigth_top_content.gif) no-repeat;}
#text_bottom { float:left;height:16px; background:url(darkit-images/middle_bottom_content.gif) repeat-x; width:100%;}
#text_bottom_left {float:left; width:11px; height:16px; background: url(darkit-images/left_bottom_content.gif) no-repeat;}
#text_bottom_right {float:right; width:11px; height:16px; background: url(darkit-images/right_bottom_content.gif) no-repeat;}
#text_body { padding:10px 20px 10px 20px;}
#foot_text { padding-left:50px; background:url(darkit-images/foot_text.gif) no-repeat; color:#a8a8a8; font-size:10px; line-height:13px; margin:20px 0 0 0;}
#footer {background:url(darkit-images/footer_bckg.jpg) #424e4f; height:74px; clear:both; }
#left_footer { float:left; padding:30px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:30px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}
</style>
<body>
<!-- header -->
<div id="logo"><a href="#">COMPANY NAME</a></div>
<div id="header">
<div id="left_header"></div>
<div id="right_header"></div>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<!--end header -->
<!-- main -->
<div id="content">
<div id="content_top">
<div id="content_top_left"></div>
<div id="content_top_right"></div>
</div>
<div id="content_body">
<div id="sidebar">
<div id="sidebar_top"></div>
<div id="sidebar_body">
<h1>Categories</h1>
<ul>
<li><a href="#">List item</a> (1)</li>
<li><a href="#">List item</a> (2)</li>
<li><a href="#">List item</a> (3)</li>
<li><a href="#">List item</a> (4)</li>
<li><a href="#">List item</a> (5)</li>
<li><a href="#">List item</a> (6)</li>
<li><a href="#">List item</a> (7)</li>
<li><a href="#">List item</a> (8)</li>
<li><a href="#">List item</a> (9)</li>
</ul>
<h1>Categories</h1>
<ul>
<li><a href="#">List item</a> (1)</li>
<li><a href="#">List item</a> (2)</li>
<li><a href="#">List item</a> (3)</li>
<li><a href="#">List item</a> (4)</li>
<li><a href="#">List item</a> (5)</li>
<li><a href="#">List item</a> (6)</li>
<li><a href="#">List item</a> (7)</li>
<li><a href="#">List item</a> (8)</li>
<li><a href="#">List item</a> (9)</li>
</ul>
</div>
<div id="sidebar_bottom"></div>
</div>
<div id="text">
<div id="text_top">
<div id="text_top_left"></div>
<div id="text_top_right"></div>
</div>
<div id="text_body">
<h1><span>Welcome</span></h1>
<p><strong>Darkit </strong> is a free template released by <a href="http://www.realitysoftware.ca">Reality Software</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep the link to the author intact.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetuer adipiscing elit.</li>
<li>Maecenas ac lacus. Etiam quis ante.</li>
<li>Nullam accumsan metus sit amet est.</li>
<li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li>
</ul>
<h1><span>Lorem ipsum dolor</span></h1>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.</p>
<div id="foot_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nec mi quis felis ullamcorper adipiscing. Integer elementum tellus id purus. Vestibulum diam.
Cras congue nulla ac turpis ultrices ullamcorper. Mauris lobortis. Quisque consectetuer massa eu enim tristique accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nec mi quis felis ullamcorper adipiscing. Integer elementum tellus id purus. Vestibulum diam.</div>
</div>
<div id="text_bottom">
<div id="text_bottom_left"></div>
<div id="text_bottom_right"></div>
</div>
</div>
</div>
<div id="content_bottom">
<div id="content_bottom_left"></div>
<div id="content_bottom_right"></div>
</div>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2008 <b>Darkit</b> design </div>
<div id="right_footer">
<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>
| <a href="http://free-templates.ru">free-templates.ru</a>
</div>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category