snowglass
<!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 : snowglass
Version : 1.0
Released : 20070718
Description: A two-column, fixed-width template featuring a blue glass effect ideal for 1024x768 resolutions.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Snowglass by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
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
*/
body {
margin: 0;
padding: 0;
background: #F4FBFF url(snowglass-images/img01.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #405A67;
}
h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #4F6977;
}
h1 {
letter-spacing: -1px;
font-size: 44px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 16px;
}
p, ul, ol {
margin: 0 0 1.5em 0;
line-height: 1.5em;
text-align: justify;
}
p {
}
blockquote {
font-style: italic;
}
ul {
}
ol {
}
a {
color: #38B5F1;
}
a:hover {
text-decoration: none;
}
small {
}
hr {
display: none;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: left;
margin: 0 0 0 15px;
}
/* Header */
#header {
width: 954px;
height: 183px;
margin: 0 auto;
background: url(snowglass-images/img02.jpg);
}
/* Logo */
#logo {
float: left;
}
#logo h1, #logo h2 {
float: left;
text-transform: lowercase;
color: #FFFFFF;
}
#logo h1 {
padding: 115px 0 0 50px;
font-weight: bold;
}
#logo h2 {
padding: 143px 0 0 8px;
font-size: 14px;
font-weight: bold;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0;
padding: 140px 20px 0 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 28px 0 0;
text-transform: lowercase;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
/* Page */
#page {
width: 954px;
margin: 0 auto;
background: #FFFFFF url(snowglass-images/img03.jpg) repeat-y;
}
#bg {
background: url(snowglass-images/img06.jpg) no-repeat left bottom;
}
/* Content */
#content {
float: left;
width: 680px;
background: url(snowglass-images/img04.jpg) no-repeat;
}
/* Posts */
.post {
width: 606px;
padding: 30px 0 0 48px;
}
.post .title {
padding: 0 0 0 12px;
}
.post .title a {
color: #4F6977;
}
.post .date {
margin: -26px 25px 15px 0;
text-align: right;
color: #79AFCD;
}
.post .entry {
padding: 25px 20px 0 12px;
background: url(snowglass-images/img07.jpg) no-repeat;
}
.post .meta {
padding: 15px 12px;
background: url(snowglass-images/img08.jpg) no-repeat left bottom;
}
.post .meta b {
display: none;
}
.post .more, .post .comments {
padding: 0 30px 0 20px;
}
.post .more {
background: url(snowglass-images/img09.gif) no-repeat left center;
}
.post .comments {
background: url(snowglass-images/img10.gif) no-repeat left center;
}
/* About Box */
#about-box {
width: 185px;
height: 162px;
padding: 70px 37px 0 35px;
background: url(snowglass-images/img11.jpg) no-repeat left bottom;
}
#about-box h2 {
margin-bottom: 25px;
font-size: 18px;
font-weight: normal;
}
#about-box p {
font-size: 12px;
}
/* Sidebar */
#sidebar {
float: right;
width: 274px;
background: url(snowglass-images/img05.jpg) no-repeat;
}
#sidebar ul {
width: 206px;
margin: 0;
padding: 0 0 0 30px;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
width: auto;
padding: 0 15px 0 10px;
}
#sidebar li li {
padding: 5px 0 5px 0;
background: url(snowglass-images/img13.gif) repeat-x;
}
#sidebar li li.first {
padding-top: 0;
background: none;
}
#sidebar li h2 {
font-size: 18px;
padding: 30px 0 40px 10px;
background: url(snowglass-images/img12.jpg) no-repeat left bottom;
}
/* Footer */
#footer {
padding: 30px 0;
}
#footer p {
text-align: center;
font-size: 12px;
color: #83B3CE;
}
#footer a {
color: #83B3CE;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#">SnowGlass</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="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">Archives</a></li>
<li><a href="#" accesskey="3" title="">About</a></li>
<li><a href="#" accesskey="4" title="">Contact</a></li>
</ul>
</div>
</div>
<hr />
<div id="page">
<div id="bg">
<div id="content">
<div class="post" style="padding-top: 57px;">
<h2 class="title">Welcome to Snowglass 1.0!</h2>
<h3 class="date">Friday, July 6, 2007</h3>
<div class="entry">
<p>This is <strong>Snowglass 1.0</strong>, 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>.</p>
<p>This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</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>
<p>Be sure to check out some of my commercial work over at <a href="http://www.4templates.com/?aff=n33">4Templates</a>.</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/snowglass/">WordPress theme</a> at <a href="http://www.freewpthemes.net">Free WordPress Themes</a>.</p>
</div>
<p class="meta"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (32)</a></p>
</div>
<div class="post">
<h2 class="title">Blandit consequat etiam</h2>
<h3 class="date">Wednesday, July 4, 2007</h3>
<div class="entry">
<p>Pellentesque augue. Quisque eu sem sed lacus tincidunt posuere. Praesent nunc augue, laoreet eu, consectetuer eget, tempus eget, neque. Donec felis. Duis nec neque in bibendum rutrum. Donec viverra porta magna. Ut sit amet libero ac mauris fringilla faucibus. Maecenas tristique velit in arcu. Quisque sed tortor sit amet est facilisis tempor. Quisque porttitor. Donec ac diam quis velit molestie mattis.</p>
</div>
<p class="meta"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (32)</a></p>
</div>
<div class="post">
<h2 class="title">Nullam volutpat</h2>
<h3 class="date">Wednesday, July 4, 2007</h3>
<div class="entry">
<p>Pellentesque augue. Quisque eu sem sed lacus tincidunt posuere. Praesent nunc augue, laoreet eu, consectetuer eget, tempus eget, neque. Quisque sed tortor sit amet est facilisis tempor. Quisque porttitor. Donec ac diam quis velit molestie mattis. Pellentesque augue. Quisque eu sem sed lacus tincidunt posuere. Praesent nunc augue, laoreet eu, consectetuer eget, tempus eget, neque. Donec felis. Duis nec neque in bibendum.</p>
</div>
<p class="meta"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (32)</a></p>
</div>
</div>
<!-- end contentn -->
<div id="sidebar">
<div id="about-box">
<h2>About this Site</h2>
<p>Quisque eu sem sed lacus tincieu, consectetuer et eget, tempus eget dolore. Blandit sed etiam dolore nullam dolore.</p>
</div>
<ul>
<li>
<h2>Categories</h2>
<ul>
<li class="first"><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet nullam</a></li>
<li><a href="#">Donec felis duis</a></li>
<li><a href="#">Eget tempus lorem</a></li>
<li><a href="#">Veroeros consequat</a></li>
<li><a href="#">Nullam blandit</a></li>
<li><a href="#">Tempus aliquam </a></li>
</ul>
</li>
<li>
<h2>Links</h2>
<ul>
<li class="first"><a href="#">Neque bibendum</a></li>
<li><a href="#">Donec diam</a></li>
<li><a href="#">Eget tempus lorem</a></li>
<li><a href="#">Veroeros consequat</a></li>
<li><a href="#">Neque bibendum</a></li>
<li><a href="#">Donec diam etiam</a></li>
<li><a href="#">Tempus sed aliquam</a></li>
<li><a href="#">Nullam blandit</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
</div>
<!-- end page -->
<hr />
<div id="footer">
<p>(c) 2007 YourSite.com. All rights reserved. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category