bamboo
<!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>Bamboo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding:0; margin:0;}
body {background:url(bamboo-images/bg.jpg) repeat; font:12px Verdana, Arial, Helvetica, sans-serif; color:#271e12;}
a {text-decoration:none;}
h1 a, h2 a, h3 a {border:none; color:#3A2B1B;}
h1 a:visited, h2 a:visited, h3 a:visited {border:none; color:#3A2B1B;}
h1 a:active, h2 a:active, h3 a:active{border:none; color:#3A2B1B;}
.clear {clear:both; padding:0; margin:0;}
#wrap {width:819px; margin:0 auto 25px auto; }
#tab {background:url(bamboo-images/left.jpg); width:34px; float:left; min-height:453px; height:100%; padding-top:60px}
#top {background:url(bamboo-images/top.jpg) no-repeat; height:50px; float:left; width:785px;}
#page {margin-left:34px; background:url(bamboo-images/pagebg.jpg) repeat;}
#col1 {background:url(bamboo-images/header.jpg) 30px 35px no-repeat; width:137px; min-height:450px; padding:35px 30px 30px 30px; float:left; }
#col2 {width:300px; float:right;}
#widecol {width:540px; padding:40px 30px 10px 10px; float:right;}
#coldivider {background:url(bamboo-images/dv2.jpg) 0 0 repeat-y;}
.div1 {background:url(bamboo-images/dv1.jpg) 0 0 no-repeat; height:35px; display:block; width:300px}
.div3 {background:url(bamboo-images/dv3.jpg) 0 0 no-repeat; height:26px; display:block; width:300px;}
.col2content { padding-left:39px;}
#col3 {margin:0 305px 0 199px; padding-top:85px; }
#page p {line-height:20px; margin-bottom:20px;}
#header {height:430px;}
#Sitename {color:#D3CABE; font-size:26px; display:block; text-align:center; padding-top:15px;}
#Sitename .italic { color:#A9BA67; font-style: italic; text-transform:uppercase;}
#Sitename a {color:#d3cabe; text-decoration:none;}
#Sitename a .italic {color:#a9ba67; text-decoration:none;}
#Sitename a:hover {color:#a9ba67;}
#Sitename a:hover .italic {color:#d3cabe;}
.caption {color:#B6A794; font-size:12px; display:block; margin:15px 15px 0 15px;}
h1, h2, h3 {font-family:"Trebuchet MS", Verdana, sans-serif;}
h1 { font-size:22px}
h2 {font-size:18px;}
h3 {font-size:16px;}
.postinfo {display:block; color: #594D44; font-size:10px;}
.post .postbottom {
display:block;
padding: 3px;
font-size:10px;
border-top: 1px solid #625A4F;
border-bottom: 1px solid #625A4F;
}
/*Tab*/
#tab ul {list-style:none; font:16px "Trebuchet MS", Verdana, sans-serif; font-weight:bold; text-transform:uppercase; padding-left:11px;}
#tab a, #tab a:visited, #tab a:active {display:block; background:url(bamboo-images/menu3.jpg) repeat-y; width:18px; padding:12px 0 12px 5px; text-align: center; text-decoration:none; color:#D3CABE; margin:2px 0 2px 0;}
#tab a:hover {background:url(bamboo-images/menu2.jpg) repeat-y; color:#fff;}
#tab .active a {background:url(bamboo-images/menu1.jpg) repeat-y; color:#fff;}
ul.menu{list-style:none;}
.menu li{
display:block;
height:22px;
border-bottom: 1px solid #6A6257;
}
.menu a {display:block; height:19px; padding:3px 5px 0 5px; color:#000; text-decoration:none;}
.menu a:visited, .menu a:active {color:#000;}
.menu a:hover {background:#978D80;}
.featured {
position: relative;
top: 0px;
right: 0px;
z-index: 99;
float: right;
display: block;
visibility: visible;
}
#col2 #featured_post {
position: relative;
top:-40px;
z-index: 50;
}
.featuredimg {
padding:3px;
background:#271D13;
}
#col2 .post {padding-right:15px;}
#col2 .sidebar {padding-right:15px;}
a img {border:none;}
#bottom {
background: url(bamboo-images/footer.png) bottom no-repeat;
height:130px;
color:#7D7465;
padding:15px 140px 0 10px;
text-align:right;
font-size: 10px;
}
.pagenav {
display:block;
padding:3px;
font-size: 11px;
text-transform: uppercase;
background: #938979;
}
.pagenav .alignleft {display:block; float:left;}
.pagenav .alignright {display:block; text-align:right;}
a {color:#000;}
a:visited, a:active {color:#231B10;}
a:hover {color:#000;}
.post a {border-bottom:dashed 1px #000000;}
.post a:hover {color:#000; background:#D3D0CB;}
.post h2 a {border:none !Important;}
/* --- */
blockquote {
background: #938979;
font-size: 11px;
margin-bottom:15px;
}
blockquote p { display:block; padding:10px 10px 0 10px; line-height:16px;}
.rounded p {margin-bottom:0!important;}
cite {font-weight:bold; padding-left:15px; font-size:10px;}
blockquote:before {
background: transparent url(bamboo-images/t-r.png) scroll no-repeat top right;
margin-bottom: -20px;
height: 15px;
display: block;
border: none;
content: url(bamboo-images/t-l.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}
blockquote:after {
display: block;
font-size: 1px;
content: url(bamboo-images/b-l.png);
margin: 0 0 -1px 0;
height: 15px;
background: white;
background: transparent url(bamboo-images/b-r.png) scroll no-repeat bottom right ;
padding: 0;
}
#siteinfo {height:70px;}
#footer {height:20px; padding-top:15px;}
#footer .backto {display:block; float:left;}
#footer .credits {display:block; float:right;}
#bottom a {
color: #938979;
}
img.leftalign {padding:5px; background:#877D6D; margin-right:10px; float:left; border: solid 1px #3A2B1B;}
img.rightalign {padding:5px; background:#877d6d; margin-left:10px; float:right; border: solid 1px #3A2B1B;}
.post ol {margin-bottom:15px; padding-left:25px;}
.post ol li {padding:3px; margin-bottom:3px;}
.post ul {margin-bottom:15px; padding-left:25px; list-style:square;}
.post ul li {padding:3px; margin-bottom:3px;}
/*tables and Forms */
#page table {
width:90%;
border:1px solid #2B1F13;
margin-bottom:20px;
background: #ADA69A;
margin-top: 15px;
}
#page th {
background:#2A1E12;
padding:5px 15px 5px 15px;
color:#7D7465;
text-align:center;
border-bottom:1px solid #000000;
font: bold 16px "Trebuchet MS", Verdana, sans-serif;
text-transform: uppercase;
}
#page td {
border-bottom:1px solid #2A1E12;
padding:5px 15px 5px 15px;
border-right:1px solid #2A1E12;
}
.textfield {
display: block;
width:50%;
margin:3px 3px 3px 30px;
padding:3px;
border: 1px solid #65594D;
background: #ADA69A;
}
label {
display: block;
margin:3px;
padding: 5px;
font-weight: bold;
}
.button {
display: block;
padding:0px;
margin:3px;
border: 1px solid #231A10;
color:#D0CABB;
background: #3A2B1B;
}
.textfield:hover {
background:#FFFFCC;
}
.textfield:focus {
background:#ffffff;
border: 1px solid #3A2C1B;
}
.hide {display:none;}
.commentlist {list-style:none; padding-left:10px; margin:10px 0 10px 0;}
.commentlist li {
background:#8F8676;
display:block;
margin-bottom:8px;
}
.commentlist li img {display:block; margin:10px; float:left;}
.commentmetadata {display:block; font-size:10px; padding: 10px;}
.commentlist li cite {display:block; padding-top:20px; font:12px "Trebuchet MS", Verdana, sans-serif;}
.commentlist li p {display:block; padding:8px;}
.commentlist li:before {
background: transparent url(bamboo-images/t-r.png) scroll no-repeat top right;
margin-bottom: -20px;
height: 15px;
display: block;
border: none;
content: url(bamboo-images/t-l.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}
.commentlist li:after {
display: block;
font-size: 1px;
content: url(bamboo-images/b-l.png);
margin: 0 0 -1px 0;
height: 15px;
background: white;
background: transparent url(bamboo-images/b-r.png) scroll no-repeat bottom right ;
padding: 0;
}
</style>
<!--[if IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="tab">
<ul>
<li class="active"><a href="http://www.free-css.com/">H o m e </a></li>
<li><a href="styles.html">S t y l e s </a></li>
<li><a href="notes.html">N o t e s </a></li>
</ul>
</div>
<div id="top"> </div>
<div id="page">
<div id="col1">
<div id="header">
<h1 id="Sitename"> <a href="http://www.free-css.com/">Bamb<span class="italic">oo</span></a> <span class="caption"> A Free CSS Template by RamblingSoul </span></h1>
</div>
<h2>Categories</h2>
<ul class="menu">
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor Sit</a></li>
<li><a href="http://www.free-css.com/">Amet Feugiat</a></li>
<li><a href="http://www.free-css.com/">Eleifend In</a></li>
<li><a href="http://www.free-css.com/">Nullam Eget urna </a></li>
</ul>
</div>
<div id="col2"> <a href="http://www.free-css.com/"><img class="featured" src="bamboo-images/sidetop.png" alt="" /></a>
<div id="coldivider"> <span class="div1"></span>
<div class="col2content">
<div id="featured_post"> <img class="featuredimg" src="bamboo-images/bambooimg.jpg" alt="" />
<div class="post">
<h2>Nulla Nalesuada Magna Vel</h2>
<p class="postinfo"><img src="bamboo-images/ico_auth.jpg" alt="" />Posted by Author on 25/08/3007</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nibh. Maecenas consequat. Etiam volutpat sodales velit. Sed ultricies condimentum diam. Mauris mollis. Pellentesque non mi. Integer nisl erat, egestas id, faucibus ac, iaculis eu, nisl. </p>
<p class="postbottom"><img src="bamboo-images/ico_cat.jpg" alt="" width="19" height="12" /><a href="http://www.free-css.com/">Category</a><img src="bamboo-images/ico_comment.jpg" alt="" width="20" height="15" /><a href="http://www.free-css.com/">Comments</a> <img src="bamboo-images/ico_link.jpg" alt="" width="19" height="11" /><a href="http://www.free-css.com/">Full Story</a></p>
</div>
</div>
<div class="sidebar">
<h2>Recent Posts</h2>
<ul class="menu">
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Ipsum Lorem</a></li>
<li><a href="http://www.free-css.com/"> Quisque Ullamcorper</a></li>
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Ipsum Lorem</a></li>
<li><a href="http://www.free-css.com/"> Quisque Ullamcorper</a></li>
</ul>
</div>
</div>
<span class="div2"> </span> </div>
</div>
<div id="col3">
<div class="post">
<h2><a href="http://www.free-css.com/">Lorem Ipsum Dolor Sit Amet</a></h2>
<p class="postinfo"><img src="bamboo-images/ico_auth.jpg" alt="" />Posted by Author on 25/08/3007</p>
<blockquote>
<p>Bamboo is a free CSS Template released under Creative Commons License by RamblingSoul, suitable Blogs, Small Websites etc. <cite> — Visit RamblingSoul.com</cite> </p>
</blockquote>
<p> Bamboo is a free CSS Template released under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to RamblingSoul and Illinois Wine.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nibh. Maecenas consequat. Etiam volutpat sodales velit. Sed ultricies condimentum diam. Mauris mollis. Pellentesque non mi. Integer nisl erat, egestas id, faucibus ac, iaculis eu, nisl. </p>
<p class="postbottom"><img src="bamboo-images/ico_cat.jpg" alt="" width="19" height="12" /><a href="http://www.free-css.com/">Category</a> <img src="bamboo-images/ico_comment.jpg" alt="" width="20" height="15" /><a href="http://www.free-css.com/">Comments</a> <img src="bamboo-images/ico_link.jpg" alt="" width="19" height="11" /><a href="http://www.free-css.com/">Full Story</a></p>
</div>
<div class="post">
<h2><a href="http://www.free-css.com/">Lorem Ipsum Dolor Sit Amet</a></h2>
<p class="postinfo"><img src="bamboo-images/ico_auth.jpg" alt="" />Posted by Author on 25/08/3007</p>
<p>Nulla malesuada magna vel leo. Nunc pharetra nulla quis ipsum. Nunc pulvinar ipsum a turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Quisque ullamcorper dolor a enim. Fusce dictum pede sed quam. Quisque velit tellus, pellentesque non, feugiat vitae, eleifend in, ipsum. Nullam eget urna ut lacus dictum tincidunt. </p>
<p class="postbottom"><img src="bamboo-images/ico_cat.jpg" alt="" width="19" height="12" /><a href="http://www.free-css.com/">Category</a> | <img src="bamboo-images/ico_comment.jpg" alt="" width="20" height="15" /><a href="http://www.free-css.com/">Comments</a> | <img src="bamboo-images/ico_link.jpg" alt="" width="19" height="11" /><a href="http://www.free-css.com/">Permalink</a></p>
</div>
<div class="pagenav"> <span class="alignleft"><a href="http://www.free-css.com/">Older Posts</a></span> <span class="alignright"><a href="http://www.free-css.com/">Newer Posts</a></span></div>
</div>
<p class="clear"> </p>
<div id="bottom">
<div id="siteinfo"> © Your Copyright Information and YourCompany.com <br />
<a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Blog</a> | <a href="http://www.free-css.com/">Portfolio</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">Sitemap</a> | <a href="http://www.free-css.com/">Advertise</a> | <a href="http://www.free-css.com/">Donate</a></div>
<div id="footer" >
<!--Credits - Do not remove-->
<span class="credits"><a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul | <a href="http://www.blueskyvineyards.com/">Illinois Wine</a></span>
<!-- Credits -->
<span class="backto"><a href="#top">Back To Top</a></span> </div>
</div>
<p class="clear"></p>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Related examples in the same category