Dark 2 : Dark « Templates « HTML / CSS






Dark 2

  

<!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>Dark</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
  margin: 0;
  padding: 0;
}

body {
background: #2a3742 url(Dark-images/bg.jpg) repeat-x top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #eee;
}

a {
text-decoration: none;
color: #7CBF0F;
}
a:hover {
text-decoration: underline;
color: #A3D74F;
}

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
height: 120px;
background: #2a3742 url(Dark-images/header.jpg) no-repeat;

}
#header h1 { 
font-size: 28px;
letter-spacing: -1px;
padding: 35px 0 0 20px;
color: #fff;
}
#header h1 a { 
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #A3D74F;
}
#header h2 {
font-size: 19px;
color: #e1c70e;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}

#contentbar {
background: #e1f2d0 url(Dark-images/contentbar.jpg) no-repeat top;
height: 50px;
line-height: 50px;
margin-top: 10px;
}
.contentbarleft {
float: left;
padding-left: 20px;
font-weight: 600;
font-size: 15px;
width: 220px;
}
.contentbarright {
float: right;
padding-left: 20px;
font-weight: 600;
font-size: 15px;
text-align: left;
width: 530px;
}

#content {
padding: 0 10px;
}

.right {
float: right;
width: 530px;
text-align: justify;
padding-top: 20px;
font-size: 14px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
height: 30px;
line-height: 30px;
}
.right h2 a {
text-decoration: none;
color: #A3D74F;
}
.right h2 a:hover {
color: #fff;
}

.left {
float: left;
width: 220px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
list-style-type: none;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
.left ul li a:hover {

}

#footer {
text-align: center;
font-size: 11px;
color: #eee;
margin-top: 40px;
border-top: 1px dotted #A2D84C;
padding-top: 10px;
padding-bottom: 10px;
}
#footer a { color: #eee; }
#footer a:hover { color: #aaa; }

</style>


</head>
<body>

<div id="wrap">

<div id="header">
<h1><a href="#">Website Title</a></h1>
<h2>Subheader, website description H2</h2>
</div>


<div id="contentbar"> 

<div class="contentbarleft">
Navigation :
</div>

<div class="contentbarright">
Articles :
</div>

</div>

<div id="content">

<div class="right"> 

<h2><a href="#">License and terms of use</a></h2>
Dark is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!   
<br /><br />
<img src="Dark-images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.

<h2><a href="#">Title with a link - Example of heading 2</a></h2>
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.

</div>

<div class="left"> 

<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li> 
<li><a href="#">Europe Sport</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li> 
<li><a href="#">Last Category</a></li>
</ul>

<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li> 
<li><a href="#">February 2007</a></li> 
<li><a href="#">March 2007</a></li> 
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li> 
<li><a href="#">June 2007</a></li> 
<li><a href="#">July 2007</a></li> 
<li><a href="#">August 2007</a></li> 
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>

</div>


<div style="clear: both;"> </div>

</div>

<div id="footer">
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a>
</div>

</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.DarkColors
9.darkened
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