coffeeblossom
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Coffe Blossom - free template provided by http://www.getcsstemplates.com</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="author" content="http://www.getcsstemplates.com"/>
<style type='text/css'>
html {
background-color : #996633;
margin-top : 0;
margin-left : 0;
margin-bottom : 0;
margin-right : 0;
}
body {
background-image : url(coffeeblossom-images/bg.jpg);
padding-bottom : 20px;
padding-top : 5px;
padding-left : 0;
padding-right : 0;
margin : -30px 0 0 0;
}
.clear {
clear : both;
}
p {
font-family : sans-serif;
color : #652501;
font-size : 12px;
padding : 5px;
}
h1 {
font-family : "Curlz MT";
font-size : 1.7em;
padding-left : 20px;
padding-top : 60px;
color : #655801;
}
a {
color : #996633;
}
a:hover {
color : #655801;
}
#box {
width : 700px;
padding : 0;
margin : 0 auto;
top : 20px;
background-color : #652501;
}
#header {
margin : 0;
padding : 0;
background-image : url(coffeeblossom-images/header1.gif);
background-repeat : no-repeat;
width : 700px;
height : 100px;
}
#headtext {
top : 0;
left : 0;
padding-left : 60px;
position : absolute;
}
#headtext h2 {
font-family : "Curlz MT";
font-size : 1.2em;
color : #ffff99;
padding-left : 550px;
margin-right : 10px;
width : 200px;
background-image : url(coffeeblossom-images/coffee_beans.gif);
background-repeat : no-repeat;
background-position : 505px 0%;
}
#nav {
position : relative;
top : 0;
width : 694px;
height : 20px;
text-align : left;
padding : 0;
margin : 0;
border : 3px solid #652501;
background-color : #652501;
}
ul#navlist {
font-family : sans_serif;
text-transform : uppercase;
background-color : #ffff99;
text-align : justify;
width : 98%;
position : relative;
padding-left : 11px;
margin : 0;
font-size : 14px;
padding-top : 3px;
padding-bottom : 2px;
border-bottom : 2px solid #652501;
border-right : 3px solid #652501;
}
#navlist li {
display : inline;
list-style-type : none;
}
#navlist a {
padding-left : 10px;
padding-right : 10px;
}
#navlist a:link, #navlist a:visited {
color : #652501;
background-color : #ffff99;
text-decoration : none;
font-family : sans-serif;
font-size : 14px;
font-weight : bold;
}
#navlist a:hover {
color : #ffff99;
background-color : #652501;
text-decoration : none;
font-family : sans-serif;
font-size : 14px;
font-weight : bold;
border-bottom : 3px solid #652501;
border-top : 4px solid #996633;
}
#logo {
background-image : url(coffeeblossom-images/pic1-1.jpg);
width : 686px;
height : 130px;
border : 7px solid #652501;
background-repeat : no-repeat;
}
#boxes a:hover {
text-decoration : none;
}
#boxone, #boxtwo, #boxthree {
overflow : hidden;
background-image : url(coffeeblossom-images/coffee_beans.gif);
background-repeat : no-repeat;
background-position : top left;
background-color : #ffff99;
}
#boxone p, #boxtwo p, #boxthree p {
margin : 0;
padding : 2px 0 2px 0;
font-family : sans-serif;
color : #652501;
font-size : 0.8em;
}
#boxone h3, #boxtwo h3, #boxthree h3 {
margin : 0;
padding : 10px 0 2px 0;
font-size : 0.8em;
font-family : sans-serif;
color : #652501;
border-bottom : 1px solid #652501;
}
#boxone {
float : left;
width : 201px;
height : 170px;
padding : 5px 10px 0 10px;
border-left : 7px solid #652501;
border-bottom : 7px solid #652501;
border-top : 7px solid #652501;
margin-top : 5px;
margin-left : 0;
margin-bottom : 0;
margin-right : 0;
}
#boxtwo {
float : left;
width : 202px;
height : 170px;
padding : 5px 15px 0 15px;
border-left : 7px solid #652501;
border-right : 7px solid #652501;
border-bottom : 7px solid #652501;
border-top : 7px solid #652501;
background-color : #ffff99;
margin-top : 5px;
margin-left : 0;
margin-bottom : 0;
margin-right : 0;
}
#boxthree {
float : left;
width : 201px;
height : 172px;
padding : 3px 8px 0 10px;
border-right : 7px solid #652501;
border-bottom : 7px solid #652501;
border-bottom : 7px solid #652501;
border-top : 7px solid #652501;
background-color : #ffff99;
margin-top : 5px;
margin-left : 0;
margin-bottom : 0;
margin-right : 0;
}
#maintext {
background-color : #652501;
color : #ffff99;
margin-top : -23px;
}
#maintext p {
color : #ffff99;
text-align : justify;
padding-left : 7px;
padding-right : 7px;
}
#maintext h2 {
color : #ffff99;
padding-left : 7px;
font-family : "Curlz MT";
}
blockquote {
margin : 20px 0 20px 0;
padding : 10px 20px 0 20px;
border-top : 1px solid;
border-bottom : 1px solid;
}
blockquote p {
font-family : serif;
}
#footer {
background-color : #655801;
width : 700px;
height : 40px;
text-align : right;
padding-top : 10px;
}
#footer a:hover {
color : #ffff99;
}
</style>
</head>
<body>
<div id="box">
<div id="header">
<div id="headtext"><h2>Enjoy Your Coffee</h2></div>
<h1>Coffee Blossom</h1>
</div>
<div id="nav">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="logo"></div>
<div class="clear"></div>
<div id="boxes">
<div id="boxone">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. </p>
</div>
<div id="boxtwo">
<h3>Dolor Sit</h3>
<p>Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum.</p>
</div>
<div id="boxthree">
<h3>Amet</h3>
<p>Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
</div>
</div>
<div class="clear"></div>
<div id="maintext">
<h2>Lorem Ipsum</h2>
<p style="width120px;float:left;color:#ffff99;font-weight:bold;"><a href="coffeeblossom-images/pic2.jpg"><img src="coffeeblossom-images/pic2.jpg" alt="getcsstemplates.com" width="100" height="100" title="Get CSS templates" style="border:3px solid #ffff99; margin-right: 5px; margin-left: 7px;"/></a>
<br/> Coffee Beans</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
<h2>block quotes</h2>
<blockquote>
<p>
Put some blockquote text here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</blockquote>
<h2>Lorem Ipsum</h2>
<p style="width120px;float:left;color:#ffff99;font-weight:bold;"><a href="coffeeblossom-images/pic3.gif"><img src="coffeeblossom-images/pic3.gif" alt="getcsstemplates.com" width="100" height="100" title="Get CSS templates" style="border:3px solid #ffff99; margin-right: 5px; margin-left: 7px;"/></a>
<br/> Coffee Beans</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum.</p>
</div>
<div id="footer"><p>Copyright © 2006 <a href="index.html">YourSiteDotCom</a> <b>: :</b> Design by: <a href="http://www.getcsstemplates.com">Free CSS Templates</a> <b>: : </b> Web Hosting by: <a href='http://www.thinkhost.com?p=14bc3c6f&b=6f43286c' target="_blank"><b>ThinkHost</b><br><IMG SRC='https://secure.thinkhost.net/affiliates/apn/scripts/sb.php?p=14bc3c6f&b=6f43286c' WIDTH=1 HEIGHT=1 BORDER=0></a></p></div>
</div>
</body>
</html>
Related examples in the same category