coffeecup
<!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" lang="en" xml:lang="en">
<head>
<title>Coffee Cup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* MLP Design (http://www.mlpDesign.tk) */
body
{ background:url(coffeecup-images/logo.gif) 0 10px no-repeat #fff;
font-family: Verdana,sans-serif;
color: #666;
font-size:10pt;}
h1
{ font-size:18pt;
font-weight:bold;
background:inherit;
color:#c63;
letter-spacing:5px;
padding-top:10px;}
h2
{ font-size:9pt;
font-weight:bold;}
h3
{ font-size:11pt;
font-weight:bold;}
strong
{ background:inherit;
color:#c63;}
a:link, a:visited, a:active
{ background-color: inherit; text-decoration: none; color:#666;}
a:hover
{ background-color: inherit; text-decoration: underline; color:#c63;}
ul
{ list-style:none;
margin-left:10px;
padding:1px;}
li
{ padding:0 0 8px 15px;
background: url(coffeecup-images/arw.gif) 0 0 no-repeat;}
#header
{ width:750px;
height:200px;
margin:auto;
}
#main
{ width:750px;
margin:auto;
clear:both; }
#content
{ width:550px;
float:right;
padding:0 10px;
background-color:#fff;
color:inherit;
text-align:justify;}
#sidebar
{ width:160px;
height:auto;
float:left;
padding:5px;
font-size:80%;
text-align:justify;}
#sidebar a
{ display: block;
padding:10px 5px;
border-bottom:#c63 1px dashed;
text-align:center;}
#sidebar a:hover
{ background-color: #fec;
color:#963;
text-decoration: none;}
#footer
{ width:750px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:10px;
font-size:80%;
border-top:#c63 1px solid;
text-align:center;
clear:both;}
.header
{ float:right;
text-align:right;
padding:30px 15px 0 0;}
.footer
{ height:1px;
clear:both; }
.topside
{ padding-bottom:10px;
font-size:8pt;
font-weight:bold;
border-bottom:#c63 2px solid;
text-align:center;}
.inset
{ float:right;
width:200px;
padding:10px;
border:#c63 1px solid;
margin:5px 0 0 5px;
background:#fec;
color:inherit;
font-size:85%;}
</style>
</head>
<body>
<div id="header">
<div class="header">
<h2><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/" title="our products">our products</a> | <a href="http://www.free-css.com/">contact us</a></h2>
<h1>THE COFFEE CUP</h1>
</div>
</div>
<div id="main">
<div id="sidebar">
<div class="topside"><strong>Sidebar</strong> One</div>
<a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Link 2</a> <a href="http://www.free-css.com/">Link 3</a> <a href="http://www.free-css.com/">Link 4</a> <a href="http://www.free-css.com/">Link 5</a>
<p><br />
</p>
<div class="topside"><strong>Sidebar</strong> Two</div>
<p>Curabitur ut erat nec augue suscipit placerat. Etiam eu ipsum. Quisque commodo tempor nisi. Duis sed sem ac nulla tempor tincidunt.
Fusce a purus id mi condimentum nonummy. </p>
<p><br />
</p>
<div class="topside"><strong>Sidebar</strong> Three</div>
<ul>
<li>Unordered list 1</li>
<li>Unordered list 2</li>
<li>Unordered list 3</li>
</ul>
<p><br />
</p>
</div>
<div id="content">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at velit ac neque scelerisque blandit. Aenean malesuada.
Suspendisse vestibulum orci. Quisque posuere vehicula justo. Integer sollicitudin ligula vitae tellus. Maecenas id ante. Etiam nec ante.
Morbi ultrices magna et neque. In hac habitasse platea dictumst. Quisque vehicula ultricies neque. Aenean volutpat varius lectus.
Morbi tempor justo at ante. Ut ac pede. <span class="inset"><strong>Block quote with a twist!</strong><br />
<br />
Please retain the "Template Design by MLP
Design" tag and link in the footer when you use this template.</span> Donec metus libero, aliquet id, dictum at, pharetra vel, odio. Maecenas ut erat. Nullam urna ante, laoreet at, ornare vel, pulvinar ut, velit.
In ullamcorper blandit nisl. Integer tempus rutrum mi. Donec nec risus. Duis accumsan. Vivamus id risus ut metus interdum tempus.
Curabitur orci nulla, vulputate vitae, vestibulum at, aliquam id, risus. Sed placerat blandit sem. Cras lacinia, magna non facilisis congue,
turpis massa vestibulum nibh, at tempor elit leo quis arcu. Duis ligula nulla, hendrerit eget, dapibus et, placerat vitae, urna. Maecenas
interdum, augue ac pellentesque laoreet, lorem dui tempor ipsum, quis porta eros enim et erat. Nam a arcu sit amet dui iaculis tincidunt.
Pellentesque vulputate nisi. Sed ligula velit, eleifend non, dapibus vitae, pretium eu, metus. </p>
<h3>Another Header</h3>
<p>Cras lobortis dolor ut purus. Phasellus nunc elit, laoreet vitae, accumsan quis, lobortis venenatis, elit. Nam lobortis sapien. Vivamus hendrerit. Quisque non felis ultricies odio venenatis vestibulum.
Sed interdum ultricies purus. Nam id dui id felis nonummy tempus. Donec a magna. Etiam in lectus quis dui blandit mattis. Duis ligula nulla, hendrerit eget, dapibus et, placerat vitae, urna. Maecenas
interdum, augue ac pellentesque laoreet, lorem dui tempor ipsum, quis porta eros enim et erat.</p>
<p></p>
</div>
<div class="footer"></div>
</div>
<div id="footer">
<p>© Copyright 2006 Your Company Name. All Rights Reserved. <br />
Template Design by <a href="http://www.mlpDesign.net">MLP Design</a>. XHTML 1.0 Strict & CSS Valid.</p>
</div>
</body>
</html>
Related examples in the same category