silenceandharmony
<!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>Silence and Harmony</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider for www.csstemplateheaven.com */
* {margin: 0;
padding: 0;}
body {
background-color: #000000;
background-image: url(silenceandharmony-images/body_bg.jpg);
background-repeat: repeat-x;
font-size: 62.5%;
}
#container {
margin: auto;
width: 623px;
color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
}
#header {
margin: auto;
background-image: url(silenceandharmony-images/main_header.jpg);
height: 349px;
width: 623px;
}
#menu {
background-image: url(silenceandharmony-images/menu_bg.jpg);
height: 20px;
padding-top: 4px;
text-align: center;
}
#main_content {
background-image: url(silenceandharmony-images/content_bg.jpg);
height: 554px;
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
background-repeat: no-repeat;
}
#footer {
text-align: center;
clear: both;
border: 1px solid #666666;
padding: 20px;
background-color: #333333;
}
.float_left {float: left;
margin-right: 5px;
margin-bottom: 3px;}
p {padding-bottom: 25px;}
h1 {
font-size: 1.6em;
font-style: italic;
color: #FFFFFF;
margin-left: 250px;
padding-top: 15px;
}
h2 {
font-size: 1.6em;
border-bottom: 1px solid gray;
margin-bottom: 10px;
font-style: italic;
color: #FFFFFF;
}
a:link {color: #FFFFFF;
text-decoration: none;} /* unvisited link */
a:visited {color: #FFFFFF;
text-decoration: none;} /* visited link */
a:hover {color: #E7CD54;
text-decoration: none;} /* mouse over link */
a:active {color: #FFFFFF;
text-decoration: none;} /* selected link */
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Silence and Harmony</h1>
</div>
<div id="menu">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div id="main_content">
<h2>About this template </h2>
<p><img src="silenceandharmony-images/demo_image.jpg" alt="Template" width="80" height="80" class="float_left" /> I kindly ask you to not remove the footer link if you have a free version of this template. The thumbnail to the left is only a demo image. Tested in the latest versions of FF, IE and Opera with perfect results. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor. Cras luctus dignissim metus. Nullam tristique. Suspendisse at risus. Nullam quam arcu, rutrum eu, hendrerit quis, placerat eget, nisl. Suspendisse id metus vitae justo convallis ullamcorper. Suspendisse in diam. Etiam ligula. Donec mattis tempus tellus. Morbi ut ipsum. Fusce luctus. Praesent mauris justo, ultricies non, tincidunt ac, pretium quis, pede. Nam porta molestie magna. Phasellus elementum aliquet neque. Vivamus sem sem, iaculis eget, convallis eu, vulputate vel, leo. Phasellus venenatis placerat libero.</p>
<h2>Heading 2 </h2>
<p>Vestibulum aliquet condimentum magna. Proin eget magna vitae dui semper tempor. Quisque vehicula, nisl ac vehicula malesuada, ipsum lectus laoreet odio, at pulvinar nibh enim a velit. Nunc rhoncus sodales urna. Cras ante tellus, vehicula ut, varius non, congue vitae, metus. Sed nulla lectus, cursus nec, mollis nec, convallis a, eros. Nam nec nisl sagittis urna faucibus ullamcorper. Nulla facilisi. Maecenas quis tellus. Proin vestibulum mollis lectus. Nullam blandit. Sed mattis nibh quis odio tincidunt tincidunt. Phasellus vel erat ut quam lobortis ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus interdum lorem ut justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ut sem ac nisi sollicitudin faucibus. Donec a dolor.</p>
<h2>Another heading </h2>
<p>Fusce id enim non nisl vulputate eleifend. Aenean dui. Pellentesque rhoncus sagittis risus. Ut vulputate nulla. Nunc rutrum, massa vitae accumsan semper, est velit accumsan orci, sed ullamcorper elit urna vitae massa. Proin nulla sem, mollis sed, bibendum ornare, adipiscing posuere, justo. Donec luctus metus sed leo. Ut in sem. Nam suscipit, erat id molestie ultricies, velit lacus consequat neque, sit amet aliquam ipsum sem a nibh. Aliquam neque arcu, dictum ut, consectetuer id, adipiscing et, velit. Sed molestie. Pellentesque in diam.</p>
<p>Ut vestibulum blandit dui. Quisque sed nunc eu elit congue iaculis. Fusce porttitor, dolor in rutrum feugiat, felis justo ultrices elit, at cursus quam nulla et lectus. Vestibulum nunc. Vestibulum magna. In hac habitasse platea dictumst. Donec cursus leo. Quisque arcu massa, suscipit a, suscipit nec, venenatis eget, dui. Mauris metus. Suspendisse quis metus quis leo mollis laoreet. Ut lorem turpis, auctor nec, tempus sed, elementum quis, sapien. </p>
<div id="footer">Created by Dieter Schneider 2006 | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category