dawntodark
<!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>Dawn To Dark</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
height : 100%;
width : 100%;
font-family: "Lucida Sans Unicode";
color : #ffffff;
background : #252525 url(dawntodark-img/bg.gif) repeat;
}
p {
font-size : 12px;
}
h1, h2, h3 {
font-size : 16px;
color : #ffffff;
}
.sideh1 {
font-size:14px;
font-weight:bold;
text-decoration:underline;
padding:15px;
}
.sidelinks {
font-size: 12px;
margin : 0 auto;
}
.sidelinks a:link {
color : #999999;
font-weight:bold;
text-decoration:none;
}
.sidelinks a:visited {
color : #999999;
font-weight:bold;
text-decoration:none;
}
.sidelinks a:hover {
color:#CCCCCC;
font-weight:bold;
text-decoration:none;
}
.sidelinks a:active {
color:#999999;
font-weight:bold;
text-decoration:none;
}
.readmore {
font-size: 12px;
color:#ffffff;
margin : 0 auto;
text-align: right;
font-weight:bold;
}
.readmore a:link {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.readmore a:visited {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.readmore a:hover {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.readmore a:active {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.container {
width : 800px;
margin : 0 auto 0 auto;
background:#252525;
}
.header {
height : 150px;
background : #252525 url(dawntodark-img/header.gif);
margin : 0;
padding : 0;
line-height:150px;
}
.sitename {
font-size : 45px;
text-align: center;
color : #000000;
vertical-align:middle;
}
.main-nav {
width : 400px;
height : 45px;
background : #111111 url(dawntodark-img/button.gif) no-repeat;
position:relative;
left:200px;
}
.main-nav ul {
border : 0;
margin : 0;
padding : 0;
list-style-type : none;
text-align : center;
font-size : 12px;
line-height : 45px;
clear : left;
}
.main-nav ul li {
display : block;
float : left;
text-align : center;
font-size : 12px;
line-height : 45px;
padding : 0;
margin : 0;
}
.main-nav ul li a span {
display : inline;
vertical-align : middle;
}
.main-nav ul li a {
width : 100px;
height : 45px;
margin : 0;
padding : 0;
display : block;
}
.main-nav ul li a.link1:hover {
background : url(dawntodark-img/buttonover.gif) 0 -45px;
}
.main-nav ul li a.link2:hover {
background : url(dawntodark-img/buttonover.gif) -100px -45px;
}
.main-nav ul li a.link3:hover {
background : url(dawntodark-img/buttonover.gif) -200px -45px;
}
.main-nav ul li a.link4:hover {
background : url(dawntodark-img/buttonover.gif) -300px -45px;
}
.main-nav a:link {
color : #ffffff;
text-decoration : none;
font-weight:bold;
}
.main-nav a:visited {
color : #ffffff;
text-decoration : none;
font-weight:bold;
}
.main-nav a:hover {
color : #ffffff;
text-decoration : none;
font-weight:bold;
}
.main-nav a:active {
color : #ffffff;
text-decoration : none;
font-weight:bold;
}
.navbar {
height : 45px;
background : url(dawntodark-img/navbar.gif);
margin-top : -45px;
}
.content {
color : #ffffff;
width :600px;
margin : 20px 0 0 20px;
background:#252525;
}
.contentside {
color : #ffffff;
width :140px;
margin : 20px 20px 0 0;
background:#252525;
float: right;
}
.contentdate {
color : #ffffff;
margin-bottom : 6px;
font-size : 10px;
font-weight:normal;
}
.contentitem {
padding : 6px 12px;
border : 1px solid #464646;
background:#252525 url(dawntodark-img/contentbg.gif);
margin-bottom : 8px;
}
.contentitemside {
background:#252525;
}
.footer {
border : 1px solid #464646;
background : #252525 url(dawntodark-img/contentbg.gif);
margin : 0 auto;
text-align : center;
padding-top : 5px;
padding-bottom : 5px;
width : 760px;
font-size : 10px;
}
.footer a:link {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.footer a:visited {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.footer a:hover {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
.footer a:active {
color : #ffffff;
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="sitename"> Dawn To Dark </div>
</div>
<div class="main-nav">
<ul>
<li><a href="http://www.free-css.com/" class="link1">Home</a></li>
<li><a href="http://www.free-css.com/" class="link2">Gallery</a></li>
<li><a href="http://www.free-css.com/" class="link3">Forum</a></li>
<li><a href="http://www.free-css.com/" class="link4">About Us</a></li>
</ul>
</div>
<div class="navbar"> </div>
<div class="contentside">
<div class="contentitemside">
<div class="sideh1"> Other Links </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">Site 1</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">Another Site</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">Some More</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">Maybe Another</a> </div>
<div class="sideh1">Archive</div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">December 2006</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">January 2007</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">Febuary 2007</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">March 2007</a> </div>
<div class="sidelinks"><a href="http://www.free-css.com/" class="sidelinks">April 2007</a> </div>
</div>
</div>
<div class="content">
<h1>Lorem ipsum dolor sit amet.</h1>
<div class="contentdate"> May 6, 2007 By Tom Tom </div>
<div class="contentitem">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Etiam ipsum elit, semper et,
feugiat ut, imperdiet in, massa. Aliquam quam mi,
condimentum eu, semper vitae, placerat aliquam,
quam. Vivamus felis lacus, volutpat a, fringilla
nec, gravida id, enim. Proin dolor elit, suscipit
sit amet, elementum vitae, tincidunt non, mauris.
Nunc rutrum neque ac tortor. Mauris non justo at
erat cursus tincidunt. Duis fermentum ornare est.
Suspendisse eleifend est ut odio adipiscing
hendrerit. Etiam ac odio. Proin est elit, luctus
sed, molestie a, bibendum ac, lorem. Ut mattis,
urna et euismod dapibus, nulla metus tincidunt leo,
quis molestie metus eros nec felis. Curabitur
bibendum metus. Aenean sagittis turpis nec justo.
Praesent ligula ipsum, rhoncus ut, sagittis ac,
imperdiet vitae, risus. Nunc elementum justo ac
nulla.</p>
<p>Praesent est est, sagittis sit amet, fringilla
et, feugiat ut, pede. Nulla facilisi. Proin
imperdiet consectetuer est. Duis ac metus vel arcu
laoreet pellentesque. Duis sodales dolor id nulla.
Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Quisque
urna. Quisque ultricies turpis porttitor dui. Cum
sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nunc ac risus eu
lectus venenatis eleifend. Vestibulum fringilla
augue non massa pharetra euismod. Class aptent
taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Cras massa arcu,
dignissim vel, pellentesque in, tincidunt ut, mi.
Nam eget felis. Nunc orci orci, feugiat ac,
molestie a, imperdiet sit amet, arcu. Morbi dictum
turpis vel lacus. Donec augue tellus, imperdiet
vitae, ullamcorper ac, egestas eu, tortor.</p>
<div class="readmore"><a href="http://www.free-css.com/">Read More</a></div>
</div>
<h1>Nunc lorem nulla, accumsan quis.</h1>
<div class="contentdate"> May 6, 2007 By Tom Tom </div>
<div class="contentitem">
<p>Curabitur porttitor imperdiet quam. Cras
ultrices dolor interdum sem. Etiam accumsan, dui ut
dictum porta, massa ipsum fermentum eros, vitae
nonummy ipsum dui ut risus. Vivamus adipiscing
tellus sit amet pede. Praesent nec risus. Nam ac
pede. Integer adipiscing. Nulla eget arcu. Nam
eleifend ornare mi. Quisque molestie felis sed
nulla. Morbi ut felis eget tellus tempus auctor.
Phasellus non metus non nunc rutrum aliquet.
Curabitur risus. Quisque consequat euismod ligula.
Nullam venenatis euismod ante. Nullam augue.
Aliquam magna. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac
turpis egestas. Donec faucibus augue a eros. Cras
et lorem.</p>
<div class="readmore"><a href="http://www.free-css.com/">Read More</a></div>
</div>
<div class="footer">Copyright © 2007 | <a href="http://www.free-css.com/" class="footer">sitename.com</a> | Valid <a href="http://jigsaw.w3.org/css-validator/check/referer" class="footer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer" class="footer">XHTML 1.0 Strict</a> | Template design by Tom Tom </div>
</div>
</div>
</body>
</html>
Related examples in the same category