springbloom
?<!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>Spring Bloom</title>
<style type='text/css'>
/*
Author : Christopher Robinson
Email : christopher@edg3.co.uk
Website : http://www.edg3.co.uk/
*/
* {
border:0;
margin:0;
padding:0;
}
/* general */
a {
color:#b484da;
text-decoration:none;
}
a:hover {
color:#666;
text-decoration:underline;
}
blockquote {
background:#f1f1f1;
border-left:2px solid #7534aa;
color:#444;
display:block;
font-style:oblique;
line-height:20px;
margin:0 0 0 10px;
padding:0 0 0 10px;
}
.left {
float:left;
margin:0 10px 0 0;
}
.right {
float:right;
margin:0 0 0 10px;
}
/* body */
body {
background:#fff url('springbloom-image/background_body.jpg') repeat-x top;
color:#666;
font:0.7em Verdana, "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}
/* header */
#header {
background:url('springbloom-image/background_header.jpg');
height:320px;
margin:0 auto;
position:relative;
width:760px;
}
#header:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
#header h1 {
color:#666;
font-size:40px;
font-weight:400;
left:0;
letter-spacing:-2px;
position:absolute;
top:40px;
}
#header p {
bottom:70px;
color:#fff;
font-size:2em;
position:absolute;
right:20px;
}
#header ul {
list-style:none;
position:absolute;
top:100px;
}
#header ul li {
list-style:none;
}
#header ul li a {
color:#fff;
display:block;
font-size:1.2em;
font-weight:700;
height:20px;
padding:10px;
width:190px;
}
#header ul li a:hover {
background:#b484da;
color:#eee;
text-decoration:none;
}
/* content */
#content {
height:auto;
margin:0 auto;
width:760px;
}
#content:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
/* sidebar */
#sidebar {
float:left;
width:210px;
}
#sidebar h1 {
border-bottom:2px solid #7534aa;
color:#444;
font-size:165%;
font-weight:400;
line-height:30px;
padding:0 10px;
}
#sidebar input {
background:#f1f1f1;
color:#555;
margin:10px;
padding:5px;
width:180px;
}
#sidebar p {
background:#f1f1f1;
color:#555;
display:block;
font-size:90%;
line-height:20px;
margin:10px 0;
padding:10px;
}
#sidebar p a.more {
display:block;
text-align:right;
}
#sidebar ul {
margin:10px;
}
#sidebar ul li {
border-bottom:1px solid #b484da;
list-style:none;
padding:5px 2px;
}
#sidebar ul li a {
color:#333;
display:block;
font-family:Geneva;
padding:5px;
text-decoration:none;
}
#sidebar ul li a:hover {
color:#000;
}
/* Main */
#main {
float:right;
width:520px;
}
#main p {
color:#555;
line-height:20px;
padding:10px;
}
#main h1 {
border-bottom:2px solid #7534aa;
color:#444;
font-size:165%;
font-weight:400;
line-height:30px;
padding:0 10px;
}
/* footer */
#footer {
margin:10px auto;
width:760px;
}
#footer:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
#footer p {
border-top:2px solid #7534aa;
color:#555;
font-size:90%;
line-height:20px;
padding:10px;
text-align:center;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<h1>Spring Bloom</h1>
<p>Design. Style. Usability.</p>
<ul>
<li><a href="http://www.free-css.com/">Homepage</a></li>
<li><a href="http://www.free-css.com/">My Blog</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">About Me</a></li>
<li><a href="http://www.free-css.com/">Contact Me</a></li>
</ul>
</div>
<div id="content">
<div id="sidebar">
<h1>Latest News</h1>
<p>Spring Bloom has been released to the public. Preview or download it now and leave your comments! <a href="http://www.free-css.com/" class="more">Read More »</a></p>
<p>I have created a new site to list all of my favourite design related links. (I know... how boring!) <a href="http://www.free-css.com/" class="more">Read More »</a></p>
<h1>Links</h1>
<ul>
<li><a href="http://www.free-css.com/">4Templates</a></li>
<li><a href="http://www.free-css.com/">Christopher Robinson</a></li>
<li><a href="http://www.free-css.com/">EVO Hosting</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">Text Link Ads</a></li>
<li><a href="http://www.free-css.com/">W3C Sites</a></li>
</ul>
<h1>Search</h1>
<input value="Start Your Search..." type="text" />
</div>
<div id="main">
<h1>Welcome To Spring Bloom</h1>
<p>This template is just what came together after browsing Open Stock Photography. Whilst searching through their stocks I came across the image I later used in the header & navigation area of this template. A few specifics, browser-based font resizing is fully supported and images have been optimised for size and loading speed. Other than that, this design maintains my usage of using valid semantic and well-structured XHTML 1.0 Strict and CSS 2 code.</p>
<h1>About The Designer</h1>
<p>Hello I'm Christopher, a 20 year old self taught graphics and web designer from Cheshire, England. I specialise in creating XHTML and CSS compliant websites along with any needed graphics and am available for freelance work, just contact me to have a chat or feel free to browse around my personal site.</p>
<h1>Using The Template</h1>
<p>This template is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. Please read and agree to the terms contained within this attribution so you understand the usage agreements.</p>
<blockquote>
<p>If you decide to use this template, I kindly ask you to leave the "Designed by edg3.co.uk" link in the footer (come on... it's not much to ask for considering you are getting a free template is it?).</p>
</blockquote>
<p>I am also interested in seeing how my templates are used, so feel free to send me an e-mail with a link to your page so I can check it out!</p>
<h1>Lipsum</h1>
<p><img alt="" class="left" src="springbloom-image/image.jpg" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In egestas nisl sit amet odio. Duis iaculis metus eu nulla. Donec venenatis sapien sed urna. Donec et felis ut elit elementum pellentesque. Praesent bibendum turpis semper lacus. Sed quis risus vitae eros nonummy aliquet. Curabitur congue, purus eget auctor egestas, nunc pede suscipit erat, a egestas nisi eros non orci. Fusce dolor. Etiam dictum ipsum in turpis. Nunc elit nibh, facilisis vitae, iaculis sed, sodales vel, sapien. Cras est massa, sodales at, commodo a, ultrices ac, urna. Nam eu turpis sed ante sagittis vestibulum.</p>
<p>Nullam egestas. Sed interdum, urna eget tristique sagittis, ipsum nunc aliquet velit, a mollis dui mauris ac magna. Praesent aliquam libero porta orci. In aliquet quam sit amet justo auctor imperdiet. In aliquam pharetra justo. In dolor purus, egestas at, dictum eget, aliquet nec, tellus. Sed porta justo non est. Sed nisl tortor, consectetuer at, varius et, tempor et, lectus. Cras condimentum adipiscing dolor. Etiam lacus. Cras egestas sem ac risus. Nam massa. Aliquam blandit tortor a justo. Aliquam rutrum nisi a velit. Nulla sem. Curabitur sagittis. Nunc pellentesque libero ut erat. Curabitur eget tellus.</p>
</div>
</div>
<div id="footer">
<p>Copyright © <a href="http://www.free-css.com/">Spring Bloom</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a href="http://validator.w3.org/">XHTML</a></p>
</div>
</body>
</html>
Related examples in the same category