shopping : Fashion « Templates « HTML / CSS

shopping
  

<!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>
<title>Shopping</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
  margin: 0px;
  padding: 0px;
}

body {
  padding: 25px 0px 25px;
  background-color: #749a01;
  color: #415005;
  font-family: tahoma, arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

a {
  color: #4e6200;
  background-color: inherit;
  text-decoration: underline;
}

a:hover {
  color: #6f8c00;
  background-color: inherit;
}

span {
  display: none;
}

img {
  border: none;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

p {
  margin: 6px 0px 10px;
  text-align: justify;
  line-height: 14px;
}

.clearthis {
  margin : 0px;
  height : 1px;
  clear : both;
  float : none;
  font-size: 1px;
  line-height: 0px;
  overflow : hidden;
  visibility: hidden;
}

input {
  padding: 2px 0px;
  color: #415005;
  background-color: #fff;
  border: #576c04 1px solid;
  font-family: tahoma, arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
}


#body_wrapper {
  margin: 0px auto;
  padding: 3px 0px;
  width: 786px;
  background-color: #fff;
  color: inherit;
}

#container {
  margin: 0px 3px;
  background-color: #90b304;
  color: inherit;
  text-align: left;
}

.thumbnail {
  margin: 8px 7px 5px 0px;
  float: left;
}


/* Page Header */

#page_header {
  width: 780px;
  height: 55px;
  background-color: #96bb27;
  color: inherit;
  overflow: hidden;
  padding: 0px;
}

#page_header h1 {
  width: 230px;
  height: 55px;
  background: url('shopping-images/company_logo.gif') no-repeat 0% 50%;
  float: left;
}


/* Page Search */

#page_search {
  margin: 15px 12px;
  width: 200px;
  float: right;
  font-weight: bold;
}

#page_search h3 {
  padding-top: 5px;
  float: left;
  font-size: 11px;
}

#page_search input {
  margin: 2px 3px 0px 7px;
  width: 120px;
  float: left;
}

#page_search input.button {
  margin: 0px;
  padding: 0px;
  width: 23px;
  height: 21px;
  color: #fff;
  background: url('shopping-images/search_button.gif') #96bb27 no-repeat 0% 2px;
  border: none;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
}


/* Main Area */

#mainarea {
  width: 780px;
  background: url('shopping-images/main_image.jpg') no-repeat;
}

#mainarea_2 {
  margin-top: 260px;
  width: 780px;
  background: url('shopping-images/categorymenu_bg.gif') repeat-y 706px;
}


/* Navigational Menu */

#navmenu {
  width: 780px;
  height: 42px;
  overflow: hidden;
}

#navmenu li {
  float: left;
  padding-right: 34px;
  height: 42px;
  background: url('shopping-images/navmenu_background.gif') no-repeat;
}

#navmenu li#menu_4 {
  padding-right: 26px;
}

#navmenu li#menu_5 {
  padding: 0px;
  background: url('shopping-images/navmenu_background_5.gif') no-repeat;
}

#navmenu li a {
  width: 130px;
  height: 32px;
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#navmenu #menu_1 a {
  background-image: url('shopping-images/navmenu_home.gif');
}

#navmenu #menu_2 a {
  background-image: url('shopping-images/navmenu_store.gif');
}

#navmenu #menu_3 a {
  background-image: url('shopping-images/navmenu_faq.gif');
}

#navmenu #menu_4 a {
  background-image: url('shopping-images/navmenu_resource.gif');
}

#navmenu #menu_5 a {
  margin-left: 2px;
  background-image: url('shopping-images/navmenu_contact.gif');
}


/* Category Menu */

#categorymenu {
  margin-left: 643px;
  width: 129px;
  position: absolute;
  z-index: 1;
}

#categorymenu ul {
  position: relative;
  top: -2px;
}

#categorymenu li {
  width: 129px;
  height: 39px;
  background-image: url('shopping-images/categorymenu_bg_left.gif');
  background-repeat: no-repeat;
  position: relative;
  top: -12px;
}

