alaskan-lake
<!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" lang="en" xml:lang="en">
<head>
<title>Alaskan Lake</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; border-width: 0; font-size: 10px; }
* * { font-size: 1em; }
body { background: #3a567e url(../alaskan-lake-images/bg.gif) center center repeat-y; }
hr { height: 1px; margin: 2em 0 1.5em 0; background: #425767; border-width: 0; }
/*FORMS*/
input { padding: .4em; background: #fff url(../alaskan-lake-images/input_bg.gif) bottom repeat-x; border: 1px solid #b0b5bd; border-bottom: 1px solid #757a82; font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; color: #222; }
input:focus { border-top: 1px solid #757a82; border-bottom: 1px solid #b0b5bd; font-weight: bold }
input.button { float: none !important; width: 100% !important; margin: 0 !important; padding: .5em; background: #fff url(../alaskan-lake-images/button_bg.gif) bottom repeat-x; border: 1px solid #fff; font: 1.2em verdana; font-weight: bold; text-align: center; color: #222; cursor: pointer; }
input.button:hover { background: #fff url(../alaskan-lake-images/button_bg_hover.gif) top repeat-x; }
label { font: 1.2em verdana; font-weight: bold; color: #7c7c7c; }
textarea { width: 97%; margin-top: .5em; padding: .6em; background: url(../alaskan-lake-images/input_bg.gif) bottom repeat-x; border: 1px solid #b0b5bd; border-bottom: 1px solid #757a82; font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; color: #222; }
textarea:focus { border-top: 1px solid #757a82; border-bottom: 1px solid #b0b5bd; font-weight: bold; }
form.h input { float: left; width: 55%; margin-bottom: .5em; }
form.h label { float: left; width: 40%; }
form.h .button_wrapper { margin-top: 1em; }
/*LAYOUT*/
#container { width: 77.2em; margin-right: auto; margin-left: auto; padding: 0 .4em 0 .4em; background: #3c5769; border-right: 1px solid #5c7690; border-left: 1px solid #5c7690; }
#scene { position: relative; width: 77em; height: 16.8em; margin-bottom: .4em; border: 1px solid #516980; border-top-width: 0; }
#scene img { width: 77em; height: 16.8em; }
#scene h1 { position: absolute; top: .9em; left: 1.2em; font: 4.8em Lucida Sans Unicode, Trebuchet MS, Sans; color: #fff; }
#scale_area { position: absolute; bottom: 0; left: 1em; width: 28em; height: 1.9em; }
#scale_knob { width: 7.4em; height: 1.3em; padding: .3em; background: #3e5a82; border: 1px solid #102c54; border-bottom-width: 0; font: 1em Lucida Sans Unicode, Trebuchet MS, Sans; font-weight: bold; text-align: center; color: #fff; cursor: pointer; }
#menu { position: absolute; right: 2em; bottom: 0; }
#menu .holder { float: left; height: 2.4em; margin-right: .3em; background: #131b22 url(../alaskan-lake-images/menu_holder_bg.gif) top repeat-x; border: 1px solid #00040b; border-bottom-width: 0; }
#menu .holder a { display: block; width: 8.4em; margin: .1em; margin-bottom: 0; background: #011b41 url(../alaskan-lake-images/menu_bg.gif) top repeat-x; font: 1em Verdana; line-height: 2.3em; font-weight: bold; text-align: center; text-decoration: none; color: #fff; }
#menu .holder a:hover { background: #6d89b1 url(../alaskan-lake-images/menu_bg_hover.gif) top repeat-x; }
#content { background: #fff; border-top: 1px solid #5c7690; }
#col_left { float: left; width: 48.5em; padding: 2em; background: #fff; border-right: .1em solid #ddd; }
.post .meta { padding-bottom: .1em; border-bottom: 1px solid #f0f0f0; }
.date { float: left; }
.date .month { width: 4.8em; height: 1.2em; background: #3783cb url(../alaskan-lake-images/date_month.gif) right repeat-y; border: 1px solid #215f85; font: 1em tahoma; font-weight: bold; text-align: center; color: #fff; }
.date .day { width: 2.4em; height: 1.8em; background: #fcfdfc url(../alaskan-lake-images/date_day.gif) bottom right no-repeat; border: 1px solid #c6c6c6; border-top-width: 0; font: 2em verdana; line-height: 1.8em; font-weight: bold; text-align: center; color: #947e7a; }
.meta a.title { float: left; font: 2.4em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; font-weight: bold; text-indent: 1em; text-decoration: none; color: #6480a8; }
.meta .commnets { float: right; padding: .4em; background: #f8f8f8 url(../alaskan-lake-images/comment_bubble.gif) .4em center no-repeat; border: 1px solid #ececec; font: 1em verdana; font-weight: bold; text-indent: 1.6em; color: #868686; }
.body a { color: #215f85; }
.body a:hover { color: #64a869; }
.body a:visited { color: #a44e4e; }
.body blockquote { padding: .5em; background: #f6f6f6; border-top: 1px dotted #6480a8; border-bottom: 1px dotted #6480a8; font: 1em Lucida Sans Unicode, Trebuchet MS, Sans; }
.body h1 { font: 1.6em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; font-weight: bold; color: #6480a8; }
.body h2 { font: 1.4em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; font-weight: bold; color: #a44e4e; }
.body h3 { font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; font-weight: bold; color: #64a869; }
.body p { margin: .5em 0 .5em 0; font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 1.5em; color: #7e7e7e; }
.comments h2 { margin-bottom: 1em; border-bottom: 1px solid #f0f0f0; font: 1.8em verdana; line-height: 2.2em; color: #656565; }
.comment { margin-top: .2em; padding: .9em; background: #edf3fa; border: 1px solid #dfdfdf; }
.comment.alt { background: #fafafa; }
.comment .meta { margin-bottom: .8em; padding-bottom: 0; border-bottom-width: 0; }
.comment .meta span { float: left; }
.comment .meta span a { font: 1.3em verdana; font-weight: bold; text-decoration: none; color: #b45b4a; }
.comment .meta span a:hover { text-decoration: underline; color: #a44e4e; }
.comment .meta span a:visited { color: #64a869; }
.comment .meta span small { font: 1em verdana; font-weight: bold; color: #666; }
.comment .meta .datetime { float: right; font: .9em verdana; color: #b45b4a; }
.comment p { font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 1.5em; color: #5e5e5e; }
.comment a { font-size: 1em; color: #b45b4a; }
.comment a:hover { color: #a44e4e; }
.comment a:visited { color: #64a869; }
#col_right { float: right; width: 24.6em; background: #ecf1f9; }
#search_box { padding: 2em 1em 2em 1em; background: #e5ecf8; border-left: 1px solid #fff; }
#search_box input { float: left; width: 11em; margin-top: .3em; }
#search_box .button_wrapper { float: left; width: 6em !important; margin-left: .5em; }
#sidebar { padding: 1em 1em 2em 1em; background: #ecf1f9; border-top: 1px solid #fff; border-left: 1px solid #fff; }
#sidebar h2 { font: 1.8em verdana; line-height: 2.2em; color: #656565; }
#sidebar ul { border-top: 1px solid #e5e5e5; list-style-position: inside; list-style-type: none; }
#sidebar ul li { padding-left: 2em; background: url(../alaskan-lake-images/folder.gif) left center no-repeat; border-bottom: 1px solid #e5e5e5; }
#sidebar ul li a { display: block; font: 1.1em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; text-decoration: none; color: #5d5d5d; }
#sidebar ul li a:hover { background: #e5ecf8; }
#footer { padding: 2em 1em 2em 1em; background: #0f1921 url(../alaskan-lake-images/footer_bg.gif) bottom repeat-x; }
#footer_left { float: left; width: 50.5em; }
#footer_right { float: right; width: 23.6em; }
#footer .header { border-top: 1px solid #1f3444; border-bottom: 1px solid #1f3444; }
#footer h3 { margin: .1em 0 .1em 0; padding-left: .5em; background: #1f3444; font: 1em verdana; line-height: 1.6em; font-weight: bold; color: #fff; }
#footer ul { margin-top: 2em; background: url(../alaskan-lake-images/footer_li_trim.gif) top repeat-x; list-style-position: inside; list-style-type: none; }
#footer ul li { background: url(../alaskan-lake-images/footer_li_trim.gif) bottom repeat-x; }
#footer ul li a { display: block; padding-left: 2em; background: url(../alaskan-lake-images/bullet.gif) .5em center no-repeat; font: 1.1em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 2em; text-decoration: none; color: #fff; }
#footer ul li:hover { background: #1a2f3f; }
#footer p { margin-top: 1.6em; font: 1.2em Lucida Sans Unicode, Trebuchet MS, Sans; line-height: 1.5em; color: #fff; }
#footer .credit { text-align: center; }
#footer .credit a { color: #fff; text-decoration: none; }
#footer .credit a:hover { text-decoration: underline; }
/*WIDTHS*/
.s49 { width: 49%; }
/*CLASSES*/
.button_wrapper { width: 15em; border: 1px solid #bfbfbf; }
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.underline { text-decoration: underline; }
</style>
<!--[if IE 6]><link type="text/css" rel="stylesheet" href="css/ie6.css" media="all" /><![endif]-->
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="scene"> <img src="alaskan-lake-images/scene.jpg" alt="" />
<h1>Alaskan Lake</h1>
<div id="scale_area">
<div id="scale_knob">» Font Size «</div>
</div>
<div id="menu">
<div class="holder"> <a href="http://www.free-css.com/">Home</a> </div>
<div class="holder"> <a href="http://www.free-css.com/">About</a> </div>
<div class="holder"> <a href="http://www.free-css.com/">Portfolio</a> </div>
<div class="holder"> <a href="http://www.free-css.com/">Link</a> </div>
<div class="holder"> <a href="http://www.free-css.com/">Contact</a> </div>
</div>
</div>
<div id="content">
<div id="col_left">
<div class="post">
<div class="meta">
<div class="date">
<div class="month">Sep</div>
<div class="day">3</div>
</div>
<a class="title" href="http://www.free-css.com/">Your Header</a> <a class="commnets" href="http://www.free-css.com/">44</a>
<div class="clear"></div>
</div>
<div class="body">
<h1>A Sub-header</h1>
<p>dolor sit amet, consectetuer adipiscing elit. Phasellus nec quam ullamcorper mauris ultricies vehicula. Proin consectetuer. Morbi consectetuer interdum leo. Duis lobortis. Donec faucibus magna a lorem. Sed nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin erat et augue.</p>
<h2>CSS Help</h2>
<p>mauris ac posuere tincidunt, ipsum ante viverra velit, vel facilisis tellus nisl quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tellus. Aenean eget lacus at arcu interdum ornare. Proin placerat pellentesque tortor. Praesent neque nisi, vulputate ut, elementum sed, pretium vitae, urna. Quisque quam urna, fringilla a, lobortis in, malesuada luctus, nisi.</p>
<h3>Exploring HTML</h3>
<p><em>risus posuere laoreet</em>. Fusce porta, <b><i>sapien vitae attis</i></b> <span class="underline">porta, mauris nibh cursus</span> urna, quis tincidunt felis pede at tellus. Donec erat metus, tincidunt in, aliquet sed, nisi. Proin ipsum. Nunc ac lacus. Curabitur interdum. Pellentesque sed enim. Mauris aliquam dui mollis enim. Proin molestie ligula eget purus. Curabitur sollicitudin. Suspendisse potenti. Curabitur bibendum elit at odio.</p>
<p><b>risus posuere</b> <i>laoreet</i>. <a href="http://www.free-css.com/">Fusce porta</a>, sapien vitae attis porta, mauris nibh cursus urna, quis tincidunt felis pede at tellus. Donec erat metus, tincidunt in, aliquet sed, nisi. Proin ipsum. Nunc ac lacus. Curabitur interdum. Pellentesque sed enim. Mauris aliquam dui mollis enim. Proin molestie ligula eget purus. Curabitur sollicitudin. Suspendisse potenti. Curabitur bibendum elit at odio.</p>
<blockquote>
<p>Hello I am Bob. And I quote often and always in the rain.</p>
</blockquote>
<p><code>function get_splognames()</code>.</p>
</div>
<div class="comments">
<h2>Commnets</h2>
<div class="comment">
<div class="meta"> <span><a href="http://www.free-css.com/">Pete Taylor</a> <small>says:</small></span> <span class="datetime">4th September 2007 at 13:14 PM</span>
<div class="clear"> </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="comment alt">
<div class="meta"> <span><a href="http://www.free-css.com/">Sky Arvalloa</a> <small>says:</small></span> <span class="datetime">4th September 2007 at 13:14 PM</span>
<div class="clear"> </div>
</div>
<p>Lorem ipsum <a href="http://www.free-css.com/">dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="comment">
<div class="meta"> <span><a href="http://www.free-css.com/">Lionel Messi</a> <small>says:</small></span> <span class="datetime">4th September 2007 at 13:14 PM</span>
<div class="clear"> </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<h2>Leave a Comment</h2>
<form class="h" action="http://www.free-css.com/" method="post">
<div>
<label>Name:</label>
<input type="text" name="name" />
</div>
<div>
<label>URL:</label>
<input type="text" name="url" />
</div>
<div>
<label>Comment:</label>
<div class="clear"> </div>
<textarea rows="6" cols="100%" name="comment"></textarea>
</div>
<div class="button_wrapper">
<input type="submit" value="Post Comment" class="button" />
</div>
</form>
</div>
</div>
</div>
<div id="col_right">
<div id="search_box">
<form action="http://www.free-css.com/" method="post">
<div>
<input type="text" name="search" />
</div>
<div class="button_wrapper">
<input type="submit" value="Search" class="button" />
</div>
<div class="clear"> </div>
</form>
</div>
<div id="sidebar">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
<li><a href="http://www.free-css.com/">Some Cat</a></li>
</ul>
<h2>Blogroll</h2>
<ul>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
<li><a href="http://www.free-css.com/">some link</a></li>
</ul>
</div>
</div>
<div class="clear"> </div>
</div>
<div id="footer">
<div id="footer_left">
<div class="header">
<h3>Popular Articles</h3>
</div>
<ul class="s49 left">
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
</ul>
<ul class="s49 right">
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
<li><a href="http://www.free-css.com/">Some Article</a></li>
</ul>
</div>
<div id="footer_right">
<div class="header">
<h3>Some Blurb</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="clear"> </div>
<hr />
<p class="credit">Produced by <a href="http://semlabs.co.uk/">SEM Labs</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category