hexahedron
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hexahedron</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Design by TheWebhub.com
http://www.thewebhub.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/
/** Common Styles */
body {
margin: 20px 0 0 0;
padding: 0;
background: #4A4A4A;
line-height: 1.6em;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
color: #FFFFFF;
}
ul {
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
}
a {
color: #0193DE;
}
a:hover {
text-decoration: none;
}
.bg1 {
background: #000000 url(hexahedron-images/image03.jpg) repeat-x left top;
}
.content {
padding: 10px 30px 20px 30px;
}
/** HEADER */
#header {
width: 960px;
height: 200px;
margin: 0px auto;
background: url(hexahedron-images/image01.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#header h1 {
text-align: right;
margin: 0px;
padding: 100px 70px 0px 0px;
text-transform: uppercase;
font-size: 42px;
color: #000000;
}
#header h2 {
margin: 0px;
padding: 3px 50px 0px 0px;
text-transform: uppercase;
text-align: right;
color: #000000;
}
/** MENU */
#menu {
width: 960px;
height: 50px;
margin: 0px auto;
background: url(hexahedron-images/image02.jpg) no-repeat left top;
}
#menu ul {
float: right;
margin: 0px 30px 0px 50px;
padding: 0px;
background: #142730;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 5px 20px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 11px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
/** CONTENT */
#content-wrap {
width: 960px;
margin: 0 auto;
background: #000000;
}
#content {
width: 890px;
margin: 0px auto;
padding-top: 20px;
}
#columnA {
float: left;
width: 630px;
background: #1A1A19;
}
#columnA h2 {
padding: 10px 0 10px 30px;
background: #444540;
border: 1px #929291 solid;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
}
#columnB {
float: right;
width: 230px;
}
#columnB h2 {
padding: 10px 0 10px 30px;
background: #444540;
border: 1px #929291 solid;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
}
#columnB strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #575757;
}
/** FOOTER */
#footer {
width: 960px;
height: 100px;
margin: 0px auto;
background: #000000;
border-top: 2px solid #4A4A4A;
font-size: 11px;
color: #FFFFFF;
}
#footer p {
margin: 0;
padding: 5px 10px;
}
#footer .copyright {
float: left;
margin: 30px 0px 0px 50px;
padding-left: 20px;
text-align: center;
}
#footer .links {
float: right;
margin: 30px 50px 0px 0px;
padding-right: 20px;
text-align: center;
}
#footer .css {
padding-left: 20px;
}
#footer .xhtml {
padding-left: 20px;
}
#footer a {
}
</style>
</head>
<body>
<div id="header">
<h1>hexahedron</h1>
<h2>Free CSS Template</h2>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content">
<div id="columnA">
<h2>Welcome to Sitename.com!</h2>
<div class="content bg1">
<p>ORANGEFLOWER is a free CSS web template coded with valid <strong>XHTML 1.0 Transitional</strong> and <strong>CSS 2.1 standards</strong> that uses pure CSS and no tables for layout. This design is released under the <span class="legal"><a target="_blank" href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines License</a></span>, which basically says that:</p>
<ul>
<li>» You <strong>CAN</strong> use, copy, distribute and transmit this template.</li>
<li>» You <strong>CAN</strong> modify this template however you want.</li>
</ul>
<p>In return, we only ask that you keep the attribution link in the footer intact or if you modify it, just add a link back to our site in any way you like.</p>
</div>
<h2>aDDITIONAL THANKS TO: </h2>
<div class="content bg1">
<p>TheWebHub.com would like to thank the following:</p>
<p>Jamie84 for the stock photo used in the header of this template. </p>
<ul>
<li>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.Sed vestibulum blandit nisl. Quisque elementum convallis purus.</li>
</ul>
</div>
</div>
<div id="columnB">
<h2>Recent Updates</h2>
<div class="content bg1">
<p><strong>Lorem Ipsum Dolor Amit </strong><br />
Etiam odio mi, suscipit et, rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p>
<p><strong>Lorem Ipsum Dolor Amit </strong><br />
Fusce mollis tristique sem. Sed interdum blandit. Curabitur malesuada. <a href="http://www.free-css.com/">More…</a></p>
<p><strong>Lorem Ipsum Dolor Amit </strong><br />
Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec in. <a href="http://www.free-css.com/">More…</a></p>
<p><strong>Lorem Ipsum Dolor Amit </strong><br />
Etiam odio mi, suscipit et, rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">
<p class="copyright">Copyright © 2006 Sitename.com. Template Designed by <a href="http://www.thewebhub.com/">TheWebHub.com</a></p>
<p class="links"><a target="_blank" href="http://validator.w3.org/check/referer" class="xhtml">Valid XHTML</a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="css">Valid CSS</a> </p>
</div>
</body>
</html>
Related examples in the same category