nightlights : Day Night « Templates « HTML / CSS

nightlights
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Night Lights
Version    : 1.0
Released   : 20090509
Description: A two-column, fixed-width template suitable for corporate websites and blog use.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Night Lights by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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;
}

body {
  background: #D5DBB5;
  text-align: justify;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #525252;
}

h1, h2, h3 {
  margin-bottom: 15px;
  text-transform: lowercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #3B3B3B;
}

h1 {
  letter-spacing: -1px;
  font-size: 197%;
}

h2 {
  letter-spacing: -1px;
}

h3 {
}

p, ol, ul {
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

ul, ol {
  margin-left: 3em;
}

blockquote {
  padding: 0 3em;
  font-style: italic;
}

a:link {
  text-decoration: none;
  color: #3B3B3B;
}

a:hover, a:active {
  text-decoration: none;
  color: #3B3B3B;
}

a:visited {
  color: #3B3B3B;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 15px;
}

/* Header */

#header {
  width: 710px;
  height: 305px;
  margin: 0 auto;
  padding: 0 25px 10px 25px;
  background: #D5DBB5 url(nightlights-images/img01.jpg) no-repeat center top;
}

#header h1 {
  margin: 0;
  padding: 200px 0 0 40px;
  letter-spacing: -2px;
  font-size: 40px;
}

#header h1 a {
  color: #FFFFFF;
}

#header h2 {
  margin: -10px 0 0 0;
  padding: 0 0 0 175px;
  letter-spacing: normal;
  font: bold 10px Arial, Helvetica, sans-serif;
}

#header h2 a {
  color: #FFFFFF;
}

#header a {
  text-decoration: none;
}

/* Page */

#page {
  width: 710px;
  margin: 0 auto;
  padding: 0 25px;
  background: #D5DBB5 url(nightlights-images/img02.gif) repeat-y center top;
}

/* Content */

#content {
  float: left;
  width: 460px;
  padding: 5px 0 0 5px;
  background: url(nightlights-images/img03.gif) no-repeat;
}

.post {
  width: 420px;
  padding: 20px 0 0 20px;
}

.post h1, .post h2, .post h3 {
}

.post .title {
  padding: 0 0 5px 0;
}

.post .title span {
  padding-right: 30px;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 240px;
  padding: 5px 5px 0 0;
  background: url(nightlights-images/img04.gif) no-repeat;
}

.box {
  width: 239px;
  padding-left: 1px;
}

.box .title {
  height: 33px;
  margin: 0;
  padding: 10px 0 0 20px;
  background: url(nightlights-images/img09.gif) repeat-x;
  font-size: 18px;
  color: #3B3B3B;
}

.box ul {
  margin: 20px;
  padding: 0;
  list-style: none;
}

.box li {
  padding: 5px 0;
  border-bottom: 1px dashed #CCCCCC;
}

.box li.first {
  background: none;
}

.box h3 {
  margin: 0;
  font-size: 85%;
  font-weight: bold;
  color: #3B3B3B;
}

.box p {
  margin: 0;
  line-height: normal;
}

.box a {
  padding-left: 10px;
  background: url(nightlights-images/img11.gif) no-repeat 0 5px;
}

/* Footer */

#footer {
  width: 710px;
  height: 45px;
  margin: 0 auto;
  padding: 0 25px 25px 25px;
  background: #D5DBB5 url(nightlights-images/img12.gif) no-repeat center top;
}

#footer p {
  margin: 0;
  padding: 14px 20px;
  line-height: normal;
  font-size: 77%;
}

#footer a {
  color: #3B3B3B;
}

#footer a:hover {
  text-decoration: underline;
}

#legal {
  float: left;
}

#links {
  float: right;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="#">Night Lights</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end #header -->
<div id="page">
  <div id="content">
    <div class="post">
      <h1 class="title"><span>Welcome to Night Lights!</span></h1>
      <img src="nightlights-images/img07.jpg" alt="" width="120" height="120" class="left" />
      <p><strong>Night Lights</strong> is a free template from <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>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. 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>
      <p>An ordered list example:</p>
      <ol>
        <li>List item number one</li>
        <li>List item number two</li>
        <li>List item number thre</li>
      </ol>
    </div>
    <div class="post">
      <h2 class="title"><span>Lorem Ipsum Dolor</span></h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.</p>
      <h3>Curabitur Sem Urna</h3>
      <p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p>
      <blockquote>
        <p>&ldquo;In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.&rdquo;</p>
      </blockquote>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <div id="menu" class="box">
      <h2 class="title">Pages</h2>
      <ul>
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- end #menu -->
    <div id="updates" class="box">
      <h2 class="title">Recent Updates</h2>
      <ul>
        <li class="first">
          <h3>May 31, 2009</h3>
          <p><a href="#">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula&#8230;</a></p>
        </li>
        <li>
          <h3>May 26, 2009</h3>
          <p><a href="#">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh&#8230;</a></p>
        </li>
        <li>
          <h3>May 22, 2009</h3>
          <p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum&#8230;</a></p>
        </li>
        <li>
          <h3>May 17, 2009</h3>
          <p><a href="#">Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea&#8230;</a></p>
        </li>
        <li>
          <h3>May 14, 2009</h3>
          <p><a href="#">Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros&#8230;</a></p>
        </li>
      </ul>
    </div>
    <!-- end #updates -->
  </div>
  <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2009 Red Avenue. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category

1.	morningdew
2.	Morningswim
3.	morning_swim
4.	moonlight
5.	nebula
6.	nightcity
7.	nightclub
8.	nightly
9.	nightscene
10.	nightvision