orangeflower
<!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>Orangeflower</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: #EEEDED;
line-height: 1.6em;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757575;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
color: #F06C00;
}
ul {
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
}
a {
color: #F06C00;
}
a:hover {
text-decoration: none;
}
/** HEADER */
#header {
width: 840px;
height: 230px;
margin: 0px auto;
background: url(orangeflower-images/image01.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#header h1 {
float: left;
margin: 0px;
padding: 207px 0px 0px 50px;
text-transform: uppercase;
font-size: 38px;
color: #FFFFFF;
}
#header h2 {
float: right;
margin: 0px;
padding: 213px 40px 0px 0px;
text-transform: uppercase;
color: #FFFFFF;
}
/** MENU */
#menu {
width: 840px;
height: 50px;
margin: 0px auto;
background: url(orangeflower-images/image02.jpg) no-repeat left top;
}
#menu ul {
margin: 0px 0px 0px 50px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
background: #E86800;
margin-top: 10px;
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: 840px;
margin: 0 auto;
background: url(orangeflower-images/image03.jpg) repeat-y left top;
}
#content {
width: 740px;
margin: 0px auto;
padding-top: 20px;
}
#columnA {
float: right;
width: 500px;
}
#columnA h2 {
border-bottom: 1px #FFA66B dashed;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
}
#columnB {
float: left;
width: 200px;
}
#columnB h2 {
border-bottom: 1px #FFA66B dashed;
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: 840px;
height: 70px;
margin: 0px auto;
background: url(orangeflower-images/image04.jpg) no-repeat left top;
font-size: 11px;
color: #000000;
}
#footer p {
margin: 0;
padding: 5px 10px;
}
#footer .copyright {
float: left;
margin: 50px 0px 0px 30px;
padding-left: 20px;
text-align: center;
}
#footer .links {
float: right;
margin: 50px 30px 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>orangeflower</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>
<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>
<h2>aDDITIONAL THANKS TO: </h2>
<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 id="columnB">
<h2>Recent Updates</h2>
<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 imperdiet eros 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 nulla est pellentesque 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 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