bananaleaf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Banana Leaf
Description: A three-column, fixed-width design suitable for news sites and blogs.
Version : 1.0
Released : 20080127
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Banana Leaf by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: url(bananaleaf-images/img01.jpg) repeat-x top left;
}
body, th, td, input, textarea {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
form {
}
fieldset {
}
input, textarea {
font-weight: bold;
}
input.text {
padding: 2px 5px;
background: #F8FAEB;
border-top: 1px solid #4D5719;
border-left: 1px solid #4D5719;
border-right: 1px solid #626456;
border-bottom: 1px solid #626456;
}
input.button {
background: #3C7BCF;
border-top: 1px solid #3C7BCF;
border-left: 1px solid #3C7BCF;
border-right: 1px solid #3C7BCF;
border-bottom: 1px solid #3C7BCF;
color: #FFFFFF;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #626456;
}
h1 {
letter-spacing: -.075em;
font-size: 3em;
}
h2 {
letter-spacing: -.05em;
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
color: #8D8E85;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #80AB00;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #80AB00;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #80AB00;
}
hr {
display: none;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header {
width: 976px;
margin: 0 auto;
background: url(bananaleaf-images/img02.gif) no-repeat top left;
}
#menu {
height: 60px;
width: 976px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
height: 30px;
padding: 15px 30px;
background: url(bananaleaf-images/img05.gif) no-repeat bottom center;
margin-right: 1px;
letter-spacing: -1px;
text-decoration: none;
text-transform: lowercase;
font-size: 22px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
#search {
float: right;
width: 260px;
margin: 0px;
padding-top: 7px;
}
#search fieldset {
border: none;
}
#search #s {
width: 160px;
}
#search #x {
width: 80px;
}
/* Logo */
#logo {
width: 976px;
height: 315px;
margin: 0 auto;
background: url(bananaleaf-images/img03.jpg) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0;
text-transform: lowercase;
}
#logo h1 {
padding: 90px 5px 0 115px;
font-size: 48px;
color: #DAF79B;
}
#logo h2 {
padding: 0px 0 0 115px;
letter-spacing: -1px;
font-size: 16px;
color: #92C600;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #DAF79B;
}
/* Page */
#page {
width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: #FFFFFF;
border-top: none;
}
/* Content */
#content {
float: left;
width: 425px;
padding: 0px 0px 0px 20px;
}
.post {
}
.post .title {
margin: 0;
font-weight: normal;
background: url(bananaleaf-images/img07.gif) no-repeat left -20%;
}
.post h1.title {
padding: 5px 0 0 50px;
height: 40px;
font-size: 2.4em;
text-transform: lowercase;
border-bottom: 2px dashed #666666;
}
.post .entry {
padding: 0 10px 30px 15px;
}
.post .meta {
margin: 0;
padding: 0px 0px 0px 50px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CFCFCF;
}
.post .meta a {
color: #95CC28;
}
.post .links {
margin: 0;
}
.post .tags {
margin: 0;
text-transform: uppercase;
font-size: .8em;
font-weight: bold;
background: url(bananaleaf-images/img04.gif) repeat-x;
}
.post .links a, .post .tags a {
border: none;
}
/* Recent Posts */
#recent-posts {
}
#recent-posts h2 {
margin: 0;
border-bottom: 2px dashed #666666;
background: url(bananaleaf-images/img06.gif) no-repeat left 80%;
padding: 15px 0 0 30px;
height: 30px;
color: #80AB00;
}
#recent-posts h3 {
margin: 0;
font-size: 13px;
padding: 15px 0 0 15px;
background: url(bananaleaf-images/img04.gif) repeat-x left bottom;
}
#recent-posts p {
margin: 0 0 10px 0;
padding: 15px 0 0 15px;
line-height: 22px;
font-size: 13px;
}
/* Sidebars */
.sidebar {
float: left;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin-bottom: 2em;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0;
}
.sidebar li h2 {
margin: 0 0 1em 0;
color: #80AB00;
}
#sidebar1 {
width: 230px;
padding: 0px 0px 0px 20px;
}
#sidebar2 {
width: 240px;
padding: 0px 20px 0px 20px;
}
#sidebar2 li h2 {
margin: 0 0 1em 0;
background: url(bananaleaf-images/img06.gif) no-repeat left 80%;
padding: 15px 0 0 30px;
border-bottom: 2px dashed #666666;
height: 30px;
}
#sidebar2 li ul {
line-height: normal;
background: url(bananaleaf-images/img04.gif) repeat-x;
}
#sidebar2 li li {
padding: 5px;
background: url(bananaleaf-images/img04.gif) repeat-x left bottom;
font-size: .8em;
}
#sidebar2 li a {
border: none;
padding-left: 10px;
}
#sidebar2 li a:hover {
border: none;
padding-left: 10px;
}
/* Calendar */
#calendar {
margin: 0 auto;
}
#calendar caption {
font-weight: bold;
}
#calendar table {
width: 220px;
text-align: center;
border-collapse: collapse;
}
#calendar thead th {
background: #CCCCCC;
color: #FFFFFF;
}
#calendar tbody td {
background: #EEEEEE;
}
#calendar #today {
background: #B8D03B;
font-weight: bold;
color: #FFFFFF;
}
#calendar a {
font-weight: bold;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
background: url(bananaleaf-images/img04.jpg) repeat-x top left;
height: 97px;
}
#footer p {
padding-top: 30px;
text-align: center;
font-size: 9px;
color: #FFFFFF;
}
#footer a {
color: #3A2905;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="logo">
<h1><a href="#">Banana Leaf</a></h1>
<h2>Template Design by Free Css Templates</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="#">About This Template</a></h1>
<p class="meta"><small>Posted on October 24th, 2007 by <a href="#">Someone</a></small></p>
<div class="entry">
<p><strong>Banana Leaf </strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> 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. Have fun with it :)</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/newsflash/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
<h3>Heading Level 3</h3>
<p>While this one is followed by a blockquote:</p>
<blockquote>
<p>Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
</blockquote>
</div>
<p class="links"><a href="#" class="comments">Comments (33)</a> <a href="#" class="permalink">Permalink</a></p>
<p class="tags"><strong>Tags:</strong> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a></p>
</div>
</div>
<!-- end content -->
<!-- start sidebar one -->
<div id="sidebar1" class="sidebar">
<ul>
<li id="recent-posts">
<h2>Recent Posts</h2>
<ul>
<li>
<h3><a href="#">Aliquam Libero</a></h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. <a href="#">More…</a></p>
</li>
<li>
<h3><a href="#">Semper Vestibulum</a></h3>
<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="#">More…</a></p>
</li>
<li>
<h3><a href="#">Etiam Malesuada</a></h3>
<p>Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. <a href="#">More…</a></p>
</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar one -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer elit</a></li>
<li><a href="#">Metus pellentesque</a></li>
<li><a href="#">Suspendisse mauris</a></li>
<li><a href="#">Urnanet molestie semper</a></li>
<li><a href="#">Proin orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#">September</a> (23)</li>
<li><a href="#">August</a> (31)</li>
<li><a href="#">July</a> (31)</li>
<li><a href="#">June</a> (30)</li>
<li><a href="#">May</a> (31)</li>
</ul>
</li>
<li>
<h2>Lorem ipsum dolor </h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer elit</a></li>
<li><a href="#">Metus pellentesque</a></li>
<li><a href="#">Suspendisse mauris</a></li>
<li><a href="#">Urnanet molestie semper</a></li>
<li><a href="#">Proin orci porttitor</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2007 All Rights Reserved. • Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> | <a href="http://free-templates.ru/">Free CSS Templates</a></p>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category