purple-blog : Purple « Templates « HTML / CSS






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">&nbsp;</div>
  <ul id="nav">
    <li><a href="http://www.free-css.com/">&nbsp;&nbsp;Home&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 &copy; 2007 <a href="#logo">My Site</a>&nbsp;<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>&nbsp;&nbsp; <span><a href="http://www.free-css.com/">CSS</a></span> </p>
    </div>
    <div class="clearing">&nbsp;</div>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.metamorph_purple
2.PurpalBox
3.purple-light
4.purplebeauty
5.purplehaze
6.purplenowhere
7.purpleperfection
8.purpleseries
9.purple_beauty
10.purple_flower