reinvent
<!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>Reinvent - Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {padding:0; margin:0;}
body {font-family: "Trebuchet MS", Verdana, sans-serif; color: #666666; background:#444;}
.clear {clear:both;}
h2, h3, h4 {display:block;}
ul {list-style:none;}
a{color:#069;}
a:visited {color:#333;}
a:active {color:#063;}
a:hover {text-decoration:none;}
.readmore a { background:url(reinvent-images/bullet.png) 1px 2px no-repeat; display:block; padding:0 3px 0 15px; float:right;}
#wrap {background:#333; padding:10px; width:700px; margin:30px auto 30px auto}
#content {background:#fff;}
#content .post {padding:10px;}
#topnav {background:#333; height:91px; padding:10px; background: url(reinvent-images/sidebarbg.png) left top no-repeat;}
#header_home {display:block; height:150px; background:url(reinvent-images/header.jpg) center top no-repeat; text-align:center;}
.sitename {display:block; font:22px "Trebuchet MS", Verdana, sans-serif; color:#fff; height:30px; padding:8px 5px 0 5px; margin:0; text-transform:uppercase; letter-spacing:12px;}
.sitename a, .sitename a:visited, .sitename a:active {color:#fff; text-decoration:none;}
.sitename a:hover {color:#eee; text-decoration:none;}
.description {display:block; font: normal 12px Georgia, "Times New Roman", Times, serif;}
#content {font: normal 13px "Trebuchet MS", Verdana, sans-serif;}
#content p {line-height:18px; margin-bottom:18px;}
.subhead {font: bold 16px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; color:#999999; padding:5px; text-align:center; display:block; background:#efefef;}
#searchbox {width:155px; float:left; padding-top: 15px;}
#topnavmain { float: right; width: 370px; height: 88px; background: url(reinvent-images/browse.png) no-repeat 1px 38px; padding-left: 110px;}
#searchbox #search {background: url(reinvent-images/search.png) no-repeat; height:46px;}
#search input { background: transparent; border-style: none; font-size: 10px; display: block; width: 115px; padding: 24px 5px 2px; color: #FFFFFF;}
#topnav h2 {font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase;}
#nav {padding-top: 33px;}
#nav li {display: inline;}
#nav a {display:block; background: url(reinvent-images/menu2.png) repeat-x; height:44px; padding:2px 10px 0 10px; float:left; margin-left:2px; color:#666; text-decoration:none;}
#nav a:hover {background:url(reinvent-images/menu1.png) repeat-x; color:#fff; text-decoration:none;}
#nav .active a {background:url(reinvent-images/menu3.png) repeat-x; color:#000; text-decoration:none;}
h2 .postmeta {display:block; font: normal 12px Georgia, "Times New Roman", Times, serif; color:#999; margin-bottom:18px;}
.post h2 {font:18px "Trebuchet MS", Verdana, sans-serif; color:#069; margin-bottom:10px;}
#footer h2 {font:18px "Trebuchet MS", Verdana, sans-serif; color:#666666;}
.post h2 a {color:#069; text-decoration:none;}
.post h2 a:hover {color:#000; background:#FFFFF0;}
.page_nav {background: #333; padding:3px 15px 3px 15px; height:20px;}
.alignleft {float:left; display:block;}
.alignright {float:right; display:block;}
.page_nav a, .page_nav a:visited, .pagenav a:active {color:#999; text-decoration:none;}
.page_nav a:hover {color:#fff;}
#col1 {float:left; width:49%;}
#col2 {float:right; width:49%;}
#footer {background: #222 url(reinvent-images/footer.jpg) no-repeat; padding:0 10px 10px 10px; font:12px "Trebuchet MS", Verdana, sans-serif; color:#666;}
#footertop { height: 40px; padding-top:10px; margin-bottom:10px;}
#leftfooter { float: left; width: 35%;}
#rightfooter { float: right; width: 63%;}
#bottom { padding:10px 10px 10px 75px; clear:both; background:url(reinvent-images/footerbtm.jpg) 3px 5px no-repeat; border-top: solid 1px #333; margin-top:15px;}
#sidebar2 {float:right; width:48%;}
#sidebar1 {float:left; width:48%;}
#rightfooter li { display:block; height:22px; border-bottom: 1px solid #2C2C2C;}
#rightfooter a, #rightfooter a:visited, #rightfooter a:active {display:block; height:19px; padding:3px 8px 0 8px; text-decoration:none; color:#069;}
#rightfooter a:hover {color:#fff; background:#000;}
#footer h2 { padding:3px; font: bold 16px "Trebuchet MS", Verdana, sans-serif; color:#999; }
#leftfooter .author {padding:5px 8px 3px 3px; float:left;}
#footer img {border:none;}
#footertop ul {text-align:center; padding-top:8px;}
#footertop li {display: inline;}
#footertop a, #footertop a:visited {color:#999; padding:3px; margin:3px; text-decoration:none;}
#footertop a:hover {color:#fff; }
#bottom a, #bottom a:visited{color:#999;}
#bottom a:hover {color:#fff; text-decoration:none;}
.postbottom {background:#f4f4f4; border:solid 1px #ddd; padding:3px; font-size:11px;}
/*comments*/
#comments{margin:15px;}
#comments .odd {background:#f4f4f4;}
#comments .even {background:#EEECE6;}
#comments ul li p {margin:0;}
#comments li { display:block; border:solid 1px #ddd; margin-bottom:8px; padding:8px;}
input, textarea {display:block; background:#f4f4f4; border:solid 1px #ddd; padding:5px;}
input:hover, textarea:hover {background:#fff; border:solid 1px #bbb;}
input:focus, textarea:focus {background:#fff; border:solid 1px #333;}
label {display:block; font: normal 14px "Trebuchet MS", Verdana, sans-serif; color:#000;}
img.alignleft, img.alignright {padding:3px; background:#efefef; border:solid 1px #333; margin:5px;}
blockquote {margin:10px; background:#f4f4f4; border:solid 1px #ddd; padding:10px;}
cite {font: bold italic 16px "Trebuchet MS", Verdana, sans-serif;}
.post ul, .post ol {padding:10px 10px 5px 25px;}
.post ul li {list-style:square; padding:3px;}
.post ol li {padding:3px;}
code {
display:block;
background:#333;
border:solid 1px #000;
color:#999;
padding:5px;
white-space: pre;
font-size:12px;
}
</style>
<link href="dropcap.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="wrap">
<h1 id="header_home"> <span class="sitename"><a href="http://www.free-css.com/">Reinvent</a></span> <span class="description">A Free CSS Template by RamblingSoul</span></h1>
<div id="content">
<div id="topnav">
<div id="searchbox">
<form action="#">
<div id="search">
<input type="text" value="Search" size="25" />
</div>
</form>
</div>
<div id="topnavmain">
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li class="active"><a href="blog.html">Blog Layout</a></li>
<li><a href="styles.html">Styles</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="#footer">More</a></li>
</ul>
</div>
</div>
<div class="post">
<h2><a href="http://www.free-css.com/">H2 Post Title Title - Blog Example</a><span class="postmeta">By Author</span> </h2>
<p><b class="drop-m"><span>M</span></b>auris nisi diam, feugiat a, ultricies eget, dapibus eu, felis. Vestibulum turpis est, condimentum in, auctor mattis, vehicula at, nisl. Etiam tempus, eros ut rutrum pretium, orci justo ornare mi, ac accumsan quam nulla mattis metus. Donec scelerisque tristique ante. Integer imperdiet, purus a malesuada ornare, odio lorem dictum tellus, eget rhoncus dui ante gravida massa. Integer massa pede, laoreet commodo, viverra nec, vestibulum nec, velit. Donec at dui. Nulla facilisi. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed, risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem iaculis dapibus. Sed malesuada, quam vel tincidunt bibendum, orci sapien vestibulum sem, vitae laoreet mi dui ac sem. Aenean urna. </p>
<div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
</div>
<div class="post">
<h2><a href="http://www.free-css.com/">The rest is just Lorem Ipsum</a><span class="postmeta">Some keywords or description</span> </h2>
<p><b class="drop-v"><span>V</span></b>itae pede pulvinar consequat. Fusce sollicitudin neque at tortor. In aliquam justo eget est. Quisque nulla orci, commodo non, rutrum vitae, consequat vitae, ante. Suspendisse dignissim nulla eget lectus. Integer venenatis sapien et mauris. Nam rutrum, tortor eget condimentum aliquet, nunc felis tincidunt purus, vel elementum erat massa non ligula. Morbi luctus porta orci. Integer sed dolor. Nullam ut libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper quam sed arcu. Sed nibh metus, facilisis nec, elementum id, tempus in, erat. Morbi porta ligula sit amet sapien. Nullam interdum, odio id sollicitudin scelerisque, leo tortor pharetra nibh, sit amet bibendum elit libero viverra lorem. Quisque elit. </p>
<div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
</div>
<div class="post">
<h2><a href="http://www.free-css.com/">The rest is just Lorem Ipsum </a><span class="postmeta">By Author</span> </h2>
<p><b class="drop-d"><span>D</span></b>apibus eu, felis. Vestibulum turpis est, condimentum in, auctor mattis, vehicula at, nisl. Etiam tempus, eros ut rutrum pretium, orci justo ornare mi, ac accumsan quam nulla mattis metus. Donec scelerisque tristique ante. Integer imperdiet, purus a malesuada ornare, odio lorem dictum tellus, eget rhoncus dui ante gravida massa. Integer massa pede, laoreet commodo, viverra nec, vestibulum nec, velit. Donec at dui. Nulla facilisi. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed, risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem iaculis dapibus. Sed malesuada, quam vel tincidunt bibendum, orci sapien vestibulum sem, vitae laoreet mi dui ac sem. Aenean urna. </p>
<div class="postbottom"><a href="http://www.free-css.com/">Category</a> | <a href="http://www.free-css.com/">Comments</a> | <a href="http://www.free-css.com/">Permalink</a> | Posted on : 15/06/2009</div>
<div id="comments">
<h3 id="comments">2 Responses to “Re-invent Blog”</h3>
<ul class="commentlist">
<li id="comment1"class="odd"> <img src="reinvent-images/72de71e0c4887864b7df1863d7559ed9.jpg" width="40" height="40" alt="" /> <cite><a href="http://www.free-css.com/">User</a></cite> Says: <br />
<small class="commentmetadata">June 13th, 2008 at 9:38 pm </small>
<p>This is a Comment</p>
</li>
<li id="comment2"class="even"> <img src="reinvent-images/72de71e0c4887864b7df1863d7559ed9.jpg" width="40" height="40" alt="" /> <cite>Admin</cite> Says: <br />
<small class="commentmetadata">June 14th, 2008 at 12:31 pm </small>
<p>Thanks for your comment</p>
</li>
</ul>
<h3 id="respond">Leave a Reply</h3>
<form action="#" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" size="22" tabindex="1" />
<label for="author"><small>Name (required)</small></label>
</p>
<p>
<input type="text" name="email" id="email" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) (required)</small></label>
</p>
<p>
<input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url"><small>Website</small></label>
</p>
<p>
<textarea name="comment" id="comment" cols="45%" rows="10" tabindex="4"></textarea>
</p>
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
</p>
</form>
</div>
</div>
<div class="page_nav"><span class="alignleft"><a href="http://www.free-css.com/">« Previous Entries</a></span> <span class="alignright"><a href="http://www.free-css.com/">Next Entries »</a></span></div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="footertop">
<ul id="bottomlinks">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Privacy Policy</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
</div>
<div id="leftfooter"> <img class="author" src="reinvent-images/user.jpg" alt="" />
<h2>About</h2>
<p>ullam nec massa vitae pede pulvinar consequat. Fusce sollicitudin neque at tortor. In aliquam justo eget est. Quisque nulla orci, commodo non, rutrum vitae, consequat vitae, ante. Duis arcu nisl, eleifend quis, feugiat vitae, iaculis sed, risus. Vivamus placerat massa a felis. Praesent vitae turpis et lorem iaculis dapibus.</p>
</div>
<div id="rightfooter">
<div id="sidebar1">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Site News</a></li>
<li><a href="http://www.free-css.com/">Events & Activities</a></li>
<li><a href="http://www.free-css.com/">Open Source</a></li>
<li><a href="http://www.free-css.com/">Graphic Design</a></li>
<li><a href="http://www.free-css.com/">Web Design</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
</ul>
</div>
<div id="sidebar2">
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">January 2008</a></li>
<li><a href="http://www.free-css.com/">February 2008</a></li>
<li><a href="http://www.free-css.com/">March 2008</a></li>
<li><a href="http://www.free-css.com/">April 2008</a></li>
<li><a href="http://www.free-css.com/">May 2008</a></li>
<li><a href="http://www.free-css.com/">June 2008</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="bottom"> Copyright © yourwebsite.com | All Rights Reserved <br />
<a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul | Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> <br />
Released under <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category