tilersblog : Blog « Templates « HTML / CSS






tilersblog

   

<!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>Tiler's Blog</title>
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: #FFFFFF url(tilersblog-images/img1.jpg);
  text-align: justify;
}

body, input, textarea, select {
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #662C14;
}

h1, h2, h3 {
  margin-bottom: 1em;
  font-weight: normal;
  color: #6F8C45;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1em;
  font-weight: bold;
}

p, blockquote, ul, ol, form {
  margin-bottom: 1.5em;
}

blockquote, ul, ol {
  margin-left: 3em;
}

blockquote {
  margin-right: 3em;
  font-style: italic;
}

ul {
  list-style-type: square;
}

a {
  color: #F26C4F;
}

a:hover {
  text-decoration: none;
}

hr {
  display: none;
}

.hr {
}

img.left {
  float: left;
  margin: 0 15px 15px 0;
}

img.right {
  float: right;
  margin: 0 0 15px 15px;
}

/* Wrapper */

#wrapper {
  width: 700px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  border-left: 10px solid #C5E09D;
  border-right: 10px solid #C5E09D;
}

html>body #wrapper {
  height: auto;
}

/* Header */

#header {
  height: 60px;
  padding: 20px 30px;
  background: url(tilersblog-images/img2.jpg) no-repeat 20px 20px;
  border-bottom: 10px solid #C5E09D;
}

#header h1, #header h2 {
  margin: 0;
}

#header h1 {
  padding-left: 60px;
  font-size: 3em;
}

#header h2 {
  margin-top: -5px;
  padding-left: 60px;
  font-size: 1em;
}

#header a {
  text-decoration: none;
}

/* Content */

#content {
}

/* Blog */

#blog {
  float: right;
  width: 424px;
  padding: 20px 20px 0px 16px;
  background: url(tilersblog-images/img06.gif) no-repeat;
}

/* Post */

.post {
  margin-bottom: 20px;
  padding-bottom: 20px;
  background: url(tilersblog-images/img08.gif) no-repeat center bottom;
}

.post .title {
  height: 20px;
  margin-bottom: 15px;
  padding: 4px 0 0 30px;
  background: url(tilersblog-images/img3.jpg) no-repeat left center;
  border: 1px solid #EEEEEE;
  border-left: none;
  text-transform: uppercase;
  font-size: small;
  font-weight: bold;
}

.post .title a {
  text-decoration: none;
}

.post .title a:hover {
  text-decoration: underline;
}

.post .date {
  margin-top: -35px;
  padding-right: 15px;
  text-align: right;
  font-size: x-small;
}

.post .entry {
  padding: 20px 15px 10px 15px;
  line-height: 1.8em;
}

.post .meta {
  margin-bottom: 2em;
  padding: 0 15px;
  font-size: x-small;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 204px;
  padding: 20px 16px 0px 20px;
  background: url(tilersblog-images/img05.gif) no-repeat;
}

#sidebar ul {
  margin: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 20px;
}

#sidebar li ul {
  line-height: 1.4em;
}

#sidebar li li {
  margin: 0;
  padding-left: 30px;
}

#sidebar h2 {
  height: 20px;
  margin-bottom: 15px;
  padding: 4px 0 0 30px;
  background: url(tilersblog-images/img3.jpg) no-repeat left center;
  border: 1px solid #EEEEEE;
  border-left: none;
  text-transform: uppercase;
  font-size: small;
  font-weight: bold;
}

#sidebar a {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Search */

#search {
}

#search h2 {
}

#search form {
}

#search #inputtext1 {
}

#search #inputsubmit1 {
}

/* Archives */

#archives {
}

/* Categories */

#categories {
}

/* Blogroll */

#blogroll {
}

/* Meta */

#meta {
}

/* Footer */

#footer {
  border-top: 10px solid #C5E09D;
}

#footer p {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: x-small;
}

