Flowerpremium
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flower</title>
<style type='text/css'>
body ,ul, h1, h2, p
{
padding:0 ;
margin:0;
font-family:Tahoma, Verdana, Helvetica, sans-serif;
}
div.spacer
{
clear: both; line-height:0; font-size:0;
}
ul{
list-style-type:none; font-size:0; line-height:0;
}
#div-wrapper
{
width:778px;
height:auto;
margin:0 auto 0 auto;
padding:0;
background-image:url(images/body-background.gif);
background-repeat:repeat-y;
}
/*---------------body-----------*/
#mainbody{
background:url(images/body_pic.jpg) no-repeat 0 0;
float:left;
}
/*------------left part srart-----*/
#leftpart{
width:231px; float:left; padding:0 0 0 33px; margin:518px 0 0 0;
}
#leftpart ul{
list-style-type:none; font-size:0; line-height:0; margin:0 43px 0 0;
}
#leftpart ul li{
background:url(images/bullets.gif) no-repeat 6px 11px; border-bottom:#DED5BC 1px solid; padding:0 0 1px 37px;
height:30px; display:block;
}
#leftpart ul li a{
text-decoration:none; color:#064065; background-color:#FFFFFF; line-height:30px; font-size:11px;
}
#leftpart ul li a:hover{
text-decoration:underline;
}
/*--------------------------------right part---------------*/
#rightpart
{
width:486px; position:relative; padding:149px 0 0 15px;
float:left;
}
#rightpart img.logo{
padding:0; margin:0; position:absolute; left:57px; top:20px; display:block; font-size:0; line-height:0;
}
#rightpart h1{
padding:0; margin:0 0 150px 81px; font-size:13px; font-weight:bold; line-height:15px; color:#FFFFFF;
background-color:inherit; display:block;
}
#rightpart h2.welcom{
border-bottom:#CBCBCB 1px solid; padding:0 0 3px 0; margin:0 0 9px 0; display:block;
font:bold 16px/22px Arial, Helvetica, sans-serif; color:#333333; background-color:inherit;
}
#rightpart h2.welcom span{
color:#FD4D00; background-color:inherit; font-size:22px; line-height:22px; padding:0; margin:0;
}
.body-text
{
color:#686867;
background-color:#E8E8E8;
font-size:11px;
}
#rightpart ul.gallery{
height:161px; margin:18px 0 0 0;
}
#rightpart ul.gallery li{
border:#C8C7C7 1px solid; background-color:#FFFFFF; color:#FF6C21; text-align:center; float:left; padding:11px 12px;
font:bold 16px/18px "Helvetica Neue",Arial, Helvetica, sans-serif; margin:0 3px 0 0;
}
#rightpart ul.gallery li.nopadding{
margin-right:0;
}
#rightpart ul.gallery li img{
font-size:0; line-height:0; display:block;
}
#rightpart ul.num{
height:18px; margin:11px 0 23px 0;
}
#rightpart ul.num li{
float:left; padding:0 1px; color:#064065; background-color:inherit; font:normal 12px/18px Arial, Helvetica, sans-serif;
height:18px;
}
#rightpart ul.num li.smallpad{
padding:0 9px;
}
#rightpart ul.num li.bigpad{
padding-right:20px;
}
#rightpart ul.num li a{
text-decoration:underline; color:#064065; background-color:inherit; line-height:18px;
}
#rightpart ul.num li a:hover{
text-decoration:none; background-color:inherit; color:#FD4D00;
}
#rightpart ul.cate{
width:162px; float:left; padding:0 0 26px 0;
}
#rightpart ul.cate li{
display:block; background:url(images/bullets-black.gif) no-repeat 0 7px; padding:0 0 0 27px;
}
#rightpart ul.cate li a{
color:#064065; background-color:inherit; text-decoration:underline; font-size:11px; line-height:21px;
}
#rightpart ul.cate li a:hover{
text-decoration:none;
}
#footer{
border-top:#CBCBCB 1px solid; padding:14px 0 0 205px; margin:42px 0 30px 0;
}
#footer ul{
height:18px;
}
#footer ul li{
font-size:11px; color:#064065; background-color:inherit; line-height:18px; padding:0 5px; float:left;
}
#footer ul li a{
text-decoration:none; color:#064065; background-color:inherit;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer p{
font-size:11px; text-align:right; color:#686867; background-color:inherit; padding:0 10px 0 0; line-height:16px;
}
#footer p a{
text-decoration:underline; color:#686867; background-color:inherit;
}
#footer p a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div id="div-wrapper">
<!--body part start -->
<div id="mainbody">
<!--left part srart -->
<div id="leftpart">
<ul>
<li><a href="#" title="Flowers">Flowers</a></li>
<li><a href="#" title="Flowers in Basket">Flowers in Basket</a></li>
<li><a href="#" title="Roses">Roses</a></li>
<li><a href="#" title="Tulips">Tulips</a></li>
<li><a href="#" title="Lilies">Lilies</a></li>
<li><a href="#" title="Daisies">Daisies</a></li>
<li><a href="#" title="Orchids">Orchids</a></li>
</ul>
</div>
<!--left part emd -->
<!--right part start -->
<div id="rightpart">
<a href="index.html">
<img src="images/logo.gif" alt="flower" border="0" class="logo" title="flower" /></a>
<h1>Company Slogan Goes Here</h1>
<h2 class="welcom"><span>Welcome</span> to our Online Flower Shop</h2>
<p class="body-text">This is <strong>Flower</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
<br /> This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
</p>
<ul class="gallery">
<li><a href="#"><img src="images/gallery-pic.gif" alt="" title="flower1" width="68" height="124" border="0"/></a>39.33$</li>
<li><a href="#"><img src="images/gallery-pic1.gif" alt="" title="flower2" width="98" height="124" border="0" /></a>39.33$</li>
<li><a href="#"><img src="images/gallery-pic2.gif" alt="" title="flower3" width="98" height="124" border="0" /></a>39.33$</li>
<li class="nopadding"><a href="#"><img src="images/gallery-pic3.gif" alt="" title="flower4" width="102" height="124" border="0" /></a>39.33$</li>
</ul>
<ul class="num">
<li><a href="#">Previous Page</a></li>
<li class="smallpad">|</li>
<li class="bigpad"><a href="#">Next Page</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li class="smallpad"><a href="#">...more</a></li>
</ul>
<h2 class="welcom"><span>Flower</span> Categories</h2>
<div>
<ul class="cate">
<li><a href="#">Birthdays </a></li>
<li><a href="#">Get Well</a></li>
<li><a href="#">Sympathy 2 Home</a></li>
</ul>
<ul class="cate">
<li><a href="#">Funeral Flowers </a></li>
<li><a href="#">Thinking of You </a></li>
<li><a href="#">Anniversary</a></li>
</ul>
<ul class="cate">
<li><a href="#">Thank You </a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Just Because </a></li>
</ul>
<br class="spacer" />
</div>
<p class="body-text"><strong>Suspendisse at diam in</strong> neque euismod scelerisque. Suspendisse vitae felis quis orci luctus commodo. Phasellus nonummy sem a ligula. Suspendisse eu purus.</p>
<div id="footer">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li>|</li>
<li><a href="#" title="About Us">About Us</a></li>
<li>|</li>
<li><a href="#" title="Shopping Cart">Shopping Cart</a></li>
<li>|</li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
<p>Copyright Information Goes Here</p>
<p><a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
</div>
<!--right part end -->
<div class="spacer"> </div>
</div>
<!--body part end -->
</div>
</body>
</html>
Related examples in the same category