fashionhut
<!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" xml:lang="en" lang="en">
<head>
<title>Fashion Hut</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type='text/css'>
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #504634;
text-align: center;
font: 11px verdana, arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
/** layout **/
#wrapper {
text-align: left;
margin: 37px auto;
width: 672px;
background: #ffffff;
position: relative;
}
#header {
background: #D9D1BC url(fashionhut-images/header.jpg) no-repeat;
height: 266px;
}
#logo {
position: absolute;
top: 12px;
left: 300px;
width: 170px;
color: #52616E;
}
#logo h1 {
font: bold 24px "arial narrow", arial, sans-serif;
}
#logo p {
margin: 0;
font-weight: bold;
}
#cart {
position: absolute;
top: 10px;
left: 454px;
width: 208px;
background: #4B5360;
width: 209px;
}
#cart-top { background: url(fashionhut-images/cart_top.gif) no-repeat; }
#cart-bot { background: bottom left url(fashionhut-images/cart_bot.gif) no-repeat; }
#cart-cart { background: 9px 11px url(fashionhut-images/cart.gif) no-repeat; }
#cart-cart {
padding: 8px 8px 8px 60px;
color: white;
}
#cart p {
margin: 0;
}
#cart .orange {
color: #FFB400;
font-size: 10px;
}
#cart a {
color: white;
font-size: 10px;
}
#nav {
background: #4B5360;
position: absolute;
top: 101px;
left: 287px;
width: 385px;
padding: 9px 0;
text-align: center;
}
#nav li {
list-style: none;
display: inline;
color: #fff;
}
#nav a {
text-decoration: none;
color: #fff;
}
#gallery {
position: absolute;
top: 155px;
left: 287px;
width: 385px;
}
#gallery li {
list-style: none;
text-indent: -999px;
float: left;
overflow: hidden;
height: 111px;
}
#gallery .gwomen {
background: url(fashionhut-images/pic_1.jpg) no-repeat;
width: 127px;
}
#gallery .gkids {
background: url(fashionhut-images/pic_2.jpg) no-repeat;
width: 130px;
}
#gallery .gmen {
background: url(fashionhut-images/pic_3.jpg) no-repeat;
width: 128px;
}
#body {
padding-top: 3px;
background-color:#FFF;
}
#categories {
float: left;
width: 195px;
}
#seasonal, #collection {
float: right;
width: 474px;
background: #D4CAB6;
margin-bottom: 2px;
}
#seasonal .inner, #collection .inner {
padding: 6px 12px;
}
#seasonal p, #collection p {
margin: 0.9em 0;
}
.more a {
font-size: 12px;
color: #000;
text-decoration: none;
}
.more a:hover {
text-decoration: underline;
}
h3 {
font: bold 14px "arial narrow", arial, sans-serif;
color: #1B1812;
}
h2 {
font: 18px "arial narrow", arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
#categories h2 {
color: #fff;
padding: 4px 0 5px 39px;
background: #847A67;
}
#categories li {
background: #D4CAB6 left url(fashionhut-images/bullet.gif) no-repeat;
border-top: 1px solid #F4EFDF;
list-style: none;
font-size: 12px;
padding: 7px 0 8px 35px;
}
#categories a {
text-decoration: none;
color: #000000;
}
#categories a:hover {
text-decoration: underline;
}
#collection {
background: #D4CAB6 bottom right url(fashionhut-images/person_bg.jpg) no-repeat;
}
#collection .inner {
padding-right: 98px;
}
#minigal {
float: right;
width: 222px;
margin-top: 1em;
margin-bottom: 1em;
}
#minigal div {
float: left;
margin: 6px;
}
#collection ul {
margin-left: 1.5em;
}
#collection li {
margin: 0.2em 0;
color: #463F32;
font-size: 16px;
font-weight: bold;
font-family: "arial narrow", arial, sans-serif;
}
#collection p {
width: 103px;
margin-left: 1.5em;
}
#seas-one, #seas-two, #seas-three {
height: 146px;
}
#seas-one {
float: left;
width: 195px;
margin-right: 3px;
background: url(fashionhut-images/foot_1.jpg) no-repeat;
}
#seas-two {
float: left;
width: 249px;
margin-right: 3px;
background: url(fashionhut-images/foot_2.jpg) no-repeat;
}
#seas-three {
float: left;
width: 222px;
background: url(fashionhut-images/foot_3.jpg) no-repeat;
}
#seas p {
text-align: right;
color: #000;
margin: 80px 15px 0 0;
font-size: 23px;
font-weight: bold;
}
#seas p.date {
margin-top: 0;
font-size: 16px;
}
#copyright {
text-align: center;
font-size: 9px;
padding: 3px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>Fashion Hut</h1>
<p>Celebrity Brands</p>
</div>
<div id="cart">
<div id="cart-top">
<div id="cart-bot">
<div id="cart-cart">
<p>Shopping Cart</p>
<p class="orange">Lorem ipsum dolor sit</p>
<p><a href="http://www.free-css.com/">click here</a></p>
</div>
</div>
</div>
</div>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/">MEN</a> | </li>
<li><a href="http://www.free-css.com/">WOMEN</a> | </li>
<li><a href="http://www.free-css.com/">GIRLS</a> | </li>
<li><a href="http://www.free-css.com/">BOYS</a> | </li>
<li><a href="http://www.free-css.com/">ACCESSORIES</a> | </li>
<li><a href="http://www.free-css.com/">CONTACT US</a></li>
</ul>
</div>
<div id="gallery">
<ul>
<li class="gwomen"><a href="http://www.free-css.com/">Women</a></li>
<li class="gkids"><a href="http://www.free-css.com/">Kids</a></li>
<li class="gmen"><a href="http://www.free-css.com/">Men</a></li>
</ul>
</div>
</div>
<div id="body">
<div id="categories">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Formal Dresses</a></li>
<li><a href="http://www.free-css.com/">Party Dresses</a></li>
<li><a href="http://www.free-css.com/">Summer Special</a></li>
<li><a href="http://www.free-css.com/">Cocktail Dresses</a></li>
<li><a href="http://www.free-css.com/">Formal Ware</a></li>
<li><a href="http://www.free-css.com/">Winter Special</a></li>
<li><a href="http://www.free-css.com/">Regular Ware</a></li>
<li><a href="http://www.free-css.com/">Night Dress</a></li>
<li><a href="http://www.free-css.com/">Sports Dress</a></li>
<li><a href="http://www.free-css.com/">Wedding Dress</a></li>
<li><a href="http://www.free-css.com/">Jeans</a></li>
</ul>
</div>
<div id="seasonal">
<div class="inner">
<h2>Fashion Seasonal</h2>
<h3>Welcome</h3>
<p>Don't forget to check <a href="http://www.free-css.com/">free website templates</a> every day, because we add a new free website template almost daily.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<p>Professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.free-css.com/">the forum</a>.</p>
<p class="more"><a href="http://www.free-css.com/">more</a></p>
</div>
</div>
<div id="collection">
<div class="inner">
<div id="minigal">
<div><img src="fashionhut-images/pic_4.jpg" width="57" height="53" alt="Pic" /></div>
<div><img src="fashionhut-images/pic_5.jpg" width="57" height="53" alt="Pic" /></div>
<div><img src="fashionhut-images/pic_6.jpg" width="57" height="53" alt="Pic" /></div>
<div><img src="fashionhut-images/pic_7.jpg" width="57" height="53" alt="Pic" /></div>
<div><img src="fashionhut-images/pic_8.jpg" width="57" height="53" alt="Pic" /></div>
<div><img src="fashionhut-images/pic_9.jpg" width="57" height="53" alt="Pic" /></div>
</div>
<h2>New Collection</h2>
<ul>
<li>New Arrivals</li>
<li>50% discount</li>
</ul>
<p>Websites about templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
</div>
</div>
<div class="clear"> </div>
<div id="seas">
<div id="seas-one">
<p>Autumn</p>
<p class="date">2006</p>
</div>
<div id="seas-two">
<p>Summer</p>
<p class="date">2006</p>
</div>
<div id="seas-three">
<p>Monsoon</p>
<p class="date">2006</p>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="copyright">
<p>Copyright © 2007. Company name all rights reserved | designed by <a href="http://www.freewebsitetemplates.com">free website templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category