#footer a {
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <h1><a href="http://www.free-css.com/">Tiler's Blog</a></h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
    <hr />
  </div>
  <div id="content">
    <div id="blog">
      <div id="post-1" class="post">
        <h2 class="title"><a href="http://www.free-css.com/">Welcome to Tiler's Blog!</a></h2>
        <h3 class="date">March 26, 2007</h3>
        <div class="entry">
          <p><strong>Tiler's Blog</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 Licens</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
        </div>
        <p class="meta">Posted in <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment &raquo;</a></p>
        <div class="hr">
          <hr />
        </div>
      </div>
      <!-- end #post-1 -->
      <div id="post-2" class="post">
        <h2 class="title"><a href="http://www.free-css.com/">Sample Tags</a></h2>
        <h3 class="date">January 31, 2007</h3>
        <div class="entry">
          <p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
          <blockquote>
            <p>&ldquo;Nam et orci et leo iaculis tempor. Duis ante ante, pretium sit amet, feugiat ut, semper ac, nisl. Praesent eget mauris. Duis in pede. Vestibulum nec libero.&rdquo;</p>
          </blockquote>
          <h3>Heading Level Three</h3>
          <ul>
            <li>Proin eu ligula ut est congue malesuada.</li>
            <li>Nunc eleifend felis nec purus.</li>
            <li>Duis sodales urna sit amet nulla.</li>
          </ul>
          <h3>Ordered List</h3>
          <ol>
            <li>Donec fringilla leo eget erat.</li>
            <li>Nunc condimentum cursus lorem.</li>
            <li>Cras sodales venenatis metus.</li>
          </ol>
        </div>
        <p class="meta">Posted in <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">1 Comment &raquo;</a></p>
        <div class="hr">
          <hr />
        </div>
      </div>
      <!-- end #post-2 -->
    </div>
    <!-- end #blog -->
    <div id="sidebar">
      <ul>
        <li id="search">
          <h2>Search</h2>
          <form id="form1" method="get" action="http://www.free-css.com/">
            <div>
              <input id="inputtext1" type="text" name="inputtext1" value="" />
              <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Search" />
            </div>
          </form>
        </li>
        <!-- end #search -->
        <li id="archives">
          <h2>Archives</h2>
          <ul>
            <li><a href="http://www.free-css.com/">March 2007</a></li>
            <li><a href="http://www.free-css.com/">February 2007</a></li>
            <li><a href="http://www.free-css.com/">January 2007</a></li>
            <li><a href="http://www.free-css.com/">December 2006</a></li>
            <li><a href="http://www.free-css.com/">November 2006</a></li>
          </ul>
        </li>
        <!-- end #archives -->
        <li id="categories">
          <h2>Categories</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Uncategorized</a> <small>(6)</small></li>
            <li><a href="http://www.free-css.com/">Condimentum Cursus</a> <small>(28)</small></li>
            <li><a href="http://www.free-css.com/">Praesent Sit Mauris</a> <small>(14)</small></li>
            <li><a href="http://www.free-css.com/">Leo Iaculis Tempor</a> <small>(23)</small></li>
            <li><a href="http://www.free-css.com/">Dignissimos Ducimus</a> <small>(19)</small></li>
          </ul>
        </li>
        <!-- end #categories -->
        <li id="blogroll">
          <h2>Blogroll</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Lorem Ipsum Dolor</a></li>
            <li><a href="http://www.free-css.com/">Tempor Leo Iaculis</a></li>
            <li><a href="http://www.free-css.com/">Cursus Dignissimos</a></li>
            <li><a href="http://www.free-css.com/">Ducimus Condimentum</a></li>
            <li><a href="http://www.free-css.com/">Praesent Sit Mauris</a></li>
          </ul>
        </li>
        <!-- end #blogroll -->
        <li id="meta">
          <h2>Meta</h2>
          <ul>
            <li><a href="http://www.free-css.com/">Site Admin</a></li>
            <li><a href="http://www.free-css.com/">Logout</a></li>
            <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
            <li><a href="http://www.free-css.com/">Home</a></li>
            <li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
          </ul>
        </li>
        <!-- end #meta -->
      </ul>
    </div>
    <!-- end #sidebar -->
    <div style="clear: both; height: 1px;"></div>
  </div>
  <!-- end #content -->
  <div id="footer">
    <p>Copyright &copy; 2007 Tiler's Blog. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  </div>
</div>
<!-- end #wrapper -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.blog-style
2.blogger
3.bloggersgreen
4.blogging
5.blogsmith
6.blog_division
7.blog_graphic_design
8.christines-blog
9.chilli-blog
10.baronsblog
11.dkblog
12.metamorph_wordpress
13.design-blog
14.genericblog
15.my_dog_spot
16.orange-blog
17.paper-blog
18.personal
19.personalwebsite
20.slash-blog
21.your-blog
22.ntechblog
23.oldenglishblog
24.paint-blog
25.spotlightblog
26.theragblog
27.intrablog
28.miniblog
29.happyblog
30.Day by day blog
31.Blog by date
32.Blog layout