darkened : Dark « Templates « HTML / CSS

darkened
  

<!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>Darkened</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
*/

body {
  background: #000000;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #E7E7E7;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
}

h1 { font-size: 34px; }

h2 {
  margin-bottom: 10px;
  padding: 0 0 22px 0;
  font-size: 24px;
  background: #000000 url(darkened-images/img3.gif) repeat-x left bottom;
}

h3 {
  padding: 0 0 22px 0;
  font-size: 13px;
  background: #000000 url(darkened-images/img3.gif) repeat-x left bottom;
}

p {
  margin-top: 0;
  text-align: justify;
  line-height: 160%;
}

a {
  color: #FE4E00;
}

a:hover {
  text-decoration: none;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 5px 0;
  background: url(darkened-images/img5.gif) repeat-x;
}

.list li.first {
  background: none;
}

/* Header */

#header {
  width: 681px;
  margin: 0 auto;
  padding: 40px 0 0 13px;
  height: 90px;
  background: url(darkened-images/img1.gif) repeat-x left bottom;
}

#header h1 {
  float: left;
}

#header h2 {
  display: none;
}

#header ul {
  float: right;
  margin: 0;
  padding: 15px 0 0 0;
  list-style: none;
}

#header li {
  display: inline;
}

#header a {
  display: block;
  float: left;
  padding: 0 14px 0 20px;
  background: url(darkened-images/img2.gif) no-repeat left center;
  text-decoration: none;
  font: bold 12px Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
}

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

#header .first a {
  background: none;
}

/* Content */

#content {
  width: 694px;
  margin: 0 auto;
}

#colOne {
  float: left;
  width: 179px;
  padding: 0 0 0 21px;
}

#colOne h3 {
  margin-top: 14px;
}

#colTwo {
  float: right;
  width: 394px;
  padding: 0 29px 0 0;
}

/* Footer */

#footer {
  clear: both;
  width: 694px;
  margin: 0 auto;
  padding: 30px 0 0 0;
}

#footer p {
  padding: 20px 0 0 0;
  background: url(darkened-images/img4.gif) repeat-x;
  text-align: center;
  color: #8A8A8A;
}

</style>


</head>
<body>
<div id="header">
  <h1>Darkened</h1>
  <h2>Menu</h2>
  <ul>
    <li class="first"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
    <li><a href="http://www.free-css.com/" accesskey="2">Products</a></li>
    <li><a href="http://www.free-css.com/" accesskey="3">Services</a></li>
    <li><a href="http://www.free-css.com/" accesskey="4">About</a></li>
    <li><a href="http://www.free-css.com/" accesskey="5">Contact</a></li>
  </ul>
</div>
<div id="content">
  <div id="colOne">
    <h3>Lorem Ipsum</h3>
    <ul class="list">
      <li class="first"><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
      <li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
      <li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
      <li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
      <li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
      <li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
    </ul>
    <p>&nbsp;</p>
    <h3>Consequat Portitor</h3>
    <p><img src="darkened-images/img6.jpg" alt="" width="179" height="59" /></p>
    <p>Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec <a href="http://www.free-css.com/">pede nisl gravida</a> iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum. <a href="http://www.free-css.com/">More&#8230;</a></p>
  </div>
  <div id="colTwo">
    <h2>Welcome</h2>
    <img src="darkened-images/img7.jpg" alt="" width="114" height="104" style="float: left; margin-right: 25px;" />
    <p>Darkened 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 to the left is from PDPhoto.org. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
    <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
    <p>&nbsp;</p>
    <h2>Blandit Etiam</h2>
    <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet <a href="http://www.free-css.com/">magna ac lacus</a> dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas <a href="http://www.free-css.com/">sed sem sit amet lectus</a> mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
  </div>
</div>
<div id="footer">
  <p>Copyright (c) 2006 Sitename.com. All rights reserved. Design by <a href="http://freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_darkmare
2.	metamorph_darknessfall
3.	metamorph_darkside
4.	metamorph_darksky
5.	metamorph_nightsky
6.	dark-effect-v2
7.	dark-pro
8.	Dark 2
9.	DarkColors
10.	darkforest
11.	DarkFusion
12.	darkgrunge
13.	darkit
14.	darkportfolio
15.	darkshine
16.	DarkSplinter
17.	darkTech
18.	darktheme
19.	Dark_Portal
20.	shadowed
21.	midnight
22.	midnightalley
23.	Dark background, white links
24.	Dark background with white border
25.	Dark backgrounds