#categorymenu #catmenu_1 {
  position: static;
}

#categorymenu #catmenu_2 {
  height: 32px;
  background-image: url('shopping-images/categorymenu_bg_right.gif');
  background-position: 100% 0%;
  position: static;
}

#categorymenu #catmenu_3 {
  position: static;
}

#categorymenu #catmenu_4 {
  height: 39px;
  background-image: url('shopping-images/categorymenu_bg_left.gif');
  background-position: 100% 0%;
  top: -16px;
}

#categorymenu li a {
  display: block;
  width: 129px;
  height: 32px;
  background-repeat: no-repeat;
}

#categorymenu #catmenu_1 a {
  background-image: url('shopping-images/categorymenu_top.gif');
  background-position: 15px 12px;
}

#categorymenu #catmenu_2 a {
  background-image: url('shopping-images/categorymenu_bottom.gif');
  background-position: 70px 5px;
}

#categorymenu #catmenu_3 a {
  background-image: url('shopping-images/categorymenu_skirts.gif');
  background-position: 15px 13px;
}

#categorymenu #catmenu_4 a {
  background-image: url('shopping-images/categorymenu_handbags.gif');
  background-position: 52px 10px;
}

#categorymenu #catmenu_5 a {
  background-image: url('shopping-images/categorymenu_shoes.gif');
  background-position: 15px 15px;
}



/* Main Content */

#maincontent_1 {
  padding: 39px 158px 33px;
  background: url('shopping-images/content_bg_top.jpg') no-repeat 158px 28px;

}

#maincontent_2 {
  padding-top: 5px;
  width: 463px;
  background: url('shopping-images/content_bg.jpg') repeat-y;
}

#maincontent_3 {
  padding: 0px 18px 10px 23px;
  background: url('shopping-images/content_bg_bot.jpg') no-repeat 0px 100%;
  text-align: left;
}

.link_details {
  font-size: 10px;
  font-weight: bold;
}


/* Featured Products */

#featured {
  width: 205px;
  float: left;
}

#featured h2 {
  height: 17px;
  background: url('shopping-images/featured_header.gif') no-repeat;
}


/* Category: Skirts */

#skirts {
  width: 200px;
  float: right;
}

#skirts h2 {
  height: 17px;
  background: url('shopping-images/03skirts_header.gif') no-repeat 100% 0%;
}


/* Page Footer */

#page_footer {
  padding: 0px 20px;
  background-color: #7a7a7b;
  height: 35px;
  color: #fff;
  overflow: hidden;
  font-weight: bold;
}

#page_footer a {
  background-color: inherit;
  color: #fff;
}

#page_footer a:hover {
  background-color: inherit;
  color: #b8d255;
}

#designby {
  margin-top: 12px;
  float: left;
  width: 250px;
  font-size: 10px;
}

/* Footer Links */

#footer_links {
  margin-top: 11px;
  width: 315px;
  float: right;
}

#footer_links a {
  text-decoration: none;
}

#footer_links li {
  padding: 0px 14px;
  float: left;
  background: url('shopping-images/footerlinks_div.gif') no-repeat 100% 2px;
}

#footer_links li#last {
  padding-right: 0px;
  background: none;
}


/* Main Model */

#mainmodel {
  margin-top: 71px;
  width: 211px;
  height: 435px;
  background: url('shopping-images/main_model.gif') no-repeat;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

</style>


