Pinki
<!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>Pinki</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
}
a {
text-decoration: none;
color: #CC0001;
}
a:hover {
text-decoration: underline;
color: #666;
}
ul { list-style-type: none; margin: 0; padding-left: 0px; }
ul li { padding: 0 0 3px 0; border-bottom: 1px dotted #000; }
ul li a { }
ul li a:hover { text-decoration: none; color: #000; }
img { border: none; }
#wrap {
margin: 0px auto;
width: 780px;
background: #fff;
padding: 10px;
}
#header {
}
#header h1 {
font-size: 22px;
letter-spacing: -1px;
color: #000;
margin: 0;
}
#header h1 a {
color: #CC0001;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #aaa;
}
#menu {
margin-top: 10px;
height: 30px;
line-height: 30px;
background: #CC0001;
}
#menu ul {
list-style-type: none;
padding-left: 10px;
}
#menu ul li {
display: block;
float: left;
border: none;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
color: #fff;
}
#menu ul li a:hover {
color: #fff;
text-decoration: underline;
}
#left {
margin-top: 10px;
padding: 10px;
text-align: justify;
}
#left h2 {
color: #000;
font-size: 17px;
font-weight: 100;
letter-spacing: -1px;
}
#left h2 a {
}
#bottom {
background: #FF9FA1;
margin-top: 30px;
color: #fff;
border-left: 5px solid #EEEEEE;
border-right: 5px solid #EEEEEE;
border-top: 5px solid #EEEEEE;
}
.column {
float: left;
width: 240px;
padding: 8px;
}
.column h2 {
padding: 5px 0 10px 10px;
margin: 0;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: -1px;
}
.column ul {
padding: 10px;
}
.column ul li a:hover { color: #000; }
.column ul li a { color:#fff;}
#footer {
margin: 0 5px;
background: #000;
height: 24px;
line-height: 24px;
color: #eee;
font-size: 11px;
padding: 0 10px;
}
#footer a { color: #FF9FA1 }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Website Title</a></h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Free Stuff</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>
<div id="left">
<h2><a href="#">License and terms of use</a></h2>
Pinki 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 />
<h2><a href="#">Title with a link - Example of heading 2</a></h2>
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.
</div>
<div id="bottom">
<div class="column">
<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>
</div>
<div class="column">
<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>
</ul>
</div>
<div class="column">
<h2>Menu</h2>
<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 style="clear: both;"> </div>
</div>
<div id="footer">
<div style="float: right;">
<img src="Pinki-images/rss14.png" style="padding-top: 5px;" alt="Rss" />
</div>
<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