floral-design : Flower « Templates « HTML / CSS

floral-design
    

<!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>Floral Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#fff; color:#616161; font:10px/14px Tahoma, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px; height:0}

p a{font:10px/14px Tahoma, sans-serif; color:#868e36; text-decoration:underline;}
p a:hover{ color:#868e36; text-decoration:none;}

.headline{font:10px/14px Tahoma, Geneva, sans-serif; color:#868e36; font-weight:bold}
.headline2{font:10px/14px Tahoma, Geneva, sans-serif; color:#9d1263; font-weight:bold}

#container{width:685px; position:relative; margin:0 auto;}

/* top */

#topLine{width:685px; height:14px; background:#e9e9e9;}

/* logo*/

#logoPan{width:685px; height:92px; position:relative}

#logoPan img#logo{position:absolute; top:0; left:19px}
#logoPan img#slogan{position:absolute; top:25px; left:376px}

/* menu */

#menuPan{width:685px; height:38px; background:#f8dae8; position:relative;}

#menuPan ul.menu{position:absolute; top:12px; left:33px; width:640px}
#menuPan ul.menu li{height:16px; margin-right:28px; float:left}
#menuPan ul.menu li a{height:16px; display:block; text-indent:-20000px; }
#menuPan ul.menu li a:hover{height:16px;}

#menuPan ul.menu li.btn_1 a{width:78px; background:url(floral-design-images/btn_1.gif) 0 0 no-repeat; }
#menuPan ul.menu li.btn_1 a:hover{width:78px; background:url(floral-design-images/btn_1_over.gif) 0 0 no-repeat;}

#menuPan ul.menu li.btn_2 a{width:68px; background:url(floral-design-images/btn_2.gif) 0 0 no-repeat; }
#menuPan ul.menu li.btn_2 a:hover{width:68px; background:url(floral-design-images/btn_2_over.gif) 0 0 no-repeat;}

#menuPan ul.menu li.btn_3 a{width:75px; background:url(floral-design-images/btn_3.gif) 0 0 no-repeat; }
#menuPan ul.menu li.btn_3 a:hover{width:75px; background:url(floral-design-images/btn_3_over.gif) 0 0 no-repeat;}

#menuPan ul.menu li.btn_4 a{width:64px; background:url(floral-design-images/btn_4.gif) 0 0 no-repeat; }
#menuPan ul.menu li.btn_4 a:hover{width:64px; background:url(floral-design-images/btn_4_over.gif) 0 0 no-repeat;}

#menuPan ul.menu li.btn_5{margin-right:0}
#menuPan ul.menu li.btn_5 a{width:71px; background:url(floral-design-images/btn_5.gif) 0 0 no-repeat; }
#menuPan ul.menu li.btn_5 a:hover{width:71px; background:url(floral-design-images/btn_5_over.gif) 0 0 no-repeat;}

#menuPan ul.menu li.line{width:9px; background:url(floral-design-images/bullet_m.gif) 0 4px no-repeat}

/* HEADER */

#header{width:685px; height:238px; background: url(floral-design-images/b_header.jpg) 0 0 no-repeat; position:relative;}

#header img#slogan2{position:absolute; top:76px; left:19px}

/* content */

#content{width:685px; position:relative; background:#FFF}

#leftPan{width:179px; float:left; margin:26px 39px 0 19px; display:inline}
#rightPan{width:436px; float:left; margin:17px 0 0 0;}

#welcome h2{height:40px; position:relative; background:url(floral-design-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:8px}
#welcome img{margin:0 0 16px 4px }
#welcome p{margin-left:4px; margin-right:12px}
#welcome p.headline{margin-bottom:15px}

#featured h2{height:38px; position:relative; background:url(floral-design-images/h_prod.gif) 0 0 no-repeat; margin-bottom:6px}
#featured p.headline{margin-bottom:5px}
.featItem{width:116px; float:left; margin-right:44px}
.featItem#i03{margin-right:0}
.featItem img{margin-bottom:15px}

.clear#end{height:20px}

/* footer */

#footer{height:49px; clear:both; width:775px; background:#e8f09c; margin: 0 auto}
#footer p{padding: 10px 0 0 0; font:10px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#000;}
#footer p a{font:10px/16px Tahoma, sans-serif; font-weight:normal; color:#000; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#000}


</style>


</head>
<body>
<div id="container">
  <div id="topLine"></div>
  <div id="logoPan"> <img src="floral-design-images/logo.gif" width="192" height="92" alt="" id="logo" /> <img src="floral-design-images/slogan.gif" width="297" height="46" alt="" id="slogan" /> </div>
  <div id="menuPan">
    <ul class="menu">
      <li class="btn_1"><a href="#">home page</a></li>
      <li class="line"></li>
      <li class="btn_2"><a href="#">about us</a></li>
      <li class="line"></li>
      <li class="btn_3"><a href="#">bouquets</a></li>
      <li class="line"></li>
      <li class="btn_4"><a href="#">specials</a></li>
      <li class="line"></li>
      <li class="btn_5"><a href="#">contacts</a></li>
    </ul>
  </div>
  <div id="header"> <img src="floral-design-images/slogan2.gif" width="192" height="70" alt="" id="slogan2" /></div>
  <div id="content">
    <div id="leftPan">
      <div id="welcome">
        <h2></h2>
        <img src="floral-design-images/img_welcome.jpg" width="172" height="56" alt="" />
        <p class="headline">Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. </p>
        <p>Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Sed Nunc laoreet lacinia nunc. In volutpat sodales </p>
      </div>
    </div>
    <div id="rightPan">
      <div id="featured">
        <h2></h2>
        <p class="headline">Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc.Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. </p>
        <div class="featItem" id="i01"> <img src="floral-design-images/img_prod.jpg" width="116" height="125" alt="" />
          <p><span class="headline2">Morbi volutpat leo in</span><br />
            <a href="#">Nam eu nulla. Donec</a><br />
            lobortis purus vel urna. Nunc laoreet lacinia nunc</p>
        </div>
        <div class="featItem" id="i02"> <img src="floral-design-images/img_prod-13.jpg" width="116" height="125" alt="" />
          <p><span class="headline2">Morbi volutpat leo in</span><br />
            <a href="#">Nam eu nulla. Donec</a><br />
            lobortis purus vel urna. Nunc laoreet lacinia nunc</p>
        </div>
        <div class="featItem" id="i03"> <img src="floral-design-images/img_prod-14.jpg" width="116" height="125" alt="" />
          <p><span class="headline2">Morbi volutpat leo in</span><br />
            <a href="#">Nam eu nulla. Donec</a><br />
            lobortis purus vel urna. Nunc laoreet lacinia nunc</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="clear" id="end"></div>
  </div>
</div>
<div id="footer">
  <p><a href="#">HOME PAGE</a> | <a href="#">ABOUT US</a> | <a href="#">BOUTQUETS</a> | <a href="#">SPECIALS</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
    Copyright &copy; Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_flower
2.	metamorph_flowergallery
3.	metamorph_superflower
4.	flower 2
5.	flower-shop
6.	flowerbuds
7.	flowerily
8.	flowermum
9.	Flowerpremium
10.	flowery
11.	metamorph_floral
12.	metamorph_florist
13.	blossom
14.	blossoms
15.	metamorph_blossom
16.	metamorph_roseanddrops
17.	floral
18.	floral_impact
19.	flourish
20.	ftdflowered
21.	rose
22.	rosekist
23.	rs-garden
24.	safflower
25.	Tulips
26.	lily
27.	lilypads