</head>
<body>
<div id="body_wrapper">
  <div id="container">
    <!-- Start of Page Header -->
    <div id="page_header">
      <h1><span>Red Tag Diva</span></h1>
      <!-- Start of Page Search -->
      <div id="page_search">
        <form action="#">
          <div>
            <h3>Search:</h3>
            <input type="text" />
            <input type="submit" value="Go" class="button" />
          </div>
        </form>
      </div>
      <!-- End of Page Search -->
    </div>
    <!-- End of Page Header -->
    <div id="mainmodel">&nbsp;</div>
    <!-- Start of Main Area -->
    <div id="mainarea">
      <!-- Start of Navigational Menu -->
      <div id="navmenu">
        <ul>
          <li id="menu_1"><a href="http://www.free-css.com/"><span>Home</span></a></li>
          <li id="menu_2"><a href="http://www.free-css.com/"><span>Store</span></a></li>
          <li id="menu_3"><a href="http://www.free-css.com/"><span>FAQ</span></a></li>
          <li id="menu_4"><a href="http://www.free-css.com/"><span>Resource</span></a></li>
          <li id="menu_5"><a href="http://www.free-css.com/"><span>Contact</span></a></li>
        </ul>
        <div class="clearthis">&nbsp;</div>
      </div>
      <!-- End of Navigational Menu -->
      <div id="mainarea_2">
        <!-- Start of Category Menu -->
        <div id="categorymenu">
          <ul>
            <li id="catmenu_1"><a href="http://www.free-css.com/"><span>Top</span></a></li>
            <li id="catmenu_2"><a href="http://www.free-css.com/"><span>Bottoms</span></a></li>
            <li id="catmenu_3"><a href="http://www.free-css.com/"><span>Skirts</span></a></li>
            <li id="catmenu_4"><a href="http://www.free-css.com/"><span>Handbags</span></a></li>
            <li id="catmenu_5"><a href="http://www.free-css.com/"><span>Shoes</span></a></li>
          </ul>
        </div>
        <!-- End of Category Menu -->
        <!-- Start of Main Content -->
        <div id="maincontent_1">
          <div id="maincontent_2">
            <div id="maincontent_3">
              <!-- Start of Featured Products -->
              <div id="featured">
                <h2><span>Featured Products</span></h2>
                <div class="thumbnail"><img src="shopping-images/featured_thumbnail.gif" width="68" height="93" alt="" /></div>
                <p> This is a template designed by free website templates for you for free you can replace all the text with your own text. </p>
                <div class="link_details"> <a href="http://www.free-css.com/">Get Details</a> </div>
              </div>
              <!-- End of Featured Products -->
              <!-- Start of 03 Skirts -->
              <div id="skirts">
                <h2><span>03 Skirts</span></h2>
                <div class="thumbnail"><img src="shopping-images/03skirts_thumbnail.gif" width="68" height="93" alt="" /></div>
                <p> Please don't remove the link at the bottom.If you really want to remove it you can buy a copyright free version. Thanks </p>
                <div class="link_details"> <a href="http://www.free-css.com/">Get Details</a> </div>
              </div>
              <!-- End of 03 Skirts -->
              <div class="clearthis">&nbsp;</div>
            </div>
          </div>
        </div>
        <!-- End of Main Content -->
      </div>
    </div>
    <!-- End of Main Area -->
    <!-- Start of Page Footer -->
    <div id="page_footer">
      <div id="designby"> Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> </div>
      <div id="footer_links">
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">Store</a></li>
          <li><a href="http://www.free-css.com/">FAQ</a></li>
          <li><a href="http://www.free-css.com/">Resource</a></li>
          <li id="last"><a href="http://www.free-css.com/">Contact</a></li>
        </ul>
      </div>
      <div class="clearthis">&nbsp;</div>
    </div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	fashion-blog
2.	fashion-brand
3.	fashion-store
4.	fashion 2
5.	FashionClub
6.	fashionhouse
7.	fashionhut
8.	fashionista
9.	Celebrere
10.	celebrity
11.	beautiful
12.	Beauty&Style
13.	beauty-design
14.	beauty-secrets
15.	beautycompany
16.	beautysalon
17.	beautysecrets
18.	metamorph_beauty
19.	agedbeauty
20.	face
21.	facing
22.	metamorph_middleage
23.	clothes-collection
24.	clothesfashion
25.	metamorph_sweetlove
26.	e16-fashion-club
27.	freshair
28.	wbfashion
29.	ruby
30.	shining-star