Dark background, white links
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free Website Template 21</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #191e22;
color: #cbcbcb;
}
a {
color:#9e491a;
font-size:12px;
text-decoration:underline;
}
a:hover {
color:#9e491a;
font-size:12px;
text-decoration:none;
}
.logo {
color:#ffffff;
font-size:48px;
padding:0 0 0 20px;
font-style:italic;
}
.logo span {
color:#9e491a;
font-size:48px;
font-style:italic;
}
.author {
padding:0 0 20px 20px;
color:#ffffff;
}
.author a {
color:#ffffff;
}
h1 {
color:#9e491a;
font-size:18px;
font-weight:bold;
padding:0 0 10px 0;
}
.mainLogo {
float:left;
}
#container {
width: 800px;
margin: 0 auto;
}
.copyright {
padding:20px;
margin:20px 0;
background:#2f353b;
}
.someBlock {
width:345px;
float:left;
padding:30px 20px;
}
.blockContainer {
float:left;
width:200px;
}
.bc1 {
font-weight:bold;
color:#a64c19;
}
.bc2 {
font-weight:bold;
color:#9f1e34;
}
.bc3 {
font-weight:bold;
color:#8c7f7a;
}
.bc4 {
font-weight:bold;
color:#84322f;
}
#footer {
color:#cbcbcb;
text-align:center;
height:76px;
background:url(21-images/footerBackground.jpg) repeat-x left top;
margin-top:20px;
}
#footer p {
padding:20px 0 0 0;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*MAIN MENU*/
#navlist {
padding: 17px 0 0 0;
border-bottom: 1px solid #000;
text-align:right;
float:right;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
float: left;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9e491a;
font-size:24px;
font-style:italic;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 2px;
background: transparent;
color: #ffffff;
}
#navlist a:hover {
color: #ffffff;
}
</style>
</head>
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="mainLogo">
<div class="logo">face <span>booker</span></div>
<div class="author">design by <a href="http://www.flash-design-templates.net">Flash-Design-Templates.net</a></div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
<!-- end #header -->
<div>
<div class="blockContainer bc1">
<img src="21-images/pic1.jpg" alt="" /><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="blockContainer bc2">
<img src="21-images/pic2.jpg" alt="" /><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="blockContainer bc3">
<img src="21-images/pic3.jpg" alt="" /><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="blockContainer bc4">
<img src="21-images/pic4.jpg" alt="" /><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
<div class="clearfloat"></div>
<div class="copyright">
<h1>All website template is released under a Creative Commons Avttribution 2.5 License</h1>
<p>
We request you retain the full copyright notice below including the link to <a href="http://www.Flash-Design-Templates.net">www.Flash-Design-Templates.net</a>. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Website Templates line, with Website Templates linked to www.Flash-Design-Templates.net. If you refuse to include even this then support may be affected.<br /><br />
<b>You are allowed to use this design only if you agree to the following conditions:</b><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.<br /><br />
For support please visit <a href="http://Flash-Design-Templates.net/contact.php">http://Flash-Design-Templates.net/contact.php</a>
</p>
</div>
<div class="someBlock">
<p>
<b>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</b><br /><br />
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br /><br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadips
</p>
</div>
<div class="someBlock">
<p>
<b>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</b><br /><br />
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br /><br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadips
</p>
</div>
<div class="clearfloat"></div>
</div>
<!-- end #container -->
<!-- begin #footer -->
<div id="footer">
<p>
Terms of Use |
<a title="This page validates as XHTML 1.0 Strict" href="http://validator.w3.org/check/referer" class="footerLink"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> |
<a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer" class="footerLink"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Copyright © facebooker. Designed by <a href="http://www.Flash-Design-Templates.net" title="Flash Design Templates">Flash Design Templates</a>
</p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category