fashion-brand
<!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>Fashion Brand</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#2c2c2c url(fashion-brand-images/b_body.jpg) 0 0 repeat-x; 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:#a18d21; text-decoration:none;}
p a:hover{ color:#a18d21; text-decoration:underline;}
.headline{font:10px/14px Tahoma, Geneva, sans-serif; color:#a18d21; font-weight:bold}
#container{width:714px; position:relative; margin:0 auto;}
/* TOP */
#topPan{width:714px; height:99px; position:relative}
img#btn_sale{position:absolute; top:10px; left:590px; }
img#logo{position:absolute; top:31px; left:0; }
#topPan ul.menu{position:absolute; top:60px; left:308px; width:405px}
#topPan ul.menu li{height:17px; margin-right:12px; float:left}
#topPan ul.menu li a{height:17px; display:block; text-indent:-20000px; }
#topPan ul.menu li a:hover{height:17px;}
#topPan ul.menu li.btn_1 a{width:39px; background:url(fashion-brand-images/btn_1.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_1 a:hover{width:39px; background:url(fashion-brand-images/btn_1_over.gif) 0 0 no-repeat;}
#topPan ul.menu li.btn_2 a{width:45px; background:url(fashion-brand-images/btn_2.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_2 a:hover{width:45px; background:url(fashion-brand-images/btn_2_over.gif) 0 0 no-repeat;}
#topPan ul.menu li.btn_3 a{width:82px; background:url(fashion-brand-images/btn_3.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_3 a:hover{width:82px; background:url(fashion-brand-images/btn_3_over.gif) 0 0 no-repeat;}
#topPan ul.menu li.btn_4 a{width:41px; background:url(fashion-brand-images/btn_4.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_4 a:hover{width:41px; background:url(fashion-brand-images/btn_4_over.gif) 0 0 no-repeat;}
#topPan ul.menu li.btn_5 {margin-right:0}
#topPan ul.menu li.btn_5 a{width:59px; background:url(fashion-brand-images/btn_5.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_5 a:hover{width:59px; background:url(fashion-brand-images/btn_5_over.gif) 0 0 no-repeat;}
#topPan ul.menu li.line{width:6px; background:url(fashion-brand-images/bulletm.gif) 0 6px no-repeat}
/* HEADER */
#header{width:714px; height:261px; position:relative; background:url(fashion-brand-images/b_header.gif) 0 0 no-repeat}
#header img#summer{position:absolute; top:69px; left:19px; }
#header img#btn_collection{position:absolute; top:137px; left:19px; }
/* CONTENT */
#content{width:714px; position:relative; background:#FFF}
#leftPan{width:200px; float:left; margin:15px 24px 0 11px; display:inline}
#middlePan{width:231px; float:left; margin:15px 27px 0 0; }
#rightPan{width:201px; float:left; margin:15px 0 0 0;}
#welcome h2{height:48px; position:relative; background:url(fashion-brand-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:7px}
#welcome p{margin-left:15px;}
#welcome p.headline{margin-bottom:15px}
#featured h2{height:35px; position:relative; background:url(fashion-brand-images/h_items.gif) 0 0 no-repeat; margin-bottom:12px}
.featItem{margin-bottom:8px; position:relative; width:231px}
.featItem img{float:left; margin-right:10px;}
.featItem p{float:left; width:166px}
#trends h2{height:35px; position:relative; background:url(fashion-brand-images/h_trends.gif) 0 0 no-repeat; margin-bottom:10px}
#trends img{margin-bottom:12px}
#trends p{margin-left:3px}
#trends p.headline{margin-bottom:15px}
.clear#end{height:20px}
/* FOOTER */
#footer{height:44px; clear:both; width:714px;}
#footer p{padding: 9px 0 0 0; font:10px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:10px/16px Tahoma, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#fff}
</style>
</head>
<body>
<div id="container">
<div id="topPan"> <a href="#"><img src="fashion-brand-images/btn_sale.gif" alt="" name="btn_sale" width="115" height="17" border="0" id="btn_sale" /></a> <img src="fashion-brand-images/logo.gif" width="213" height="68" alt="" id="logo" />
<ul class="menu">
<li class="btn_1"><a href="#">home</a></li>
<li class="line"></li>
<li class="btn_2"><a href="#">about</a></li>
<li class="line"></li>
<li class="btn_3"><a href="#">collections</a></li>
<li class="line"></li>
<li class="btn_4"><a href="#">gifts</a></li>
<li class="line"></li>
<li class="btn_5"><a href="#">contacts</a></li>
</ul>
</div>
<div id="header"> <img src="fashion-brand-images/summer.jpg" width="309" height="68" alt="" id="summer" /> <a href="#"><img src="fashion-brand-images/btn_collection.jpg" alt="" width="194" height="26" border="0" id="btn_collection" /></a> </div>
<div id="content">
<div id="leftPan">
<div id="welcome">
<h2></h2>
<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 <br />
<br />
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 Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
</div>
</div>
<div id="middlePan">
<div id="featured">
<h2></h2>
<div class="featItem"> <img src="fashion-brand-images/items.jpg" width="53" height="53" alt="" />
<p><span class="headline">Nam eu nulla. Donec lobortis </span><br />
In volutpat sodales Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
<div class="clear"></div>
</div>
<div class="featItem"> <img src="fashion-brand-images/items-09.jpg" width="53" height="53" alt="" />
<p><span class="headline">Nam eu nulla. Donec lobortis </span><br />
In volutpat sodales Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
<div class="clear"></div>
</div>
<div class="featItem"> <img src="fashion-brand-images/items-10.jpg" width="53" height="53" alt="" />
<p><span class="headline">Nam eu nulla. Donec lobortis </span><br />
In volutpat sodales Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
<div class="clear"></div>
</div>
<div class="featItem"> <img src="fashion-brand-images/items-11.jpg" width="53" height="53" alt="" />
<p><span class="headline">Nam eu nulla. Donec lobortis </span><br />
In volutpat sodales Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
<div class="clear"></div>
</div>
</div>
</div>
<div id="rightPan">
<div id="trends">
<h2></h2>
<img src="fashion-brand-images/img_trends.jpg" width="201" height="73" alt="" />
<p class="headline">Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. </p>
<p>urna. Nunc laoreet lacinia nunc. In 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 Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. | <a href="#">more</a></p>
</div>
</div>
<div class="clear" id="end"></div>
</div>
<div id="footer">
<p><a href="#">HOME PAGE</a> | <a href="#">ABOUT US</a> | <a href="#">COLLECTIONS</a> | <a href="#">GIFTS</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
Copyright © Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category