madeofcheese
<!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>Made of Cheese</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF url(madeofcheese-images/img1.gif) repeat-x;
font-family: Georgia, "Times New Roman", Times, serif;
color: #3D515C;
}
img {
border: none;
}
h1, h2, h3 {
margin: 0;
padding: 0;
letter-spacing: -1px;
font-weight: normal;
font-style: italic;
color: #8F3844;
}
p, ul, ol {
margin-top: 0;
padding-top: 0;
line-height: 150%;
}
ul, ol {
color: #8F3844;
}
ul {
margin-left: 0;
padding-left: 0;
list-style-type: square;
list-style-position: inside;
}
ol {
margin-left: 0;
padding-left: 1em;
}
a:link, a:active {
text-decoration: none;
color: #8F3844;
}
a:visited, a:hover {
text-decoration: underline;
color: #3D515C;
}
/* Header */
#header {
height: 116px;
margin-bottom: 20px;
padding-top: 20px;
background: url(madeofcheese-images/img2.gif) no-repeat center bottom;
}
#header * {
text-align: center;
text-decoration: none;
color: #8F3844;
}
#header h1 {
letter-spacing: -2px;
font-size: 48px;
}
#header h2 {
letter-spacing: normal;
font-size: 12px;
}
/* Content */
#content {
width: 700px;
margin: 0 auto;
}
#colOne {
float: right;
width: 240px;
}
#colTwo {
float: left;
width: 440px;
}
/* Footer */
#footer {
clear: both;
padding: 20px;
background: #F5EDEE url(madeofcheese-images/img1.gif) repeat-x 0px -120px;
}
#footer p {
margin: 0;
text-align: center;
font-size: 11px;
}
/* Boxed */
.boxed {
}
.boxed .title {
margin: 0;
padding: 0;
}
.boxed .content {
padding: 20px;
background: url(madeofcheese-images/img3.gif) repeat-x;
}
.boxed .image {
float: left;
margin: 5px 20px 0 0;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Made of Cheese</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="content">
<div id="colOne">
<div id="menu" class="boxed">
<h2 class="title">Main Menu</h2>
<div class="content">
<ul>
<li><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Our Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Our Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Us</a></li>
</ul>
</div>
</div>
<div class="boxed">
<h3 class="title">Sample Ordered List</h3>
<div class="content">
<ol>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida</a></li>
<li><a href="http://www.free-css.com/">Vivamus sagittis bibenm</a></li>
<li><a href="http://www.free-css.com/">Nullam et orci in amet</a></li>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida</a></li>
<li><a href="http://www.free-css.com/">Curabitur malesuada</a></li>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida</a></li>
<li><a href="http://www.free-css.com/">Vivamus sagittis bibenm</a></li>
<li><a href="http://www.free-css.com/">Nullam et orci in amet</a></li>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida</a></li>
<li><a href="http://www.free-css.com/">Curabitur malesuada</a></li>
</ol>
</div>
</div>
<div class="boxed">
<h3 class="title">Featured Photo</h3>
<div class="content">
<p><a href="http://www.free-css.com/"><img src="madeofcheese-images/img4.jpg" alt="" width="200" height="150" /></a></p>
<p>Roquefort cheese showing mold on biscuit. <a href="http://www.free-css.com/">More…</a></p>
</div>
</div>
</div>
<div id="colTwo" class="boxed">
<h2 class="title">Welcome to Made of Cheese!</h2>
<div class="content"> <img src="madeofcheese-images/img5.jpg" alt="" width="150" height="113" class="image" />
<p><em><strong>Made of Cheese</strong></em> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. Photos are from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
<p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
<ul>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
<li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
<li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
<li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
<li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
</ul>
<h3>Lorem Ipsum Dolore </h3>
<p>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.</p>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2006 Made of Cheese. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>
Related examples in the same category