edgy
<!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 : Edgy
Version : 1.0
Released : 20070412
Description: A two-column template suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Edgy 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(edgy-images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #8E959B;
}
h1, h2, h3 {
margin: 0;
padding: 0;
}
a {
color: #E55D13;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 706px;
height: 225px;
margin: 0 auto;
padding: 12px 0 0 0;
}
/* Logo */
#logo {
float: left;
width: 208px;
height: 208px;
padding: 0 15px 0 0;
background: url(edgy-images/img02.jpg) no-repeat;
}
#logo h1 {
padding: 120px 20px 0 0;
text-transform: lowercase;
text-align: right;
letter-spacing: -3px;
font-size: 40px;
font-weight: normal;
}
#logo h2 {
margin-top: -55px;
padding-left: 18px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 10px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
#logo a:hover {
}
/* Menu */
#menu {
float: left;
padding: 0 0 0 0;
}
#menu ul {
height: 55px;
margin: 0;
padding: 23px 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 120px;
height: 43px;
padding-top: 12px;
text-align: center;
text-decoration: none;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 26px;
color: #000000;
}
#menu a:hover, #menu .active a {
background: #000000;
color: #FFFFFF;
}
/* Content */
#content {
width: 700px;
margin: 0 auto;
}
/* Posts */
#posts {
float: right;
width: 480px;
margin-top: -130px;
}
.post {
padding-bottom: 1em;
}
.post .title {
clear: both;
padding-top: 10px;
letter-spacing: -2px;
font-size: 2em;
font-weight: normal;
color: #8E959B;
}
.post .date {
height: 20px;
border-bottom: 3px solid #000000;
font-size: 12px;
font-weight: normal;
}
.post .story {
padding: 0 20px;
line-height: 1.6em;
}
.post .meta {
border-top: 1px solid #000000;
padding: 0;
font-size: x-small;
}
.post .meta span {
}
.post .meta p {
margin: 0;
}
.post .meta a {
}
.post .meta a:hover {
}
.post .category {
}
.post .comments {
}
/* Bar */
#bar {
float: left;
width: 200px;
}
/* Box Style */
.boxed {
margin-bottom: 20px;
background: #F2F2F2;
}
.boxed h2 {
height: 40px;
margin: 0 0 2px 0;
padding: 10px 0 0 10px;
background: #EB850C;
border: 3px solid #000000;
border-bottom: none;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 26px;
font-weight: normal;
color: #FFFFFF;
}
.boxed ul {
margin: 0;
padding: 0;
list-style: none;
}
.boxed li {
padding: 10px;
font-size: small;
}
.boxed a {
text-decoration: none;
font-weight: bold;
color: #EB850C;
}
.boxed a:hover {
color: #545C20;
}
.boxed .active, .boxed .active a {
background: #9CF04A;
color: #FFFFFF;
}
/* Footer */
#footer {
clear: both;
padding: 20px 0 100px 0;
background: #9CF04A;
border-top: 3px solid #000000;
text-align: center;
font-size: x-small;
color: #FFFFFF;
}
#footer p {
margin: 0;
}
#footer a {
color: #FFFFFF;
}
#copy {
}
#feed {
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">Edgy</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">Blog</a></li>
<li><a href="#" accesskey="2" title="">Photos</a></li>
<li><a href="#" accesskey="3" title="">Links</a></li>
<li><a href="#" accesskey="4" title="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="posts">
<div class="post">
<h2 class="title">Welcome to Edgy</h2>
<h3 class="date">Posted on February 25, 2007 by John Doe</h3>
<div class="story">
<p><strong>Edgy</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 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 my site in some way. <em><strong>Enjoy :)</strong></em></p>
</div>
<div class="meta">
<p><span>Filed under </span><a href="#" class="category">Uncategorized</a><span> | </span><a href="#" class="comments">28 Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title">A Few Examples of Common Tags</h2>
<h3 class="date">Posted on February 22, 2007 by Jane Smith</h3>
<div class="story">
<p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p>
<blockquote>
<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p>
</blockquote>
<h3>Heading Level Three</h3>
<p>An unordered list example:</p>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three </li>
</ul>
<p>An ordered list example:</p>
<ol>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
</ol>
</div>
<div class="meta">
<p><span>Filed under </span><a href="#" class="category">Uncategorized</a><span> | </span><a href="#" class="comments">28 Comments</a></p>
</div>
</div>
</div>
<div id="bar">
<div id="archives" class="boxed">
<h2>Archives</h2>
<ul>
<li><a href="#">February 2007</a> <i>(25)</i></li>
<li class="active"><a href="#">January 2007</a> <i>(31)</i></li>
<li><a href="#">December 2006</a> <i>(31)</i></li>
<li><a href="#">November 2006</a> <i>(30)</i></li>
<li><a href="#">October 2006</a> <i>(31)</i></li>
</ul>
</div>
<div id="categories" class="boxed">
<h2>Categories</h2>
<ul>
<li><a href="#">Donec Dictum Metus</a></li>
<li><a href="#">Etiam Rhoncus Volutpat</a></li>
<li><a href="#">Integer Gravida Nibh</a></li>
<li><a href="#">Maecenas Luctus Lectus</a></li>
<li><a href="#">Mauris Vulputate Dolor Nibh</a></li>
<li class="active"><a href="#">Nulla Luctus Eleifend</a></li>
<li><a href="#">Posuere Augue Sit Nisl</a></li>
</ul>
</div>
<div id="tagcloud" class="boxed" style="text-align: justify; font-size: .7em;">
<h2>Tag Cloud</h2>
<div style="padding: 10px;"><a href="#" title="55 recent posts" style="font-size: 1.5087837837838em;">Art</a> <a href="#" title="66 recent posts" style="font-size: 1.5905405405405em;">Blogging</a> <a href="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Books</a> <a href="#" title="40 recent posts" style="font-size: 1.3972972972973em;">Culture</a> <a href="#" title="73 recent posts" style="font-size: 1.6425675675676em;">Family</a> <a href="#" title="54 recent posts" style="font-size: 1.5013513513514em;">Food</a> <a href="#" title="43 recent posts" style="font-size: 1.4195945945946em;">Friends</a> <a href="#" title="63 recent posts" style="font-size: 1.5682432432432em;">Humor</a> <a href="#" title="88 recent posts" style="font-size: 2.4972972972973em;">Life</a> <a href="#" title="49 recent posts" style="font-size: 1.4641891891892em;">Love</a> <a href="#" title="64 recent posts" style="font-size: 1.5756756756757em;">Movies</a> <a href="#" title="28 recent posts" style="font-size: 2.0513513513514em;">Music</a> <a href="#" title="25 recent posts" style="font-size: 2.0290540540541em;">News</a> <a href="#" title="92 recent posts" style="font-size: 1.7837837837838em;">Personal</a> <a href="#" title="46 recent posts" style="font-size: 1.4418918918919em;">Photography</a> <a href="#" title="13 recent posts" style="font-size: 2.0662162162162em;">Politics</a> <a href="#" title="56 recent posts" style="font-size: 1.5162162162162em;">Random</a> <a href="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Religion</a> <a href="#" title="68 recent posts" style="font-size: 1.6054054054054em;">Thoughts</a> <a href="#" title="49 recent posts" style="font-size: 1.4641891891892em;">Travel</a> <a href="#" title="45 recent posts" style="font-size: 1.4344594594595em;">Video</a> <a href="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Health</a> <a href="#" title="43 recent posts" style="font-size: 1.4195945945946em;">Media</a> <a href="#" title="53 recent posts" style="font-size: 1.4939189189189em;">Technology</a> <a href="#" title="46 recent posts" style="font-size: 1.4418918918919em;">Writing</a> </div>
</div>
</div>
</div>
<div id="footer">
<p id="copy">©2007 Snow Flakes. Designed by <a href="#">Free CSS Templates</a></p>
</div>
</body>
</html>
Related examples in the same category