clean&green
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Green And Clean | Free CSS Template by Rambling Soul</title>
<style type='text/css'>
@charset "utf-8";
* { margin: 0px; padding: 0px;}
.clear {clear:both;}
.clearleft {display:block; clear:left;}
.clearright{display:block; clear:right;}
.hide {display:none;}
a {color:#666600;}
a:visited {color:#999999;}
a:active {color:#669900;}
a:hover {color:#666600; text-decoration:none;}
body {background: url(images/bg.jpg) repeat-x #FFFFFF;;}
#wrap{ width:699px; margin:0px auto 15px auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}
/*Header*/
#sitename {display:block; padding:15px 5px 0px 75px; font-size:25px; text-transform:uppercase;}
#sitename span {font:Georgia, "Times New Roman", Times, serif; font-weight:normal; color:#000000;}
#topbar {background-image:url(images/topbg.jpg); background-repeat:no-repeat; height:48px;}
#header {background-image:url(images/header.jpg); background-repeat:no-repeat;height:154px;}
#header .siteslogan {display:block; font: normal 20px Georgia, "Times New Roman", Times, serif; text-align:center; padding:45px 10px 0px 10px;}
/*Header Menu*/
#topmenu {display:block; list-style:none; padding:116px 10px 0px 10px;}
#topmenu li {display:inline;}
#topmenu a {display:block; float:left; height:28px; margin:0px 0px 0px 2px; text-decoration:none; padding:9px 15px 0px 15px; text-align:center;}
#topmenu a, #topmenu a:visited, #topmenu a:active {background:url(images/menu1.jpg) repeat-x; border-left:solid 1px #abca74; border-right:solid 1px #abca74; color:#E2E9C7;}
#topmenu a:hover{background:url(images/menu2.jpg) repeat-x; border-left:solid 1px #abca74; border-right:solid 1px #abca74; color:#ffffff;}
#topmenu .active a, #topmenu .active a:visited, #topmenu .active a:active{background:url(images/menu2.jpg) repeat-x; border-left:solid 1px #abca74; border-right:solid 1px #abca74; color:#669900;}
/*Content*/
#content {background:url(images/contentbg.jpg) repeat-y;}
#mainpage { width:415px; float:left; padding:5px 5px 5px 15px;}
#mainpage p {line-height:22px; margin:0px 0px 22px 0px;}
#mainpage blockquote {background:#efefef; display:block; margin:5px; font:Georgia, "Times New Roman", Times, serif; font-style:italic;}
{border-width:0;}
h1, h2, h3, h4, h5 {color:#669900; font-weight:bold;font-family: Arial, Helvetica, sans-serif;}
#mainpage h1 {font-size:28px;}
#mainpage h2 {font-size:24px;}
#mainpage h3 {font-size:20px;}
#mainpage h4 {font-size:18px;}
#mainpage h5 {font-size:16px;}
.postlist {list-style:none; margin:0px}
.postlist li {display:block; padding:0px; border-bottom: dashed 1px #D6E4A7;}
.subhead{font-size:12px; color:#669900; font-weight:bold; display:block; margin:0px; background:#F4F7EA; margin:10px 0px 0px 0px; padding:2px;}
.postlist a,.postlist a:visited, .postlist a:active {display:block; padding:3px 3px 3px 25px; background: url(images/bullet.jpg) no-repeat 3px #F7FAEF; color:#666666; text-decoration:none;}
.postlist a:hover { background: url(images/bullet2.jpg) no-repeat 3px #FFFEE6; color:#000000; text-decoration:none;}
#content #mainpage ol {margin:10px 10px 10px 25px;}
#content #mainpage ol li {padding:5px 5px 5px 20px;}
#content #mainpage ul li {display:block; padding:0px; border-bottom: dashed 1px #D6E4A7;}
/*Tables*/
table { width:98%; border:solid 3px #CCCCCC; background:#efefef;}
th {background: #FFFFCC; padding:3px; border-bottom:dashed 1px #CCCCCC; text-align:left;}
td {padding:3px;}
/*forms*/
form {margin:0; padding:0;}
.textfield {width:190px; background-color: #F3F4E8; margin:0px; border: 1px solid #D6D9AE;}
.button {display: block; padding:0px; background-color:#E3E6C8; margin:3px; border: 2px solid #efefef; color:#999933;}
.textfield:hover {background:#FBFCF8;}
.textfield:focus {background:#ffffff;}
/*gallery*/
.gallery {background:#efefef; margin:0px 0px 10px 0px; padding:5px;}
.gallery .box {display:block; height:100px; float:left; width:43%; padding:10px 5px 5px 5px; margin:8px; background:#ffffff; text-align:center;}
.box img {background:#efefef; padding:5px;}
.box .caption {display:block; text-align:center;}
.box a img, .box a:visited img, .box a:active img {border:solid 1px #cccccc;}
.box a:hover img {border:solid 1px #000000;}
/*Blog posts*/
h2 .postdate {display:block; float:left; background:url(images/dateballoon.jpg) no-repeat; width:55px; height:60px;}
.post {margin:10px 0px 10px 0px;}
.post img { display:block; background:#efefef; border:solid 1px #cccccc; padding:5px;}
.post h2 a,.post h2 a:visited,.post h2 a:active{color:#669900; text-decoration:none;}
.post h2 a:hover {color:#000000;}
.post .left {float:left; margin:5px;}
.post .right {float:right; margin:5px;}
.metadata{display:block; clear:left; font-size:10px; color:#999999; border-top:solid 1px #efefef; text-align:right;}
.postinfo {display:block; clear:left; border-top: solid 2px #cccccc; padding:5px; }
.comments a, .comments a:visited, .comments a:active{display:block; float:right; background:url(images/comment2.jpg) no-repeat; width:75px; height:27px; padding:10px 3px 0px 50px; font-size:8px; text-decoration:none;}
.comments a:hover{background:url(images/comment.jpg) no-repeat;}
/*Comments*/
.nocomments {color:#999999; font-size:10px; display:block;}
.commentlist {background: #F5F3E9; list-style-type:decimal; list-style-position:inside;}
.commentlist li {border-bottom:solid 2px #FDFCE1; padding:5px;}
.commentlist cite {display:block; color:#669900; font-weight:bold; padding:0px 3px 3px 20px;}
.commentmeta {display:block; font-size:10px; padding:3px; color:#999999;}
.commenttxt {display:block; padding:5px 5px 5px 15px;}
/*Sidebar*/
#sidebar { margin:0px 0px 0px 435px; background:url(images/sidebarbg.jpg) repeat-y;}
#sidebarcontents {padding:5px 15px 5px 25px;}
#sidebarbottom {background:url(images/sidebarbottom.jpg) no-repeat 0px; height:74px;}
/*Sidemenu*/
#menu {list-style:none;}
#menu li ul {list-style:none;}
#menu li ul li {display:block; height:25px; border-bottom:solid 1px #efefef;}
#menu li ul a, #menu li ul a:visited, #menu li ul a:active {display:block; height:20px; padding:5px 5px 0px 5px; text-decoration:none; color:#333333;}
#menu li ul a:hover {background:#F8F9F2; color:#000000;}
#menu h2 { display:block; border-bottom:solid 1px #D2E6CA; padding:5px; margin:10px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-size:18px; color:#669900; font-weight:bold;}
/*footer*/
#footer {background:url(images/footer.jpg) no-repeat; height:36px; padding:10px; color:#FFFFFF;}
#credit {font-size:10px; padding:3px;}
</style>
</head>
<body>
<div id="wrap">
<div id="topbar">
<h1 id="sitename">Clean<span>&</span>Green</h1>
</div>
<div id="header">
<ul id="topmenu">
<li><a href="index.html">Home</a>
</li>
<li class="active"><a href="blog.html">Blog Entries</a>
</li>
<li><a href="styles.html">Other Styles</a>
</li>
<li><a href="notes.html">Notes</a>
</li>
</ul>
</div>
<div id="content">
<div id="mainpage">
<div class="post" id="1">
<h2><a href="#">About Clean & Green</a></h2>
<small>
<!-- by <?php the_author() ?> -->
</small>
<div class="entry"></div>
<p class="metadata">Posted by Admin on 23 October 2007</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque convallis erat at dui. Vivamus tristique libero a velit. Aliquam lectus nisl, interdum et, facilisis ac, tempor sed, metus. Aliquam vestibulum viverra erat. Quisque nec libero at tellus cursus mattis. Mauris facilisis leo eu ligula. Proin eu leo. Pellentesque pharetra enim quis nulla. Morbi est nulla, condimentum viverra, mattis vel, vestibulum sit amet, neque. Sed lacinia, nisi scelerisque feugiat blandit, justo orci interdum lectus, in sollicitudin diam sem eget mauris. Duis adipiscing felis in orci. Proin in lacus eu mi porttitor venenatis. Nam id leo. Suspendisse egestas tortor non magna. Vestibulum ante. Suspendisse at elit sit amet dui consectetuer tristique. Nulla gravida bibendum urna.</p>
<span class="comments"><a href="#">28 Comments</a></span>
<p class="clearleft"> </p>
<div class="postinfo"> Filed under : Category | Posted By : Author | Permalink </div>
</div>
<div class="post" id="2">
<h2><a href="#">Image in a post</a></h2>
<small>
<!-- by <?php the_author() ?> -->
</small>
<div class="entry"></div>
<p class="metadata">Posted by Admin
on 23 October 2007</p>
<img class="left" src="images/4.jpg" alt="iMAGE" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque convallis erat at dui. Vivamus tristique libero a velit. Aliquam lectus nisl, interdum et, facilisis ac, tempor sed, metus. Aliquam vestibulum viverra erat. Quisque nec libero at tellus cursus mattis. Mauris facilisis leo eu ligula. Proin eu leo. Pellentesque pharetra enim quis nulla. Morbi est nulla, condimentum viverra, mattis vel, vestibulum sit amet, neque. Sed lacinia, nisi scelerisque feugiat blandit, justo orci interdum lectus, in sollicitudin diam sem eget mauris. Duis adipiscing felis in orci. Proin in lacus eu mi porttitor venenatis. Nam id leo. Suspendisse egestas tortor non magna. Vestibulum ante. Suspendisse at elit sit amet dui consectetuer tristique. Nulla gravida bibendum urna.</p>
<blockquote> <p>The alignment is controlled by two css classes - .right & .left.</p></blockquote>
<img class="right" src="images/2.jpg" alt="Image" />
<p>
Quisque dolor nunc, molestie rutrum, dignissim eget, varius eget, velit. Integer orci lectus, tristique a, hendrerit et, vestibulum egestas, pede. Morbi id odio at nulla bibendum semper. Ut purus. Pellentesque pellentesque, ligula a sagittis ullamcorper, est augue eleifend dolor, nec varius lectus lacus vitae mauris. Curabitur porta tincidunt nisl. Nullam lacinia varius neque.</p>
<span class="comments"><a href="#">28 Comments</a></span>
<p class="clearleft"> </p>
<div class="postinfo"> Filed under : Category | Posted By : Author | Permalink </div>
</div>
<p class="nocomments">This post is password protected. </p>
<h5 id="comments">5 Comments in response to "Image in a post"</h5>
<ol class="commentlist">
<li><cite>UserOne</cite>
<small class="commentmeta">Posted on 23/10/2007 at 10:15 AM</small>
<span class="commenttxt">Praesent erat. Nulla venenatis lorem quis nisi. Aliquam congue, pede a facilisis porttitor, ligula nisl rhoncus purus, vel placerat nulla metus eget erat.</span> </li>
<li><cite>UserOne</cite>
<small class="commentmeta">Posted on 23/10/2007 at 10:15 AM</small>
<span class="commenttxt">Praesent erat. Nulla venenatis lorem quis nisi. Aliquam congue, pede a facilisis porttitor, ligula nisl rhoncus purus, vel placerat nulla metus eget erat.</span> </li>
<li><cite>UserOne</cite>
<small class="commentmeta">Posted on 23/10/2007 at 10:15 AM</small>
<span class="commenttxt">Praesent erat. Nulla venenatis lorem quis nisi. Aliquam congue, pede a facilisis porttitor, ligula nisl rhoncus purus, vel placerat nulla metus eget erat.</span> </li>
<li><cite>UserOne</cite>
<small class="commentmeta">Posted on 23/10/2007 at 10:15 AM</small>
<span class="commenttxt">Praesent erat. Nulla venenatis lorem quis nisi. Aliquam congue, pede a facilisis porttitor, ligula nisl rhoncus purus, vel placerat nulla metus eget erat.</span> </li>
<li><cite>UserOne</cite>
<small class="commentmeta">Posted on 23/10/2007 at 10:15 AM</small>
<span class="commenttxt">Praesent erat. Nulla venenatis lorem quis nisi. Aliquam congue, pede a facilisis porttitor, ligula nisl rhoncus purus, vel placerat nulla metus eget erat.</span> </li>
</ol>
<h5 class="subhead" id="respond">Leave a Reply</h5>
<p>You must be <a href="#">logged in</a> to post a comment.</p>
<form action="#" method="post" id="commentform">
<p>Logged in as <a href="#">UserName</a>. <a href="#" title="Log out of this account">Logout »</a></p>
<p>
<input class="textfield" type="text" name="author" id="author" size="22" tabindex="1" />
<label for="author"><small>Name </small></label>
</p>
<p><input class="textfield" type="text" name="email" id="email" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) </small></label>
</p>
<p><input class="textfield" type="text" name="url" id="url" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<p>
<textarea class="textfield" name="comment" id="comment" cols="55" rows="10" tabindex="4"></textarea>
</p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
</p>
</form>
</div>
<div id="sidebar">
<div id="sidebarcontents">
<ul id="menu">
<li><h2>Categories</h2></li>
<li>
<ul>
<li><a href="#">Lorem Ipsum </a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Consectetuer</a></li>
</ul>
</li>
<li>
<h2>Blogroll</h2>
</li>
<li>
<ul>
<li><a href="#">Rambling Soul</a></li>
<li><a href="#">Open Designs</a></li>
<li><a href="#">CSS Freebies</a></li>
</ul>
</li>
</ul>
</div>
<div id="sidebarbottom"></div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
Copyright © Your Site Name |<a href="#">Links</a> | <a href="#">Goes</a> | <a href="#">Here</a></div>
<div id="credit"><a href="http://www.ramblingsoul.com">CSS Layout</a> by Rambling Soul</div>
</div>
</body>
</html>
Related examples in the same category