simply_brown
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Free Web Design Community | www.designity.org
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 links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->
<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:0; font-family:"Comic Sans MS", cursive; background-color:#EEEDEC;}
#header {height:150px; background-image:url(simply_brown-images/header_bg.png);}
#logo {float:left; font-size:36px; padding:38px 0 30px 50px;}
#logo a {color:#FFFFFF; text-decoration:none;}
#slogan {float:right; font-size:24px; color:#FFFFFF; padding:52px 50px 34px 0;}
#menu {height:31px; clear:both; padding-left:28px;}
#menu ul {margin:0; padding:0;}
#menu li {list-style:none; float:left; background:url(simply_brown-images/menu_bg2.png) right no-repeat;}
#menu a {float:left; background:url(simply_brown-images/menu_bg1.png) left no-repeat; height:21px; padding:5px 20px; color:#3D2216; font-size:15px; font-weight:bold; text-decoration:none;}
#menu a:hover {color:#130A06;}
#menu li.active {background:url(simply_brown-images/menu_bg2_active.png) right no-repeat;}
#menu li.active a {background:url(simply_brown-images/menu_bg1_active.png) left no-repeat; color:#130A06;}
#main {float:left; width:100%; background:url(simply_brown-images/sidebar_bg.png) right repeat-y #FFFFFF; color:#130A06; font-size:13px;}
#main a {color:#3D2216;}
#main a:hover {color:#130A06;}
#main br {line-height:10px;}
#sidebar {width:160px; float:right; padding:0 40px 40px 40px; margin-top:20px;}
#sidebar h3 {font-size:19px; font-weight:normal; margin:20px 0 5px 0; color:#3D2216;}
#sidebar ul {margin:0; padding:0; border-top:1px solid #F3F1F1;}
#sidebar li {list-style:none; border-bottom:1px solid #F3F1F1;}
#sidebar li a {color:#111111; text-decoration:none; padding:3px; display:block;}
#sidebar li a:hover {background-color:#F3F1F1;}
#text {line-height:17px; margin-right:240px; padding:20px 50px 40px 50px;}
#text h1 {font-size:24px; font-weight:normal; margin:20px 0 10px 0; color:#3D2216;}
#text h2 {font-size:21px; font-weight:normal; margin:20px 0 10px 0; color:#3D2216;}
#text ol, #text ul {padding:0; margin:10px 0;}
#text li {margin-left:40px;}
#footer {height:100px; color:#FFFFFF; font-size:13px; background-image:url(simply_brown-images/footer_bg.png); clear:both;}
#footer a {color:#FFFFFF;}
#footer a:hover {color:#CDC8C6;}
#footer_left {float:left; padding:41px 0 0 50px;}
#footer_right {float:right; padding:41px 50px 0 0;}
</style>
</head>
<body>
<!-- header -->
<div id="header">
<div id="slogan">Just another cool website</div>
<div id="logo"><a href="#">Website Name</a></div>
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- main -->
<div id="main">
<div id="sidebar">
<h3>Sidebar</h3>
<ul>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
</ul>
<h3>Sidebar</h3>
<ul>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
</ul>
<h3>Sidebar</h3>
<ul>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
<li><a href="#">Sidebar item</a></li>
</ul>
</div>
<div id="text">
<h1>Welcome</h1>
<b>Simply Brown</b> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.designity.org/">Free Web Design Community</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 links to authors intact.<br/><br/>
Pellentesque tincidunt, tellus ac vehicula sodales, velit mi cursus nisl, a hendrerit justo purus quis odio. Curabitur eleifend blandit consequat. Quisque venenatis elementum ligula, nec molestie odio posuere at. Sed id metus eget mi porttitor pulvinar.
<h2>Lore Ipsum</h2>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus velit, adipiscing non elementum vel, facilisis in urna. Vestibulum elit tortor, fringilla eu molestie in, gravida tristique metus.
<ul>
<li>Aenean fringilla nisi a sem viverra ac cursus magna tempus.</li>
<li>Mauris egestas enim sed ligula iaculis sodales.</li>
<li>Cras condimentum nulla nec quam tempor vel volutpat lectus vulputate.</li>
</ul>
Donec nibh dolor, sodales vel consequat eget, faucibus vitae lorem. Nunc rhoncus, dui quis pharetra tincidunt, magna augue faucibus elit, sit amet <a href="#">gravida lacus</a> turpis quis ligula. Proin aliquet, sem at consequat auctor, nisl mauris euismod ante, a sollicitudin sapien odio et erat.
<h2>Dolor sit Amet</h2>
Aenean at dictum lacus. Nullam scelerisque adipiscing ligula a volutpat. Praesent pharetra elementum blandit. Vestibulum pharetra lectus id metus vehicula non ultricies lacus vestibulum.
<ol>
<li>Quisque lacinia sapien nec dui congue dignissim.</li>
<li>Nullam nec arcu sit amet orci vestibulum volutpat eu eget risus.</li>
<li>Vivamus rhoncus velit sit amet libero cursus consequat.</li>
</ol>
Pellentesque diam arcu, cursus eget tristique at, imperdiet sit amet metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum suscipit tempor. Aliquam vitae <a href="#">neque nibh</a>, in molestie nibh. Pellentesque ac risus tellus. Praesent enim purus, eleifend eu vehicula vel, adipiscing vitae dui.
</div>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="footer_left">© Copyright 2009 Your Website</div>
<div id="footer_right">
<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
Design by <a href="http://www.designity.org/">Free Web Design Community</a>
</div>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category