abrasive
<!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 : Abrasive
Description: A two-column, fixed-width design with dirty looks.
Version : 1.0
Released : 20081122
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Abrasive by NodeThirtyThree for Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by NodeThirtyThree for Free CSS Templates
http://www.nodethirtythree.com/ + http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0px;
padding: 0px;
background: #FFFFFF url(abrasive-images/bg01.jpg) repeat left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #797979;
}
h1, h2, h3 {
margin-top: 0px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
p, ul, ol {
margin-top: 0px;
line-height: 160%;
}
ul, ol {
}
a {
color: #0098A4;
}
a:hover {
text-decoration: none;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
margin: 0px auto;
}
img.alignleft {
margin-right: 20px;
}
img.alignright {
margin-left: 20px;
}
a img {
border: none;
}
/* Wrapper */
#wrapper {
background: url(abrasive-images/bg02.jpg) repeat-x left top;
}
/* Header */
#header {
width: 920px;
height: 130px;
margin: 0px auto;
background: url(abrasive-images/bg03.jpg) no-repeat left top;
}
/* Logo */
#logo {
float: left;
}
#logo h1, #logo h2 {
float: left;
margin: 0px;
}
#logo h1 {
padding: 60px 0px 0px 30px;
}
#logo h2 {
padding: 80px 0px 0px 10px;
}
#logo a {
text-decoration: none;
color: #797979;
}
#logo a:hover {
text-decoration: underline;
color: #0098A4;
}
#logo h2, #logo h2 a {
font-size: 13px;
color: #9F9F9F;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0px;
padding: 78px 30px 0px 0px;
list-style: none;
}
#menu li {
float: left;
}
#menu a {
padding: 0px 20px 0px 22px;
background: url(abrasive-images/img02.gif) no-repeat left center;
text-decoration: none;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #7B7B7B;
}
#menu a:hover {
text-decoration: underline;
color: #0098A4;
}
#menu .first a {
background: none;
}
/* Page */
#page {
width: 920px;
margin: 0px auto;
background: url(abrasive-images/bg04.jpg) repeat-y left top;
}
#bgtop {
background: url(abrasive-images/bg05.jpg) no-repeat left top;
}
#bgbottom {
background: url(abrasive-images/bg06.jpg) no-repeat left bottom;
}
/* Content */
#content {
float: left;
width: 650px;
padding: 50px 0px 0px 35px;
}
.post {
}
.post .title {
padding: 0px 0px 0px 15px;
background: url(abrasive-images/img03.gif) no-repeat left top;
}
.post .title h2, .post .title h3 {
margin: 0px;
}
.post .title h2 a, .post .title h3 a {
text-decoration: none;
color: #FFFFFF;
}
.post .title h2 a:hover, .post .title h3 a:hover {
text-decoration: underline;
}
.post .title p {
margin: 0px;
text-transform: lowercase;
font-size: 16px;
color: #8D8D8D;
}
.post .title p a {
text-decoration: none;
color: #8D8D8D;
}
.post .entry {
padding: 15px 15px 25px 15px;
}
/* Sidebar */
#sidebar {
float: right;
width: 180px;
padding: 50px 10px 0px 0px;
}
#sidebar ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
margin: 15px 15px 25px 15px;
}
#sidebar li li {
font-size: 11px;
}
#sidebar h2 {
height: 27px;
margin: 0px;
padding: 3px 0px 0px 15px;
background: url(abrasive-images/img04.gif) no-repeat left top;
font-size: 24px;
color: #FFFFFF;
}
#sidebar a {
color: #BCE8EC;
}
/* Footer */
#footer {
width: 920px;
height: 100px;
margin: 0px auto;
background: url(abrasive-images/bg07.jpg) no-repeat left top;
}
#footer p {
margin: 0px;
padding: 30px 0px 0px 0px;
text-align: center;
font-size: 11px;
}
#footer a {
color: #797979;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Abrasive</a></h1>
<h2>by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a></h2>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first"><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div id="bgtop">
<div id="bgbottom">
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">Lorem Ipsum Dolor</a></h2>
<p>Posted by <a href="#">enks</a> on November 19, 2008</p>
</div>
<div class="entry"><img src="abrasive-images/img01.jpg" alt="" width="112" height="104" class="alignleft" />
<p>This is abrasive, a free, fully standards-compliant CSS template designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions</a> license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
</div>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Blandit veroeros?</a></h2>
<p>Posted by <a href="#">enks</a> on November 19, 2008</p>
</div>
<div class="entry">
<p>Morbi ante sem, aliquam vitae, egestas ullamcorper, vulputate non, magna. Cras a massa. Integer nec turpis vel <a href="#">justo pulvinar ornare</a>. Donec nec neque vel est rhoncus adipiscing.</p>
<p>Proin tempor metus ut risus. Nulla dolor. Vestibulum diam nisl, aliquet tempor, mattis id, varius id, nibh. Quisque vel diam id urna dapibus sollicitudin. Cras eget neque eu leo sollicitudin dignissim. Nunc nibh nulla, placerat vitae, <a href="#">adipiscing consectetuer id diam</a>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lobortis. Vestibulum volutpat nibh sit amet ligula. Blandit etiam sed lorem lobortis. Integer turpis.</p>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Nullam vitae</h2>
<ul>
<li><a href="#">Morbi ante sem aliquam</a></li>
<li><a href="#">Vitae egestas ullamcorpe</a></li>
<li><a href="#">Ornare donec nec neque</a></li>
<li><a href="#">Vel rhoncus adipiscing</a></li>
</ul>
</li>
<li>
<h2>Sed magna</h2>
<ul>
<li><a href="#">Morbi ante sem aliquam</a></li>
<li><a href="#">Vitae egestas ullamcorpe</a></li>
<li><a href="#">Vulputate non magna</a></li>
<li><a href="#">Cras a massa integer</a></li>
<li><a href="#">Nec turpis vel pulvinar</a></li>
<li><a href="#">Ornare donec nec neque</a></li>
<li><a href="#">Vel rhoncus adipiscing</a></li>
<li><a href="#">Vulputate non magna</a></li>
<li><a href="#">Cras a massa integer</a></li>
<li><a href="#">Nec turpis vel pulvinar</a></li>
<li><a href="#">Vulputate non magna</a></li>
<li><a href="#">Nec turpis vel pulvinar</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
<div id="footer">
<p>Copyright (c) 2008 SiteName.com. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a></p>
</div>
<!-- end #footer -->
</div>
<!-- end #wrapper -->
</body>
</html>
Related examples in the same category