deardiary
<!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>Dear Diary</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: #A060AA url(deardiary-images/img1.jpg) repeat-y center top;
font: italic medium Georgia, "Times New Roman", Times, serif;
color: #B35BC1;
}
h1, h2, h3, h4, h5, h6, form {
margin: 0;
padding: 0;
}
h1, h2, h3 {
}
h4, h5, h6 {
}
p, ul, ol, blockquote {
margin-top: 0;
}
a {
text-decoration: none;
color: #9132A5;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
}
/* Header */
#header {
width: 720px;
height: 70px;
margin: 0 auto;
padding: 20px;
}
/* Logo */
#logo {
float: left;
width: 410px;
padding: 0 0 0 60px;
background: url(deardiary-images/img4.jpg) no-repeat left center;
}
#logo h1 {
font-size: 2.5em;
}
#logo h2 {
font-size: 1em;
}
#logo a {
background: none;
}
/* Search */
#search {
float: right;
width: 200px;
padding-top: 13px;
}
/* Content */
#content {
width: 720px;
margin: 0 auto;
}
/* Column One */
#colOne {
float: left;
width: 470px;
}
/* Column Two */
#colTwo {
float: right;
width: 200px;
}
#colTwo ul {
margin: 0;
padding: 0;
list-style: none;
}
#colTwo li ul {
padding: 1em 0;
}
#colTwo li a {
padding-left: 15px;
background: url(deardiary-images/img7.jpg) no-repeat left center;
}
/* Latest Post */
#latest-post {
padding: 50px 0 0 0;
background: url(deardiary-images/img5.jpg) no-repeat center top;
}
#latest-post .title {
padding: 0 0 0 30px;
background: url(deardiary-images/img6.jpg) no-repeat left center;
font-size: 1.4em;
}
#latest-post .title a {
background: none;
}
#latest-post .posted {
padding: 0 0 2em 30px;
font-size: x-small;
}
#latest-post .posted a {
background: none;
}
#latest-post .image {
float: left;
margin: .3em 1em 1em 0;
}
/* Recent Posts */
#recent-posts {
padding: 50px 0 0 0;
background: url(deardiary-images/img5.jpg) no-repeat center top;
}
#recent-posts .title {
padding: 0 0 0 30px;
background: url(deardiary-images/img6.jpg) no-repeat left center;
font-size: 1.4em;
}
#recent-posts ul {
margin: 0;
padding: 20px 0 0 30px;
list-style: none;
}
#recent-posts li {
padding: 5px 0 10px 0;
background: url(deardiary-images/img2.jpg) repeat-x left bottom;
}
#recent-posts a {
background: none;
}
/* Footer */
#footer {
clear: both;
width: 720px;
margin: 0 auto;
padding: 5em 0;
font-size: xx-small;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Dear Diary</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="search">
<h2>Search</h2>
<form method="get" action="http://www.free-css.com/">
<div>
<input type="text" id="textfield1" name="textfield1" value="" size="18" />
<input type="submit" id="submit1" name="submit1" value="Go" />
</div>
</form>
</div>
</div>
<div id="content">
<div id="colOne">
<div id="latest-post">
<h2 class="title"><a href="http://www.free-css.com/">Welcome to Dear Diary!</a></h2>
<h3 class="posted">Posted on February 1st, 2007 by <a href="http://www.free-css.com/">Author</a></h3>
<div class="story"><img src="deardiary-images/img3.jpg" alt="" width="180" height="135" class="image" />
<p><em><strong>Dear Diary</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from PDPhoto.org. 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. Enjoy :)</p>
<p>Etiam eu nibh. Quisque condimentum varius velit. Proin interdum erat quis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in odio.</p>
</div>
</div>
<div id="recent-posts">
<h3 class="title">Recent Posts</h3>
<ul>
<li><strong><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
<li><strong><a href="http://www.free-css.com/">Cras sagittis est laoreet odio</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
<li><strong><a href="http://www.free-css.com/">Sed pulvinar ornare urna</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
<li><strong><a href="http://www.free-css.com/">Quisque in dolor non erat</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
<li><strong><a href="http://www.free-css.com/">Fusce lobortis dui molestie eros</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
<li><strong><a href="http://www.free-css.com/">Maecenas vel leo nec dui pulvinar</a></strong><br />
<small>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment »</a></small></li>
</ul>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
<div id="colTwo">
<ul>
<li>
<h2>Pages</h2>
<ul>
<li class="active"><a id="page1" href="http://www.free-css.com/">Home</a></li>
<li><a id="page2" href="http://www.free-css.com/">My Photos</a></li>
<li><a id="page3" href="http://www.free-css.com/">My Favorites</a></li>
<li><a id="page4" href="http://www.free-css.com/">About Me</a></li>
<li><a id="page5" href="http://www.free-css.com/">Contact Me</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<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>
<li><a href="http://www.free-css.com/">October 2006</a></li>
<li><a href="http://www.free-css.com/">September 2006</a></li>
<li><a href="http://www.free-css.com/">August 2006</a></li>
<li><a href="http://www.free-css.com/">July 2006</a></li>
<li><a href="http://www.free-css.com/">June 2006</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Quisque vestibulum</a> (23)</li>
<li><a href="http://www.free-css.com/">Sed a nisl a lacus</a> (78)</li>
<li><a href="http://www.free-css.com/">Quisque sagittis</a> (11)</li>
<li><a href="http://www.free-css.com/">Etiam volutpat</a> (34)</li>
<li><a href="http://www.free-css.com/">In aliquet hendrerit</a> (65)</li>
<li><a href="http://www.free-css.com/">Suspendisse iaculis</a> (35)</li>
<li><a href="http://www.free-css.com/">Nam vel risus at</a> (22)</li>
<li><a href="http://www.free-css.com/">Praesent sit amet</a> (54)</li>
</ul>
</li>
<li>
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">AnotherFriendlySite.net</a></li>
<li><a href="http://www.free-css.com/">CoolSite.com</a></li>
<li><a href="http://www.free-css.com/">MyBestFriend.com</a></li>
</ul>
</li>
</ul>
<div style="clear: both;"> </div>
</div>
</div>
<div id="footer">
<p>Copyright © 2006 Dear Diary. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>
Related examples in the same category