blogsmith
<!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>Blogsmith</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #333333 url(blogsmith-images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
margin-top: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
list-style-image: url(blogsmith-images/img07.gif);
}
a {
color: #333333;
}
a:hover {
text-decoration: none;
color: #000000;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
/* Header */
#logo {
width: 750px;
height: 65px;
margin: 0 auto;
}
#logo h1, #logo p {
margin: 0;
color: #FFFFFF;
}
#logo h1 {
float: left;
padding-top: 30px;
}
#logo p {
float: right;
padding-top: 39px;
font-size: 1.2em;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 778px;
height: 45px;
margin: 0 auto;
background: #F6F6F6 url(blogsmith-images/img02.gif) no-repeat;
}
#menu ul {
margin: 0;
padding: 5px 0 0 14px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 29px;
padding: 11px 30px 0 30px;
text-decoration: none;
font-weight: bold;
color: #333333;
}
#menu a:hover {
text-decoration: underline;
color: #000000;
}
#menu .current_page_item a {
background: url(blogsmith-images/img06.gif) repeat-x;
}
/* Page */
#page {
width: 778px;
margin: 0 auto;
background: #FFFFFF url(blogsmith-images/img05.gif) repeat-y;
}
#page-bg {
padding: 11px 24px;
background: url(blogsmith-images/img03.jpg) no-repeat;
}
/* Latest Post */
#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
}
/* Content */
#content {
float: left;
width: 420px;
padding: 20px 0 0 20px;
}
.post {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #E7E7E7;
}
.title {
margin: 0;
}
.title a {
text-decoration: none;
}
.title a:hover {
border-bottom: 1px dotted #999999;
}
.byline {
margin: 0 0 20px 0;
}
.entry {
}
.links {
padding-top: 10px;
text-align: right;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 230px;
padding-right: 20px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
margin-bottom: 10px;
padding-bottom: 10px;
}
#sidebar li li {
padding: 5px 20px 5px 35px;
background: url(blogsmith-images/img07.gif) no-repeat 20px 50%;
border-bottom: 1px solid #F3F3F3;
}
#sidebar h2 {
margin: 0;
padding: 24px 0 3px 20px;
border-bottom: 1px solid #E7E7E7;
letter-spacing: -1px;
font-size: 1.2em;
font-weight: bold;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
width: 750px;
margin: 0 auto;
padding: 20px 0;
background: url(blogsmith-images/img08.gif) no-repeat;
}
#footer p {
margin: 0;
text-align: center;
font-size: smaller;
color: #666666;
}
#footer a {
color: #666666;
}
</style>
</head>
<body>
<div id="logo">
<h1><a href="http://www.free-css.com/">Blogsmith</a></h1>
<p>Free CSS Template</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="http://www.free-css.com/">Homepage</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="page">
<div id="page-bg">
<div id="latest-post"> <img src="blogsmith-images/img04.jpg" alt="" width="140" height="165" class="right" />
<h1>Welcome to Our Website!</h1>
<p><strong>Blogsmith</strong> is a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a <a target="_blank" 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 WordPress theme at Free WordPress Themes. The photo on this template is from PDPhoto.org. </p>
</div>
<div id="content">
<div class="post">
<h2 class="title"><a href="http://www.free-css.com/">About this Template</a></h2>
<p class="byline"><small>Posted on October 1st, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
<div class="entry">
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque 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.<br />
</p>
</div>
<p class="links"><a href="http://www.free-css.com/" class="more">Read More</a> <a href="http://www.free-css.com/" class="comments">No Comments</a></p>
</div>
<div class="post">
<h2 class="title"><a href="http://www.free-css.com/">Sample Tags</a></h2>
<p class="byline"><small>Posted on October 1st, 2007 by <a href="http://www.free-css.com/">Free CSS Templates</a></small></p>
<div class="entry">
<h3>An H3 Followed by a Blockquote:</h3>
<blockquote>
<p>“Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p>
</blockquote>
<h3>Bulleted List:</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
</ul>
<h3>Numbered List:</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
</ol>
</div>
<p class="links"><a href="http://www.free-css.com/" class="more">Read More</a> <a href="http://www.free-css.com/" class="comments">No Comments</a></p>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Aliquam libero</a></li>
<li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
<li><a href="http://www.free-css.com/">metus aliquam pellentesque</a></li>
<li><a href="http://www.free-css.com/">Suspendisse iaculis mauris</a></li>
<li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
<li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">September</a> (23)</li>
<li><a href="http://www.free-css.com/">August</a> (31)</li>
<li><a href="http://www.free-css.com/">July</a> (31)</li>
<li><a href="http://www.free-css.com/">June</a> (30)</li>
<li><a href="http://www.free-css.com/">May</a> (31)</li>
</ul>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
</div>
<div id="footer">
<p>©2007 All Rights Reserved. • Design by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category