hotspring
<!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>Hot Spring</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
*/
* {
margin: 0;
padding: 0;
}
body {
background: #662C14 url(hotspring-images/img01.gif) repeat-x;
text-align: justify;
}
body, input, textarea, select {
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666666;
}
h1, h2, h3 {
margin-bottom: 1em;
font-weight: normal;
color: #333333;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.3em;
}
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: #3366FF;
}
a:hover {
text-decoration: none;
color: #FF6600;
}
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: 750px;
margin: 0 auto;
background: url(hotspring-images/img02.gif) no-repeat;
}
/* Header */
#header {
width: 740px;
height: 190px;
padding: 5px;
background: url(hotspring-images/img03.jpg) no-repeat 50% 5px;
}
#header h1, #header h2 {
margin: 0;
text-transform: lowercase;
font-weight: bold;
}
#header h1 {
padding: 100px 0 0 20px;
letter-spacing: -2px;
font-size: 3em;
}
#header h2 {
margin-top: -5px;
padding: 0 0 0 22px;
font-size: 1em;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Content */
#content {
background: #FFFFFF url(hotspring-images/img04.gif) repeat-y;
}
/* Blog */
#blog {
float: left;
width: 520px;
margin-top: -5px;
padding-left: 5px;
}
/* Post */
.post {
}
.post .title {
height: 40px;
margin: 0;
padding: 7px 0 0 15px;
background: url(hotspring-images/img06.gif) repeat-x;
}
.post .title a {
text-decoration: none;
color: #FFFFFF;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
margin-top: -30px;
padding-right: 15px;
text-align: right;
font: bold x-small Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.post .entry {
padding: 20px 15px 10px 15px;
background: url(hotspring-images/img07.gif) repeat-x;
line-height: 1.8em;
}
.post .meta {
margin-bottom: 2em;
padding: 0 15px;
text-align: right;
font-size: x-small;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
margin-top: -5px;
}
#sidebar ul {
margin: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
margin: 0 5px;
padding: 15px 15px 15px 30px;
background: url(hotspring-images/img07.gif) repeat-x;
list-style-type: square;
}
#sidebar li li {
}
#sidebar h2 {
height: 29px;
margin: 0;
padding: 24px 5px 0 20px;
background: url(hotspring-images/img08.gif) no-repeat;
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}
#sidebar a {
text-decoration: none;
}
/* Search */
#search {
}
#search h2 {
height: 27px;
padding-top: 13px;
background-position: left bottom;
}
#search form {
margin-left: 5px;
margin-right: 5px;
padding: 15px 15px 0 15px;
background: url(hotspring-images/img07.gif) repeat-x;
}
#search #inputtext1 {
width: 110px;
padding: 1px 2px;
background: url(hotspring-images/img5.gif) repeat-x;
border: 1px solid #C4C3C4;
}
#search #inputsubmit1 {
background: url(hotspring-images/img6.gif) repeat-x left bottom;
border: 1px solid #C4C3C4;
}
/* Archives */
#archives {
}
/* Categories */
#categories {
}
/* Blogroll */
#blogroll {
}
/* Meta */
#meta {
}
/* Footer */
#footer {
background: url(hotspring-images/img05.gif) no-repeat;
}
#footer p {
margin: 0;
padding: 5px 10px;
font-size: x-small;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.free-css.com/">Hot Spring</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 Hot Spring!</a></h2>
<h3 class="date">March 26, 2007</h3>
<div class="entry"> <img src="hotspring-images/img09.jpg" alt="" width="120" height="120" class="left" />
<p><strong>Hot Spring</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>. 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. <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 »</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>“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.”</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 »</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 © 2007 Hot Spring. 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