blossoms
<!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
Name : Blossoms
Description: A two-column, fixed-width design suitable for small websites and blogs.
Version : 1.0
Released : 20080102
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Blossoms 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(blossoms-images/img01.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #737373;
}
form {
margin: 0;
padding: 0;
}
input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-bottom: 1.8em;
line-height: 160%;
}
ul, ol {
}
blockquote {
}
a {
color: #AE2ECC;
}
a:hover {
text-decoration: none;
}
hr {
display: none;
}
/* Menu */
#menu {
width: 960px;
height: 58px;
margin: 0 auto;
padding: 1px 0;
background: url(blossoms-images/img02.jpg) no-repeat center top;
}
#menu ul {
height: 58px;
margin: 0;
padding: 0;
background: url(blossoms-images/img03.gif) no-repeat;
list-style: none;
}
#menu li {
float: left;
height: 58px;
background: url(blossoms-images/img03.gif) no-repeat right top;
}
#menu a {
float: left;
height: 58px;
padding: 17px 25px 0 25px;
text-decoration: none;
font-size: 1.4em;
font-weight: bold;
color: #000000;
}
#menu a:hover {
background: url(blossoms-images/img04.gif) repeat-x;
color: #FFFFFF;
}
#menu .current_page_item a {
background: url(blossoms-images/img05.gif) repeat-x;
color: #FFFFFF;
}
/* Logo */
#logo {
width: 962px;
height: 91px;
margin: 0 auto;
background: url(blossoms-images/img06.gif) no-repeat;
color: #69A7E1;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0 20px;
}
#logo h1 {
float: left;
padding-top: 30px;
letter-spacing: -3px;
font-size: 3em;
}
#logo h2 {
float: right;
padding-top: 49px;
letter-spacing: -1px;
font-weight: normal;
}
#logo a {
text-decoration: none;
color: #69A7E1;
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 10px;
}
/* Content */
#content {
float: right;
width: 680px;
}
.post {
padding-bottom: 20px;
}
.post .title {
margin: 0;
padding: 5px 20px;
letter-spacing: -2px;
border-bottom: 1px solid #F5F5F5;
}
.post .title a {
text-decoration: none;
}
.post .entry {
padding: 10px 20px;
}
.post .meta {
height: 26px;
background: #F5F5F5;
border-top: 1px solid #E9E9E9;
font-size: smaller;
font-weight: bold;
}
.post .posted {
float: left;
height: 16px;
padding: 5px 20px;
background: url(blossoms-images/img09.gif) no-repeat left bottom;
}
.post .permalink, .post .comments {
float: right;
height: 16px;
padding: 5px 20px;
}
.post .permalink {
background: url(blossoms-images/img10.gif) no-repeat right bottom;
}
/* Sidebar */
#sidebar {
float: left;
width: 250px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
padding: 20px;
background: #F5F5F5 url(blossoms-images/img08.gif) no-repeat left bottom;
}
#sidebar li li {
margin: 0;
}
#sidebar p {
padding: 0 20px;
}
#sidebar h2 {
height: 29px;
margin: 0;
padding: 6px 0 0 20px;
background: url(blossoms-images/img07.jpg) no-repeat;
font-size: 1.4em;
font-weight: normal;
color: #000000;
}
/* Search */
#search form {
padding: 20px;
}
#search br {
display: none;
}
#search #s {
width: 135px;
}
/* Footer */
#footer {
clear: both;
width: 960px;
margin: 0 auto;
padding: 10px 0;
border-top: 1px solid #E9E9E9;
font-size: smaller;
}
#footer p {
margin: 0;
text-align: center;
line-height: normal;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li class="current_page_item"><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="#">Blossoms</a></h1>
<h2>By Free CSS Templates</h2>
</div>
<hr />
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Blossoms</a></h2>
<div class="entry">
<p>This is <strong>Blossoms</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
<p>This template is also available as a <a href="http://www.nodethirtythree.com/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on January 2, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> </p>
</div>
<div class="post">
<h2 class="title"><a href="#">Sapien sed varius</a></h2>
<div class="entry">
<p>Morbi sit amet mauris. Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor et massa. Phasellus sit amet velit. Vestibulum vel lacus vitae tortor consectetuer sapien semper dictum. Integer est felis, facilisis quis, lacinia sed, lacinia et, augue. Vivamus ultrices lacinia urna. Proin varius sollicitudin nunc. Vivamus condimentum, dui nec imperdiet porta, odio risus molestie nisl, nec laoreet purus sapien a massa.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on December 13, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> </p>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input name="submit" type="submit" value="Search" />
</div>
</form>
</li>
<li>
<h2>Veroeros etiam</h2>
<p><strong>Morbi sit amet</strong> mauris Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor loremmassa. Phasellus sit. <a href="#">More…</a></p>
</li>
<li>
<h2>Blandit Volutpat</h2>
<ul>
<li><a href="#">Morbi sit amet sed magna</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore sed</a></li>
<li><a href="#">Lacus dapibus et interdum</a></li>
<li><a href="#">Morbi sit amet magna etiam</a></li>
<li><a href="#">Maecenas sed sem lorem</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
</div>
<!-- end #page -->
<div id="footer">
<p>(c) 2007 Website Name. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> | <a href="http://free-templates.ru">free-templates.ru</a></p>
</div>
</body>
</html>
Related examples in the same category