stylized
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by NodeThirtyThree <http://www.nodethirtythree.com>
Published by Free CSS Templates <http://www.freecsstemplates.org/>
Released for free under a Creative Commons Attribution 2.5 License
Title : stylized
Version : 1.1
Released : 20070716
Description: A two-column fixed width template for 1024x768 resolutions.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stylized by NodeThirtyThree + Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<style type='text/css'>
@charset "utf-8";
/*
Design by NodeThirtyThree <http://www.nodethirtythree.com>
Published by Free CSS Templates <http://www.freecsstemplates.org/>
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(stylized-images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #4A5157;
}
h1, h2, h3 {
text-transform: lowercase;
color: #292929;
}
h1 {
letter-spacing: -1px;
font-size: 30px;
}
h2 {
font-size: 24px;
color: #292929;
}
h3 {
font-size: 13px;
color: #292929;
}
p, ul, ol {
margin-bottom: 2em;
text-align: justify;
line-height: 200%;
}
p {
}
ul {
}
ol {
}
a {
color: #FF0000;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
img.left {
}
img.right {
}
.tn img {
border: 8px solid #F5F5F5;
}
hr {
display: none;
}
/* Logo */
#logo {
width: 874px;
height: 147px;
margin: 0 auto;
}
#logo h1 {
float: left;
padding: 70px 37px 0 0;
height: 54px;
background: url(stylized-images/img02.gif) no-repeat 100% 63px;
font-size: 38px;
font-weight: normal;
letter-spacing: -2px;
}
#logo h2 {
float: right;
padding: 98px 0 0 0;
text-transform: lowercase;
font-weight: normal;
font-size: 16px;
color: #FFFFFF;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 919px;
height: 50px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 25px;
margin: 0 10px;
padding: 5px 20px 0 20px;
text-transform: lowercase;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active a {
background: #EC0000 url(stylized-images/img03.gif) repeat-x left bottom;
}
/* Page */
#bg {
background: url(stylized-images/img04.gif) no-repeat center top;
}
#page {
width: 918px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 625px;
padding: 0 0 0 24px;
}
#content h1 {
margin: 45px 0 20px 0;
padding-left: 33px;
background: url(stylized-images/img07.gif) no-repeat left center;
}
#content .content {
padding-left: 32px;
}
/* Posts */
.post h1.title {
margin: 45px 0 20px 0;
padding-left: 33px;
background: url(stylized-images/img07.gif) no-repeat left center;
}
.post h2.title {
margin: 40px 0 25px 0;
padding-left: 33px;
background: url(stylized-images/img07.gif) no-repeat left center;
}
.post .title a {
text-decoration: none;
color: #292929;
}
.post .entry {
padding-left: 32px;
}
.post ul, .post ol {
margin-left: 3em;
}
.post ul {
list-style-type: square;
}
.post ol {
list-style-type: decimal;
}
/* Sidebar */
#sidebar {
float: right;
width: 214px;
padding: 0 1px 0 0;
}
#sidebar a {
color: #4A5157;
}
.box {
}
.box .title {
height: 27px;
padding: 6px 0 0 34px;
background: #C80000 url(stylized-images/img05.gif) no-repeat;
text-transform: lowercase;
font-size: 17px;
color: #FFFFFF;
}
.box .content {
padding: 26px;
background: url(stylized-images/img06.gif) repeat-x;
}
.box ul {
list-style: none;
line-height: normal;
}
.box ul li {
margin-bottom: 13px;
font-size: 12px;
}
.box small {
font-size: 10px;
color: #808C96;
}
/* Footer */
#footer {
padding: 35px 0;
background: url(stylized-images/img08.gif) no-repeat center top;
font-size: 12px;
}
#footer p {
text-align: center;
}
</style>
</head>
<body>
<div id="logo">
<h1><a href="http://www.free-css.com/">stylized</a></h1>
<h2>By <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> </h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="http://www.free-css.com/" accesskey="1" title="">Homepage</a></li>
<li><a href="http://www.free-css.com/" accesskey="2" title="">Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="3" title="">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="4" title="">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="5" title="">Contact Us</a></li>
</ul>
<hr />
</div>
<div id="bg">
<div id="page">
<div id="content">
<div id="about" class="post">
<h1 class="title">Welcome to Our Website!</h1>
<div class="entry">
<p><strong>stylized</strong> is a free template designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <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>. 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>
</div>
<!-- end #about -->
<div class="post">
<h2 class="title">Fusce ultrices fringilla</h2>
<div class="entry">
<p>Nulla sit amet enim. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla.</p>
<ul>
<li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer elit.</a></li>
<li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="http://www.free-css.com/">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
</ul>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="useful-links" class="box">
<h2 class="title">lorem ipsum </h2>
<div class="content">
<ul>
<li><a href="http://www.free-css.com/"><strong>Blandit tempor etiam</strong></a><br />
<small>Lorem ipsum dolor</small></li>
<li><a href="http://www.free-css.com/"><strong>Blandit tempor volutpat</strong></a><br />
<small>Lorem ipsum dolor</small></li>
<li><a href="http://www.free-css.com/"><strong>Blandit tempor sed</strong></a><br />
<small>Lorem ipsum dolor</small></li>
<li><a href="http://www.free-css.com/"><strong>Blandit tempor dolore</strong></a><br />
<small>Lorem ipsum dolor</small></li>
<li><a href="http://www.free-css.com/"><strong>Blandit tempor etiam</strong></a><br />
<small>Lorem ipsum dolor</small></li>
</ul>
</div>
</div>
<!-- end #useful-links -->
<div id="sponsors" class="box">
<h2 class="title">Fusce ultrices</h2>
<div class="content">
<ul>
<li><a href="http://www.free-css.com/">Quisque vehicula arcu</a></li>
<li><a href="http://www.free-css.com/">Integer id lectus sed </a></li>
<li><a href="http://www.free-css.com/">Fusce hendrerit felis</a></li>
<li><a href="http://www.free-css.com/">Metus condimentum sed</a></li>
<li><a href="http://www.free-css.com/">Fusce hendrerit felis </a></li>
</ul>
</div>
</div>
<!-- end #sponsors -->
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 20px;"> </div>
</div>
<!-- end #page -->
</div>
<!-- end #bg -->
<div id="footer">
<hr />
<p> Copyright (c) 2007 Stylized. All rights reserved. Designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category