Green_Feeling
<!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>Green Feelin'</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* the fons, margins, color, etc of everything */
#html, body { font: 13px trebuchet ms; margin: 0; padding: 0; color: #666; height: 100%; }
/* what holds everything in place */
#container { background: #fff; width: 820px; margin: 10px auto; padding: 2px; }
/* the banner image holder */
#banner { width: 819px; background: url('Green_Feeling-images/bgb.jpg') top left no-repeat; margin: 0 0 3px 0; position: relative; height: 150px; color: #fff; }
/* the top navigation bar */
#nav { background: #fff; width: 810px; background: #fff; text-align: right; padding: 5px; margin: 0 0 5px 0; }
/* where all the main text is stored */
#content { height: 100%; float: left; background: #fff; padding: 5px; width: 650px; margin-bottom: 20px; }
/* the right bar */
#sidebar { float: right; width: 130px; border-left: 1px dotted #ccc; padding: 5px 0 0 10px; margin: 10px 0 10px 15px; }
/* the links in the banner image */
#topbar { text-align: right; color: #666; padding: 5px; margin-right: 55px; }
/* footer */
#footer { clear: both; background: url('Green_Feeling-images/blackbg.gif') repeat; border-top: 4px solid #666; text-align: center; padding-bottom: 5px; }
/* link styling */
#content a { color: #87af7b; text-decoration: none; } #content a:hover { text-decoration: underline; }
#topbar a { color: #87af7b; text-decoration: none; } #topbar a:hover { text-decoration: underline; }
#nav a { color: #666; font-weight: bold; text-decoration: none; } #nav a:hover { text-decoration: underline; }
#topbar a { color: #666; font-weight: bold; text-decoration: none; } #topbar a:hover { text-decoration: underline; }
#footer a { color: #666; font-weight: bold; text-decoration: none; } #footer a:hover { text-decoration: underline; }
#sidebar a { display: block; color: #666; text-decoration: none; padding: 5px 0 5px 0;} #sidebar a:hover { background: #deebd2; color: #666; }
/* extra attributes */
.headline { font-size: 18px; margin: 3px 0 3px 0; }
.meta { background: url('Green_Feeling-images/bg.gif'); border-top: 1px solid #666; text-align: right; color: #666; text-transform: uppercase; letter-spacing: 2px; }
.imageright { float: right; border: 1px solid #ccc; padding: 3px; margin: 3px 3px 0 7px; } .imageright:hover { border: 1px solid #666; }
.imageleft { float: left; border: 1px solid #ccc; padding: 3px; margin: 3px 10px 0 0px; } .imageleft:hover { border: 1px solid #666; }
.sideimage { border: 1px solid #ccc; padding: 3px; margin: 4px; margin: 10px 0 5px 0; } .sideimage:hover { border: 1px solid #666; }
#topbar ul { margin: 0; padding: 0; } #topbar li { list-style: none; width: auto; }
#sidebar ul { margin: 5px 0 15px 20px; padding: 0; border-top: 1px solid #ccc; } #sidebar li { margin: 0; padding: 0; text-align: center; list-style-type: none; border-bottom: 1px solid #ccc; }
#content ul { margin: 5px 0 10px 30px; padding: 0; border-top: 1px solid #ccc; width: 320px; } #content li { display: block; text-align: left; margin: 0; padding: 0 0 0 10px; list-style-type: none; border-bottom: 1px solid #ccc; }
#content li:hover { background: #deebd2; }
strong { color: #87af7b; background: inherit; }
blockquote { background: url('Green_Feeling-images/blockbg.jpg') repeat-x; color: #666; padding: 5px; border: 1px solid #ccc; margin: 5px 0 15px 0px; }
#banner h1 { position: absolute; letter-spacing: -2px; font-size: 32px; top: 35px; left: 20px; }
#topbar h3 { margin: 0 0 3px 0; padding: 0; }
</style>
</head>
<body>
<div id="container">
<div id="nav">
<img src="Green_Feeling-images/about.gif" alt=""/> <a href="#">about</a>
<img src="Green_Feeling-images/products.gif" alt=""/> <a href="#">archive</a>
<img src="Green_Feeling-images/contact.gif" alt=""/> <a href="#">contact</a>
<img src="Green_Feeling-images/services.gif" alt=""/> <a href="#">services</a>
<img src="Green_Feeling-images/help.gif" alt=""/> <a href="#">whatever</a>
</div>
<div id="banner">
<h1>Green Feeling.</h1>
<div id="topbar">
<h3>Categories</h3>
<ul>
<li><a href="#">Computers (145)</a></li>
<li><a href="#">Music (584)</a></li>
<li><a href="#">Entertainment (32)</a></li>
<li><a href="#">Life (152)</a></li>
<li><a href="#">View all categories</a></li>
</ul>
</div>
</div>
<div id="content">
<h1 class="headline">
Welcome to: <strong>green</strong> feeling.
</h1>
<p>
<img class="imageright" src="Green_Feeling-images/questionmark.jpg" width="100" height="100" alt=""/>
This design is the result of listening to <a href="http://last.fm/music/fat+jon">Fat Jon</a> and <a href="http://last.fm/music/nujabes">Nujabes</a> for 5 or so hours, then staring at my screen and typing away furiously making a new design.
<br /><br />Are there any errors?<br/><br/>
Hopefully not. :D
</p>
<p>
Donec ac risus vel nulla iaculis <a href="#">euismod.</a> Integer ac risus. Pellentesque ut ante in risus suscipit scelerisque. Pellentesque risus. Vestibulum congue. Cras faucibus aliquam dolor. Ut sollicitudin dui vel magna. In et neque interdum eros ullamcorper tempor. Ut gravida odio ut leo. Sed iaculis ipsum ultricies augue. Nulla sed tortor. Fusce a magna. Duis nonummy ligula at nisi. Donec nisi ante, egestas in, dignissim sit amet, fermentum non, nisi. Vestibulum lacinia. Etiam odio.
</p>
<p>I've included sexy hover effects that confuse IE! :D</p>
<div class="meta">
posted in: <a href="#">computers</a> @ june 6th, 7pm. | <img src="Green_Feeling-images/comment.gif" alt=""/> <a href="#">comments (5)</a>
</div>
<h1 class="headline">
Fat <strong>Jon</strong> + Nujabes
</h1>
<p>
<img class="imageleft" src="Green_Feeling-images/questionmark.jpg" width="100" height="100" alt=""/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pellentesque tincidunt mi. Suspendisse pellentesque libero ut ante. Curabitur sem dolor, feugiat id, ullamcorper sit amet, fringilla et, sapien. Mauris sed leo. Vivamus aliquam mi fermentum mi. Nulla id enim ac ante congue cursus. Aliquam ullamcorper sapien in quam vehicula porttitor. Donec imperdiet tristique felis. Donec quis ipsum. Sed sapien erat, euismod tincidunt, vulputate id, lobortis a, est. Nunc sem quam, mattis ac, molestie vitae, aliquam id, purus. Nulla sed ligula.
</p>
<p>
Donec ac risus vel nulla iaculis euismod. Integer ac risus. Pellentesque ut ante in risus suscipit scelerisque. Pellentesque risus. Vestibulum congue. Cras faucibus aliquam dolor. Ut sollicitudin dui vel magna. In et neque interdum eros ullamcorper tempor. Ut gravida odio ut leo. Sed iaculis ipsum ultricies augue. Nulla sed tortor. Fusce a magna. Duis nonummy ligula at nisi. Donec nisi ante, egestas in, dignissim sit amet, fermentum non, nisi. Vestibulum lacinia. Etiam odio.
</p>
<h1 class="headline">
Blockquote.<strong>Test</strong>
</h1>
<blockquote>
<p>
Testing a blockquote. Isn't it pretty what you can do with CSS? Testing a blockquote. Isn't it pretty what you can do with CSS? Testing a blockquote. Isn't it pretty what you can do with CSS? Isn't it pretty what you can do with CSS? Isn't it pretty what you can do with CSS? Isn't it pretty what you can do with CSS? Well, maybe not the way I style it.
<a href="#">Link test.</a>
</p>
</blockquote>
<div class="meta">
posted in: <a href="#">computers</a> @ june 6th, 7pm. | <img src="Green_Feeling-images/comment.gif" alt=""/> <a href="#">comments (5)</a>
</div>
<h1 class="headline">
Just <strong>more</strong> filler <strong>text</strong>
</h1>
<p>
Maximize your Smoky Mountains experience! Whether you are seeking a unique rugged adventure, to expand your knowledge and skills, or simply a peaceful encounter with nature at its finest, come discover the stunning world of the Great Smoky Mountains National Park.
</p>
<p>
A Walk In The Woods is a full range guide service geared to making your time in the Smokies as wonderful as possible. Emphasizing the teaching of natural history, this is A Walk In The Woods' ninth year of offering spectacular trips into the Smokies.
</p>
<p>
We are experts in the Great Smoky Mountains National Park, medicinal and edible uses of wild plants and mushrooms, wild animals and their habits, backpacking, primitive skills, survival, and human history of the area, including the Native Americans and early settlers.
</p>
<p>
All of our services help make your trip to the Great Smoky Mountains rewarding and fun. We offer a large selection of interpretive nature walks and guided hikes, hiker shuttle service in and around the Great Smoky Mountains National Park, Appalachian Trail support, trip planning, equipment rental, guided backpacking trips, classes and seminars. Our goal is to make the Great Smoky Mountains National Park come alive for you.
</p>
<p>
A Walk in the Woods has been building Smoky Mountain memories for our clients since 1998, as a full-time guide service to the Great Smoky Mountains National Park.
</p>
<p>And a list:</p>
<ul>
<li>Bacon</li>
<li>Eggs</li>
<li>Milk</li>
<li>Chicken</li>
</ul>
<div class="meta">
posted in: <a href="#">computers</a> @ june 6th, 7pm. | <img src="Green_Feeling-images/comment.gif" alt=""/> <a href="#">comments (5)</a>
</div>
</div>
<div id="sidebar">
<h1 class="headline"><strong>Skip </strong>to:</h1>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
<li><a href="#">Page 6</a></li>
<li><a href="#">Page 7</a></li>
<li><a href="#">Page 8</a></li>
<li><a href="#">Page 9</a></li>
</ul>
<h1 class="headline"><strong>Recent</strong> posts</h1>
<ul>
<li><a href="#">Insanity I tell you! Pure insani...</a></li>
<li><a href="#">Insight? What?</a></li>
<li><a href="#">100 shiny internets</a></li>
</ul>
<a href="#">Visit the full archives... ></a><br />
<h1 class="headline">Image <strong>#1</strong></h1>
<img src="Green_Feeling-images/no.jpg" alt="Picture" class="sideimage"/>
<h1 class="headline">Image <strong>#2</strong></h1>
<img src="Green_Feeling-images/no.jpg" alt="Picture" class="sideimage"/>
</div>
</div>
<div id="footer">
<p>copyright (©) (you) | <a href="#">Valid (x)HTML 1.1</a> design: <a href="http://www.oswd.org/designs/search/designer/id/6399/">buyable</a> (r. maguire) of OSD/OSWD</p>
</div>
</body>
</html>
Related examples in the same category