khaki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Khaki</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Name: mlpdesign07 -- Khaki
Author:webmasterneo, MLP Design
Author URI: http://www.mlpdesign.net/
*/
/* Global Settings */
body
{ background:url(khaki-images/bg-body.gif) repeat-x #000;
color:#333;
font:normal 12px Tahoma,sans-serif;
text-align:center;
padding:0;
margin:0; }
h1,h2,h3,p,li
{ text-align:left; }
a
{ background-color:inherit;
color:#996;
text-decoration:none; }
a:hover
{ text-decoration:underline; }
img
{ border:0;}
blockquote
{ background-color:inherit;
color:#999;
font:italic 12px "Times New Roman",sans-serif;
border-left:5px solid #cc9;
padding:2px 15px; }
/*Miscellaneous*/
.left
{ text-align:left;
padding-left:15px;
float:left; }
.right
{ text-align:right;
padding-right:15px;
float:right; }
.center
{ text-align:center;
padding:5px 0;
margin:0 auto; }
.clear
{ clear:both; }
.hidden
{ display:none;
margin:0;}
/*Wrappers*/
#wrapper
{ width:800px;
padding:0;
margin:15px auto; }
#body
{ background:url(khaki-images/bg-header.gif) top center no-repeat #fff;
color:inherit;
width:780px;
padding:10px 10px 2px 10px;
margin:0; }
#container
{ width:560px;
padding:0;
margin:0;
float:left; }
/*Header Items*/
#header
{ width:555px;
height:130px;
text-align:left;
padding:0;
margin:0; }
#header h1
{ background-color:inherit;
color:#fff;
font:normal 36px Tahoma,sans-serif;
padding:11px 0 0 15px;
margin:0; }
#header em
{ background-color:inherit;
color:#000;
font:normal 36px Tahoma,sans-serif; }
span#tagline
{ background-color:inherit;
color:#fff;
padding-left:18px;}
ul#topnav
{ list-style:none;
padding:0 0 0 10px;
margin:3.5em 0 0 0; }
ul#topnav li
{ padding:0;
margin:0;
display:inline; }
ul#topnav li a
{ background-color:#333;
color:#999;
padding:6px 12px;
text-decoration:none; }
ul#topnav li a:hover
{ background-color:#cc9;
color:#fff; }
ul#topnav li a.active
{ background-color:#fff;
color:#333; }
/*Content Items*/
#content
{ width:555px;
text-align:left;
padding:5px 0 15px 0;
margin:0;
float:left; }
#content h1
{ font:normal 18px Arial,sans-serif;
padding:0; }
#content ul
{ list-style:none;
width:500px;}
#content ul li
{ background:url(khaki-images/ico-bullet_content.gif) 0 8px no-repeat;
padding:2px 0 2px 10px;
margin:0; }
#content .item
{ line-height:1.25em;
padding:10px 5px 8px 15px;
margin:0; }
#content .item span
{ background-color:inherit;
color:#999;
font-size:11px; }
/*Sidebar Items */
#sidebar
{ width:180px;
font-size:11px;
padding:15px 5px 15px 20px;
float:left; }
#sidebar h2
{ background-color:inherit;
color:#996;
font:normal 14px Arial,sans-serif;
border-bottom:2px solid #cc9;
padding:8px 0 5px 0; }
#sidebar ul
{ list-style:none;
padding:2px;
margin:0;}
#sidebar ul li
{ background:url(khaki-images/ico-bullet_sidebar.gif) 0 8px no-repeat;
padding:2px 0 2px 10px;
margin:0; }
#sidebar ul li a
{ background-color:inherit;
color:#333;
text-decoration:none;
display:block; }
#sidebar ul li a:hover
{ background-color:#cc9;
color:#fff; }
/*Footer Items*/
#footer
{ background:url(khaki-images/bg-footer.gif) repeat-x;
width:780px;
height:34px;
font:normal 11px Arial,sans-serif;
padding:10px 0 0 0;
clear:both; }
#footer a
{ background-color:inherit;
color:#333; }
#footer a:hover,#credits a:hover
{ background-color:inherit;
color:#fff;
text-decoration:none;}
#credits
{ background-color:inherit;
color:#999;
width:780px;
font:normal 11px Arial,sans-serif;
text-align:right;
padding:8px 5px 5px 10px;
margin:0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="container">
<div id="header">
<h1>Site<em>Title</em></h1>
<span id="tagline">Another free Open Source template</span>
<ul id="topnav">
<li><a class="active">Home</a></li>
<li><a href="http://www.free-css.com/">Page 1</a></li>
<li><a href="http://www.free-css.com/">Page 2</a></li>
<li><a href="http://www.free-css.com/">Page 3</a></li>
<li><a href="http://www.free-css.com/">Page 4</a></li>
</ul>
</div>
<div id="content">
<div class="item">
<h1>Sample paragraph, blockquote, and list</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend laoreet magna. Donec auctor libero id massa. Aenean sit amet enim ac urna dictum lobortis. Praesent convallis sapien eu tortor. Phasellus eros tortor, lacinia ut, pellentesque in, venenatis in, elit. Suspendisse potenti. Proin sed pede. Suspendisse elementum, augue et venenatis malesuada, nisl pede commodo eros, id faucibus purus arcu vel risus. Nullam at metus.</p>
<blockquote>
<p>Proin congue risus eget eros. Morbi ornare, enim ac convallis pellentesque, metus arcu sagittis diam, nec fringilla nunc eros id arcu. Nunc sagittis ligula id justo. Nam et pede a mi facilisis consequat. Quisque tincidunt, turpis vel commodo lacinia, arcu odio bibendum metus, eget elementum ipsum eros sit amet velit.</p>
</blockquote>
<ul>
<li>Mauris in lacus</li>
<li>Sed ullamcorper bibendum libero</li>
<li> Morbi fringilla imperdiet lorem</li>
<li> In cursus mi posuere augue</li>
</ul>
<span>17 July 2007 @ 1:28 PM | <a href="http://www.free-css.com/">0 Comment(s)</a><br />
Posted by <a href="http://www.free-css.com/">webmasterneo</a></span> </div>
<div class="item">
<h1>Space fillers</h1>
<p>Donec non dui. Morbi fringilla imperdiet lorem. Fusce risus diam, rutrum eu, hendrerit et, accumsan non, neque. Fusce vitae pede ut massa sodales mattis. Nulla sed justo. Integer nec sem vel tellus tempor gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc faucibus. Nullam nulla ipsum, accumsan sed, tempus sed, adipiscing a, metus. Curabitur varius commodo eros.</p>
<span>17 July 2007 @ 6:24 PM | <a href="http://www.free-css.com/">0 Comment(s)</a><br />
Posted by <a href="http://www.free-css.com/">webmasterneo</a></span> </div>
</div>
</div>
<div id="sidebar">
<h2>About</h2>
<p>This template is released under the <a target="_blank" href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Attribution Non-Commercial License</a>. If you use it, you must retain the "Template Design by MLP Design" tag and link in place. You MAY NOT use the templates in adult or adult-oriented websites!</p>
<p>If you wish to use a template for commercial purposes or wish to remove the credit tag and link, please contact us.</p>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Suspendisse potenti</a></li>
<li><a href="http://www.free-css.com/">Proin sed pede</a></li>
<li><a href="http://www.free-css.com/">Maecenas ac nisi</a></li>
<li><a href="http://www.free-css.com/">Curabitur eget enim id</a></li>
<li><a href="http://www.free-css.com/">Nunc metus nisl dapibus</a></li>
<li><a href="http://www.free-css.com/">Fusce pellentesque odio sed</a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">2007-Jul</a></li>
<li><a href="http://www.free-css.com/">2007-Jun</a></li>
<li><a href="http://www.free-css.com/">2007-May</a></li>
<li><a href="http://www.free-css.com/">2007-Apr</a></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://www.free-css.com/">The Open Design Community</a></li>
<li><a href="http://www.free-css.com/">MLP Design</a></li>
<li><a href="http://www.free-css.com/">TextLink Ads</a></li>
</ul>
</div>
<div id="footer"> <span class="left">2007 © Copyright <a href="http://www.free-css.com/">Your Name</a>. All rights reserved.</span> <span class="right"><a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">Site Map</a></span> </div>
<div class="clear"></div>
</div>
<div id="credits"> <span>Template design by <a href="http://www.mlpdesign.net">MLP Design</a><br />
Licensed under <a target="_blank" href="http://creativecommons.org/licenses/by-nc/3.0/">CC-NC 3.0</a></span> </div>
</div>
</body>
</html>
Related examples in the same category