nightscene
<!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">
<head>
<title>Night Scene</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
margin-bottom: 20px;
color: #333333;
}
h1 {
font-size: 1.82em;
}
h2 {
font-size: 1.36em;
}
h3 {
font-size: 1em;
}
p, blockquote, ol, ul {
margin-bottom: 20px;
line-height: 1.67em;
}
ol, ul {
list-style: none;
}
ol {
margin-left: 3em;
list-style: outside decimal;
}
a {
color: #000000;
}
a:hover {
text-decoration: none;
}
/* Logo */
#logo {
padding: 0 0 150px 0;
background: url(nightscene-images/img01.jpg) no-repeat center bottom;
border-top: 10px solid #000000;
border-bottom: 1px solid #FFFFFF;
}
#logo h1, #logo h2 {
width: 860px;
margin: 0 auto;
text-transform: uppercase;
font-size: 1.22em;
}
#logo h1 {
}
#logo h2 {
margin-top: -1.22em;
text-align: right;
}
#logo a {
text-decoration: none;
color: #000000;
}
/* Page */
#page {
width: 860px;
margin: 0 auto;
background: url(nightscene-images/img02.jpg) no-repeat;
}
/* Left */
#left {
float: left;
width: 160px;
padding: 20px;
}
#left h2 {
margin-bottom: 1em;
padding-right: 6px;
border-right: 4px solid #000000;
text-transform: uppercase;
text-align: right;
font-size: 1em;
font-weight: bold;
color: #000000;
}
#left ul {
line-height: 1.82em;
}
#left li {
padding-right: 10px;
background: url(nightscene-images/img04.gif) no-repeat right center;
text-align: right;
}
#left a {
text-decoration: none;
font-size: .85em;
}
#left a:hover {
text-decoration: underline;
}
/* Center */
#center {
float: left;
width: 418px;
padding: 21px;
}
/* Right */
#right {
float: left;
width: 160px;
padding: 20px;
}
#right h2 {
margin-bottom: 1em;
padding-left: 6px;
border-left: 4px solid #000000;
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
color: #000000;
}
#right ul {
line-height: 1.82em;
}
#right li {
padding-left: 10px;
background: url(nightscene-images/img04.gif) no-repeat left center;
}
#right a {
text-decoration: none;
font-size: .85em;
}
#right a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
height: 100px;
padding: 20px;
background: #000000 url(nightscene-images/img03.gif) repeat-x;
}
#footer p {
text-align: center;
text-transform: uppercase;
letter-spacing: .125em;
font-size: .77em;
font-weight: bold;
color: #000000;
}
#footer a {
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<div id="logo">
<h1><a href="http://www.free-css.com/">Night Scene</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="page">
<div id="left">
<h2>Nibh quis urna</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">At sapien ipsum dolorem</a></li>
<li><a href="http://www.free-css.com/">Etiam rhoncus volutpat</a></li>
<li><a href="http://www.free-css.com/">Donec dictum metus in</a></li>
<li><a href="http://www.free-css.com/">Sapien integer gravida</a></li>
<li><a href="http://www.free-css.com/">Nibh quis urna</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor sit</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
</ul>
<h2>Mauris vulputate</h2>
<ul>
<li><a href="http://www.free-css.com/">Nibh quis urna</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor sit</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
<li><a href="http://www.free-css.com/">Praesent scelerisque</a></li>
<li><a href="http://www.free-css.com/">Scelerisque erat</a></li>
<li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
<li><a href="http://www.free-css.com/">Pellentesque tempus</a></li>
<li><a href="http://www.free-css.com/">Quam quis nulla</a></li>
<li><a href="http://www.free-css.com/">Fusce ultrices fringilla</a></li>
<li><a href="http://www.free-css.com/">Praesent mattis</a></li>
<li><a href="http://www.free-css.com/">Condimentum nisl</a></li>
</ul>
</div>
<!-- end #left -->
<div id="center">
<h1>Welcome to the Night Scene!</h1>
<p><strong>Night Scene</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna.</p>
<h3>Pellentesque habitant</h3>
<p>Morbi tristique senectus et netus et malesuada fames suscipit nulla suscipit ac turpis egestas:</p>
<ol>
<li>In posuere eleifend odio quisque lorem ipsum dolor semper augue mattis wisi maecenas ligula. <a href="http://www.free-css.com/">More…</a></li>
<li>Donec leo, vivamus lorem ipsum dolor fermentum nibh in augue praesent a lacus at urna congue rutrum. <a href="http://www.free-css.com/">More…</a></li>
<li>Quisque dictum lorem ipsum dolor integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">More…</a></li>
</ol>
<p><br />
</p>
</div>
<!-- end #center -->
<div id="right">
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="http://www.free-css.com/">Maecenas luctus lectus</a></li>
<li><a href="http://www.free-css.com/">At sapien ipsum dolorem</a></li>
<li><a href="http://www.free-css.com/">Etiam rhoncus volutpat</a></li>
<li><a href="http://www.free-css.com/">Donec dictum metus in</a></li>
<li><a href="http://www.free-css.com/">Sapien integer gravida</a></li>
<li><a href="http://www.free-css.com/">Nibh quis urna</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor sit</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
<li><a href="http://www.free-css.com/">Donec dictum metus in</a></li>
<li><a href="http://www.free-css.com/">Sapien integer gravida</a></li>
<li><a href="http://www.free-css.com/">Nibh quis urna</a></li>
<li><a href="http://www.free-css.com/">Etiam posuere augue sit</a></li>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor sit</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend</a></li>
<li><a href="http://www.free-css.com/">Praesent scelerisque</a></li>
<li><a href="http://www.free-css.com/">Scelerisque erat</a></li>
<li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
<li><a href="http://www.free-css.com/">Pellentesque tempus</a></li>
<li><a href="http://www.free-css.com/">Quam quis nulla</a></li>
<li><a href="http://www.free-css.com/">Fusce ultrices fringilla</a></li>
<li><a href="http://www.free-css.com/">Praesent mattis</a></li>
<li><a href="http://www.free-css.com/">Condimentum nisl</a></li>
</ul>
</div>
<!-- end #right -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p>Copyright (c) 2007 Night Scene • Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
</body>
</html>
Related examples in the same category