purple-blog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Purple Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {
background: #fbf7f7 url(purple-blog-images/header_bkg.jpg) repeat-x 0% 0%; color: #565656; font-family: "Trebuchet MS", sans-serif; margin: 0; padding: 0;
}
form {
border: 0; margin: 0; padding: 0;
}
img {
border: 0; margin: 0; padding: 0; vertical-align: top;
}
a {
border-bottom: 1px solid #f3e7e7; color: #c34c3f; padding: 0; text-decoration: none;
}
a:hover {
border-bottom: 1px solid #E9D1D1; text-decoration: none;
}
.border-t {
border-top: 1px solid #f3e7e7;
}
.clearing {
clear: both; font: 1px/1px Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0;
}
hr {
display: none;
}
#container, .wrapper {
margin: 0 auto; padding: 0; position: relative; width: 768px;
}
#logo {
float: left; margin: 0; padding: 0; width: 508px;
}
#logo h1 {
height: 66px; margin: 0; padding: 0; position: relative;
}
#logo a {
border: none; color: #FFFFFF; display: block; font-family: Georgia, "Times New Roman", Times, serif; height: 47px; overflow: hidden; position: absolute; top: 30px; width: 213px;
}
#tagline {
color: #695655; font-size: 10px; font-weight: lighter; height: 36px; letter-spacing: 1px; margin: 0; padding: 0; position: relative;
}
#menu {
float: left; margin: 0; padding: 60px 0 0 56px; width: 180px;
}
#login {
background: url(purple-blog-images/login.jpg) no-repeat 0% 0%; border: none; float: left; height: 25px; margin: 0 21px 0 0; padding: 0; text-decoration: none; text-indent: -3000px; width: 16px;
}
#login:hover {
background: url(purple-blog-images/login.jpg) no-repeat 0% 100%;
}
#rss-entries {
background: url(purple-blog-images/rss_entries.jpg) no-repeat 0% 0%; border: none; float: left; height: 22px; margin: 0 21px 0 0; padding: 0; text-decoration: none; text-indent: -3000px; width: 16px;
}
#rss-entries:hover {
background: url(purple-blog-images/rss_entries.jpg) no-repeat 0% 100%;
}
#rss-comments {
background: url(purple-blog-images/rss_comments.jpg) no-repeat 0% 0%; border: none; float: left; height: 22px; margin: 0 21px 0 0; padding: 0; text-decoration: none; text-indent: -3000px; width: 16px;
}
#rss-comments:hover {
background: url(purple-blog-images/rss_comments.jpg) no-repeat 0% 100%;
}
#nav {
background: #564342 url(purple-blog-images/nav_bkg.jpg) repeat-x 0% 0%; float: left; list-style: none; margin: 0; padding: 0; width: 542px;
}
#nav li {
float: left; font-size: 11px; margin: 0; padding: 0; text-transform: uppercase;
}
#nav li a {
border-bottom: none; border-right: 1px solid #392c2b; color: #d8cbca; float: left; letter-spacing: 1px; padding: 10px 16px; text-decoration: none;
}
#nav li a:hover {
background: #433433 url(purple-blog-images/search_bkg.jpg) repeat-x 0% 0%; text-decoration: none;
}
#search {
background: #433433 url(purple-blog-images/search_bkg.jpg) repeat-x 0% 0%; float: right; margin: 0; padding: 0 0 3px 11px; width: 214px;
}
#search #s-text {
float: left; margin: 0; padding: 0;
}
#s-text>#s {
margin: 5px 0 0 0;
}
#s {
background: #ffffff url(purple-blog-images/search_box.jpg) no-repeat 0% 0%; border: 0; color: #ae9593; font: 11px "Trebuchet MS", sans-serif; margin: 4px 0 0 0; padding: 5px 0 5px 14px; width: 156px;
}
#search #s-submit {
float: left; margin: 5px 0 0 0; padding: 0;
}
#searchsubmit {
background: url(purple-blog-images/search_submit.jpg) no-repeat 0% 0%; border: 0; height: 27px; margin: 0; padding: 0; width: 33px;
}
#search label {
display: none;
}
#posts {
clear: both; float: left; margin: 0 0 35px 0; padding: 55px 0 0 0; width: 508px;
}
.caption {
color: #000; font: 21px "Times New Roman", Times, serif; margin: 0; padding: 0 0 25px 0;
}
.post {
margin: 0; padding: 0 0 35px 0;
}
.post h2, #comments h2, #post-comments h2 {
border-bottom: 1px solid #f3e7e7; color: #705b5a; font: 21px "Times New Roman", Times, serif; margin: 0; padding: 0 0 3px 0;
}
.post h2 a {
border: 0; color: #705b5a; text-decoration: none;
}
.post h2 a:hover {
border: 0; text-decoration: none;
}
.date {
background: url(purple-blog-images/date.gif) no-repeat 0% 50%; color: #9a9a52; font: 10px/1.5em "Lucida Grande", Verdana, sans-serif; margin: 8px 0 0 0; padding: 0 0 0 22px;
}
.entry {
color: #565656; font-size: 12px; margin: 0; padding: 20px 0 0 0;
}
.entry blockquote {
border-left: 4px solid #9e533f; color: #785a44; margin: 22px 0 22px 22px; padding: 0;
}
.entry blockquote p {
padding: 4px 0 4px 10px;
}
.entry ul {
list-style: disc; margin: 0; padding: 0 0 18px 22px;
}
.entry li {
margin: 0; padding: 0;
}
.entry p {
margin: 0; padding: 0 0 12px 0;
}
img.floatleft {
float: left; margin: 0 10px 10px 0;
}
.postmetadata {
clear: both; color: #565656; font: 10px "Lucida Grande", Verdana, sans-serif; margin: 8px 0 0 0; padding: 0;
}
.tags {
background: url(purple-blog-images/tag.gif) no-repeat 0% 50%; border: none; margin: 0; padding: 2px 0 2px 22px;
}
.comments-no {
background: url(purple-blog-images/comments.gif) no-repeat 0% 50%; margin: 0; padding: 2px 0 2px 22px;
}
.postmetadata a {
border-bottom: 1px solid #f3e7e7; color: #c34c3f; padding: 0 0 2px 0; text-decoration: none;
}
.postmetadata a:hover {
border-bottom: 1px solid #E9D1D1; text-decoration: none;
}
#comments {
margin: 20px 0 0 0; padding: 0;
}
.add-comment {
margin: 8px 0 0 0; padding: 0;
}
.add-comment a {
background: url(purple-blog-images/add.gif) no-repeat 0% 50%; border: none; color: #9a9a52; font: 10px/1.5em "Lucida Grande", Verdana, sans-serif; padding: 2px 0 2px 22px; text-decoration: none;
}
.add-comment a:hover {
color: #c34c3f; text-decoration: none;
}
#comments ol {
color: #888888; font-size: 12px; list-style: none; margin: 0; padding: 0;
}
#comments ol li {
clear: both; margin: 0; padding: 0;
}
.author {
color: #bbbbbb; float: left; font: 10px/2.5em "Lucida Grande", Verdana, sans-serif; margin: 0; padding: 20px 0 6px 0; width: 170px;
}
.author a {
font: 12px "Trebuchet MS", sans-serif;
}
.comment {
float: right; margin: 0; padding: 20px 0 6px 0; width: 320px;
}
.comment span, .no-find {
background: #F4F29D; color: #862D2D; font-size: 12px; font-style: italic; margin: 0; padding: 2px;
}
.comment p {
margin: 0; padding: 0;
}
#post-comments {
clear: both; color: #888888; margin: 0; padding: 40px 0 0 0;
}
#reply {
font-size: 12px; margin: 20px 0 0 0; padding: 0;
}
.comment-field {
margin: 0; padding: 0 0 12px 0;
}
.comment-field textarea {
border: 1px solid #CBBCBC; color: #565656; font: 11px "Trebuchet MS", sans-serif; padding: 2px; width: 320px;
}
.comment-field label {
float: left; width: 170px;
}
.input-text {
border: 1px solid #CBBCBC; color: #565656; font: 11px "Trebuchet MS", sans-serif; padding: 2px; width: 320px;
}
.input-button {
color: #565656; margin: 0 0 0 171px; padding: 0 5px;
}
#sidebar {
background: url(purple-blog-images/sidebar_top.jpg) no-repeat 0% 36px; float: right; margin: 0; padding: 64px 0 0 0; width: 225px;
}
#sidebar h2 {
color: #cc6358; font-size: 11px; font-weight: bold; letter-spacing: 1px; margin: 0; padding: 0 0 0 21px; text-transform: uppercase;
}
#sidebar ul {
background: url(purple-blog-images/sidebar_bkg.jpg) repeat-y 0% 0%; font-size: 12px; line-height: 14px; list-style: none; margin: 0; padding: 0;
}
#sidebar ul li {
margin: 0; padding: 0;
}
#sidebar ul li ul {
margin: 0; padding: 10px 0 15px 0;
}
#sidebar ul li ul li {
margin: 0; padding: 0;
}
#sidebar a {
background: url(purple-blog-images/arrow.gif) no-repeat 21px 50%; border: none; color: #876F6D; display: block; height: 24px; line-height: 24px; padding: 0 0 0 31px; text-decoration: none; width: 191px;
}
#sidebar a:hover {
background: #fbf7f7 url(purple-blog-images/arrow.gif) no-repeat 21px 50%; border-bottom: 1px solid #d3cac9; border-top: 1px solid #d3cac9; color: #98983d; display: block; height: 22px; line-height: 22px; text-decoration: none; width: 191px;
}
.sidebar-bottom {
background: url(purple-blog-images/sidebar_bottom.jpg) no-repeat 0% 100%; display: block; height: 23px; margin: 0 0 35px 0; padding: 0;
}
#footer {
background: #4e3d3c url(purple-blog-images/footer_bkg.jpg) repeat-x 0% 0%; clear: both; margin: 0; padding: 25px 0 0 0; position: relative;
}
#footer-recent-posts {
float: left; margin: 0; overflow: hidden; padding: 0;
}
#footer-recent-comments {
float: left; margin: 0 0 0 35px; overflow: hidden; padding: 0;
}
#footer-recent-posts h2, #footer-recent-comments h2 {
color: #adb96e; font-size: 11px; font-weight: bold; letter-spacing: 1px; margin: 0; padding: 0; text-transform: uppercase;
}
#footer-recent-posts ul, #footer-recent-comments ul {
list-style: none; margin: 0; padding: 4px 0 25px 0;
}
#footer-recent-posts ul li, #footer-recent-comments ul li {
margin: 0; padding: 0;
}
#footer-recent-posts a {
border-bottom: 1px solid #5c4847; color: #a68887; display: block; font-size: 12px; padding: 8px 0 2px 0; width: 236px;
}
#footer-recent-comments a {
border-bottom: 1px solid #5c4847; color: #a68887; display: block; font-size: 12px; height: 48px; padding: 8px 0 2px 0; width: 236px;
}
#footer-recent-posts a:hover, #footer-recent-comments a:hover {
border-bottom: 1px solid #7a605e; color: #ccb9b9; text-decoration: none;
}
#footer-recent-posts span, #footer-recent-comments span {
color: #786160; font: 10px "Lucida Grande", Verdana, sans-serif;
}
#about {
float: left; margin: 0 0 0 35px; padding: 0; width: 225px;
}
#about h2 {
color: #adb96e; font-size: 11px; font-weight: bold; letter-spacing: 1px; margin: 0; padding: 0; text-transform: uppercase;
}
#info {
color: #866B6A; font-size: 12px; margin: 0; padding: 12px 0 20px 0;
}
#copyright {
background: #3c2e2d; color: #786160; font: 10px "Lucida Grande", Verdana, sans-serif; margin: 0; padding: 15px 0 0 5px;line-height: 16px;
}
#copyright a, #valid a {
border-bottom: 1px solid #5c4847; color: #a68887; padding: 0 0 2px 0; text-decoration: none;
}
#copyright a:hover, #valid a:hover {
border-bottom: 1px solid #7a605e; color: #ccb9b9; text-decoration: none;
}
#valid {
background: #3c2e2d; color: #786160; font: 10px "Lucida Grande", Verdana, sans-serif; margin: 0; padding: 5px 0 15px 5px;
}
#valid span {
background: url(purple-blog-images/check.gif) no-repeat 0% 50%; margin: 0; padding: 0 0 0 14px;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1><a href="http://www.free-css.com/">Purple</a></h1>
<h2 id="tagline">By Henry Jorge, and TemplateFusion.</h2>
</div>
<div id="menu"> <a href="http://www.free-css.com/" id="login">login</a> <a href="http://www.free-css.com/" id="rss-entries">rss entries</a> <a href="http://www.free-css.com/" id="rss-comments">rss comments</a> </div>
<div class="clearing"> </div>
<ul id="nav">
<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/">Contact</a></li>
<li><a href="http://www.free-css.com/">Henry</a></li>
<li><a href="http://www.free-css.com/">Tf</a></li>
</ul>
<div id="search">
<form method="get" id="searchform" action="http://www.free-css.com/">
<div id="s-text">
<input value="Search" name="s" id="s" type="text" />
<label for="s">Search</label>
</div>
<div id="s-submit">
<input id="searchsubmit" value="" type="submit" />
</div>
</form>
</div>
<div id="posts">
<div class="post">
<h2><a href="http://www.free-css.com/">Purple - A Free CSS Template</a></h2>
<p class="date">March 15, 2008</p>
<div class="entry">
<p><img src="purple-blog-images/money.jpg" alt="" height="104" width="512" /></p>
<p>This is a free template released by Template Fusion, and created by Henry Jorge for personal or commercial use. It is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/ca/">Creative Commons Attribution 2.5 Canada License</a>. That pretty much means you can use it in any way you want, but you MUST have "attribution" to TemplateFusion in the form of a link in your footer. Due to the fact that this template was <b>NOT</b> created by templatefusion, our normal copyright removal policy does not apply. <b>You can not remove the copyright from this template under any circumstance.</b> </p>
<h2>Code Examples.</h2>
<p><b>Bold,</b> <i>Italic,</i> <u>Underline,</u></p>
<ul>
<li>Here is an example </li>
<li>Of an unordered list</li>
</ul>
<ol>
<li>Here is an example </li>
<li>Of an ordered list</li>
</ol>
<blockquote>
<p>Few people even scratch the surface, much less exhaust the contemplation of their own experience. <em><strong>Randolph Bourne</strong></em></p>
</blockquote>
</div>
<div class="postmetadata"> <span class="tags"><a href="http://www.free-css.com/">Uncategorized</a></span> <span class="comments-no"><a href="http://www.free-css.com/">1 Comment</a></span> <br />
</div>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>Pages</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/" title="About">About</a></li>
<li><a href="http://www.free-css.com/" title="Services">Services</a></li>
<li><a href="http://www.free-css.com/" title="Portfolio">Portfolio</a></li>
<li><a href="http://www.free-css.com/" title="Contact">Contact</a></li>
<li><a href="http://www.free-css.com/">Henry Jorge</a></li>
<li><a href="http://www.free-css.com/">TemplateFusion</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">September 2008</a></li>
<li><a href="http://www.free-css.com/">October 2008</a></li>
<li><a href="http://www.free-css.com/">November 2008</a></li>
<li><a href="http://www.free-css.com/">December 2008</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Uncategorized</a></li>
</ul>
</li>
<li>
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">TemplateFusion</a></li>
<li><a href="http://www.free-css.com/">Henry Jorge</a></li>
</ul>
</li>
<li>
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css.com/">Login</a></li>
<li><a href="http://www.free-css.com/">WordPress</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="footer" class="clearfix">
<div class="wrapper">
<div id="footer-recent-posts">
<h2>Recent Posts</h2>
<ul>
<li> <a href="http://www.free-css.com/">Purple - A Free CSS Template by Henry Jorge and TF. <br />
<span>March 15, 2008</span></a> </li>
<li> <a href="http://www.free-css.com/">Purple - A Free CSS Template by Henry Jorge and TF. <br />
<span>March 15, 2008</span></a> </li>
<li> <a href="http://www.free-css.com/">Purple - A Free CSS Template by Henry Jorge and TF. <br />
<span>March 15, 2008</span></a> </li>
</ul>
</div>
<div id="footer-recent-comments">
<h2>Recent Comments</h2>
<ul>
<li><a href="http://www.free-css.com/">Wow, great template! Good job both to Templatefusion and Henry Jorge! <br />
<span>Happy Camper</span></a></li>
<li><a href="http://www.free-css.com/">Wow, great template! Good job both to Templatefusion and Henry Jorge! <br />
<span>Happy Camper</span></a></li>
<li><a href="http://www.free-css.com/">Wow, great template! Good job both to Templatefusion and Henry Jorge! <br />
<span>Happy Camper</span></a></li>
</ul>
</div>
<div id="about">
<h2>About</h2>
<p id="info">This template was created by Henry Jorge, then recoded, touched up, and released by TemplateFusion.org</p>
<p id="copyright"> Copyright © 2007 <a href="#logo">My Site</a> <br />
Designed by <a href="http://HenryJ.org">Henry Jorge</a><br />
Released by <a href="http://templatefusion.org">TemplateFusion</a> </p>
<p id="valid"> <span><a href="http://validator.w3.org/check?uri=referer">XHTML</a></span> <span><a href="http://www.free-css.com/">CSS</a></span> </p>
</div>
<div class="clearing"> </div>
</div>
</div>
</body>
</html>
Related examples in the same category