hibiscus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Hibiscus
Version : 1.0
Released : 20070801
Description: A two-column, fixed-width template with fluid header and footer background.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hibiscus by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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: #FFFFFF url(hibiscus-images/img01.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #7F6A63;
}
h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #492B21;
}
h1 {
letter-spacing: -1px;
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
}
p, ul, ol {
margin-top: 0;
margin-bottom: 1.6em;
line-height: 180%;
font-size: 1.2em;
}
p {
}
blockquote {
float: right;
width: 160px;
padding-top: 1.6em;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #492B21;
}
ul {
}
ol {
}
a {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #AC021C;
}
a:hover {
border: none;
text-decoration: underling;
}
small {
}
hr {
display: none;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: left;
margin: 0 0 0 15px;
}
/* Header */
#header {
width: 760px;
height: 170px;
margin: 0 auto;
background: url(hibiscus-images/img02.jpg);
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FAE6D4;
}
#header a {
border: none;
text-decoration: none;
color: #FAE6D4;
}
#header a:hover {
text-decoration: underline;
}
#logo {
float: left;
padding: 0 0 0 0;
}
#logo h1 {
margin: 0;
padding-top: 50px;
font-size: 60px;
}
#logo h2 {
margin: 0;
font-size: 18px;
}
#menu {
float: right;
}
#menu ul {
margin: 0;
padding: 118px 0 0 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 10px 0 22px;
background: url(hibiscus-images/img03.gif) no-repeat left center;
font-size: 18px;
}
#menu .first a {
background: none;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 500px;
}
/* Post */
.post {
padding: 40px 0 20px 0;
}
.vline {
border-top: 2px dotted #CCCCCC;
}
.post .date {
margin: 0;
font-size: .8em;
}
.post .title {
margin-top: 0;
}
.post .entry {
}
.post .meta {
height: 30px;
font-size: 1em;
}
.post .meta a {
display: block;
float: left;
height: 24px;
border: none;
}
.post .meta b {
display: none;
}
.post .category {
padding: 1px 40px;
background: url(hibiscus-images/img08.gif) no-repeat;
}
.post .comments {
padding: 1px 40px;
background: url(hibiscus-images/img07.gif) no-repeat;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
padding-top: 30px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
padding-top: 30px;
}
#sidebar li ul {
padding-left: 15px;
}
#sidebar li li {
padding: 0;
padding-left: 15px;
background: url(hibiscus-images/img04.gif) no-repeat left center;
font-size: .75em;
}
#sidebar li h2 {
margin-top: 0;
font-size: 1.4em;
}
#sidebar li a {
}
#sidebar fieldset {
border: none;
}
/* Footer */
#footer {
clear: both;
height: 170px;
padding-top: 30px;
background: #AC0A22 url(hibiscus-images/img05.gif) repeat-x;
text-align: center;
font-size: .7em;
color: #DD5C73;
}
#footer a {
border: none;
color: #F29DAE;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Hibiscus</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Blogs</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
<div id="page">
<div id="content">
<div class="post">
<p class="date"><strong>01 August 2007</strong></p>
<h1 class="title">Welcome to Our Website!</h1>
<div class="entry">
<p><strong>Hibiscus</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
</div>
<p class="meta"><a href="http://www.free-css.com/" class="category">Uncategorized</a> <b>|</b> <a href="http://www.free-css.com/" class="comments">22 Comments</a></p>
</div>
<div class="post vline">
<p class="date">28 July 2007</p>
<h2 class="title">Lorem Ipsum Dolorem</h2>
<div class="entry">
<blockquote>
<p>“In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.”</p>
</blockquote>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit.</p>
<h3>Nullam ante orci pellentesque eget</h3>
<p>tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.</p>
</div>
<p class="meta"><a href="http://www.free-css.com/" class="category">Uncategorized</a> <b>|</b> <a href="http://www.free-css.com/" class="comments">22 Comments</a></p>
</div>
</div>
<!-- end content -->
<div id="sidebar">
<ul>
<li>
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="searchfield" name="s" value="" />
<br />
<input type="submit" id="searchsubmit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">August 2007</a> (1)</li>
<li><a href="http://www.free-css.com/">July 2007</a> (31)</li>
<li><a href="http://www.free-css.com/">June 2007</a> (30)</li>
<li><a href="http://www.free-css.com/">May 2007</a> (31)</li>
<li><a href="http://www.free-css.com/">April 2007</a> (30)</li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Ut semper vestibulum</a> (32)</li>
<li><a href="http://www.free-css.com/">Vestibulum luctus</a> (19)</li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl</a> (33)</li>
<li><a href="http://www.free-css.com/">Etiam malesuada</a> (12)</li>
<li><a href="http://www.free-css.com/">Aenean elementum</a> (41)</li>
<li><a href="http://www.free-css.com/">Ut tincidunt elit</a> (18)</li>
<li><a href="http://www.free-css.com/">Sed quis odio</a> (30)</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
<p id="legal">©2007 Hibiscus. All Rights Reserved. | Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
<p id="links"><a href="http://www.free-css.com/">Privacy</a> | <a href="http://www.free-css.com/">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</body>
</html>
Related examples in the same category