shop-around : Business « Templates « HTML / CSS

shop-around

  

<!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>Shop Around</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { padding:0; margin:0; outline:0; }
body {
  background:#fff url(images/body.gif) repeat-x 0 0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size:12px;
  line-height:16px;
  color:#636363;
}
input, textarea, select { font-family: "Trebuchet MS", Arial, sans-serif; font-size:12px; }

.field { background:#ebebeb; border:solid 1px #dedede; padding:2px;}

a img { border:0; }

a { color:#8b0000; text-decoration: underline; cursor:pointer; }
a:hover { color:#666; text-decoration: none; }

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

h2 { font-size:14px; line-height:16px; }
h3 { font-size:12px; line-height:14px; text-transform: uppercase; color:#000; }
h4 { font-size:12px; line-height:14px; text-transform: uppercase; color:#000; }


h1#logo { font-size:0; line-height:0; width:156px; height:64px; float:left; }
h1#logo a{ display:block; height:64px; text-indent: -4000px; background:url(images/logo.gif); }

.shell { width:960px; margin:0 auto; padding:10px; background:#fff; }

#header { height:64px; background:url(images/header.gif); position:relative;}

#navigation { float:right; white-space:nowrap; }
#navigation ul{ list-style-type: none; height:64px; font-weight: bold; float:left;}
#navigation ul li{ float:left; display:inline; }
#navigation ul li a{ float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;}
#navigation ul li a.active,
#navigation ul li a:hover{ background:#fff; color:#8b0000; }

#cart { float:right; width:160px; top:0; right:0; height:51px; background:#8b0000; color:#fff; padding:13px 10px 0 10px; white-space:nowrap; line-height:20px;}
a.cart-link { color:#fff; background:url(images/cart-link.gif) no-repeat 0 0; padding:0 0 0 32px; text-decoration: none;}
a.cart-link:hover { text-decoration: underline;}

#sidebar { float:left; width:226px;}
#content { float:right; width:724px;}

#main { padding:10px 0 0 0; }

.box { padding:1px; border:solid 1px #dedede; margin-bottom:10px;}
.box h2{ background:#7f7f7f; color:#fff; font-weight: normal; padding:0 5px; position:relative; height:27px; line-height:27px; }
.box h2 span{ position:absolute; width:10px; height:5px; background:url(images/h2-arr.gif); top:27px; right:10px; font-size:0; line-height:0;}
.box-content { padding:5px;}

a.bul { background:url(images/bul.gif) no-repeat 0 center; padding-left:10px;}

.search { min-height:252px;}
.search label { display:block; padding-bottom:3px; }

.search .field { display:block; margin-bottom:10px; }
.search .inline-field label { display:inline; padding:0; }
.search .inline-field .field { display:inline; margin:0; }
.search input.field { width:206px; }
.search select.field { width:212px; }
.search select.small-field { width:50px; }

.search-submit { width:70px; background:#8b0000; border:0; color:#fff; height:27px; display:block; line-height:26px; cursor:pointer; margin:12px 0 10px 0;}

.categories { min-height:383px; }
.categories ul { list-style-type: none; font-size:13px;}
.categories ul li{ border-bottom:dashed 1px #ccc; padding:5px 0;}
.categories ul li.last{ border-bottom:0; padding-bottom:0;}
.categories ul li a{ color:#5f5f5f; text-decoration: none; background:url(images/cat.gif) no-repeat 0 4px; padding-left:17px;}
.categories ul li a:hover{ color:#8b0000; }

#slider { height:252px; position:relative; overflow:hidden; }
#slider-holder { width:720px; height:252px; position:relative; overflow:hidden; }
#slider-holder .jcarousel-clip{ width:720px; height:252px; position:relative; overflow:hidden; }
#slider-holder ul{ width:720px; height:252px; position:relative; overflow:hidden; list-style-type: none;}
#slider-holder ul li{ width:720px; height:252px; position:relative; overflow:hidden; float:left; }

#slider-nav { position:absolute; top:231px; left:644px; z-index:2;}
#slider-nav a{ font-size:0; line-height:0; text-indent: -4000px; width:10px; height:10px; border:solid 1px #8b0000; background:#8b0000; float:left; margin-right:5px; }
#slider-nav a:hover,
#slider-nav a.active { background:#fff;}

.products {}
.products ul{ list-style-type: none;}
.products ul li{ position:relative; padding:1px; border:solid 1px #dedede; float:left; width:231px; margin-right:9px; height:383px; overflow:hidden; }
.products ul li.last{ margin-right:0; }

.product-info{ position:absolute; width:153px; top:194px; left:0;}
.product-info h3{ background:#8b0000; color:#fff; padding:6px 10px; }
.product-info h4{ font-weight: normal;}
.product-info p{ font-size:16px; line-height:18px; text-transform: uppercase; font-weight: bold; color:#000; padding:5px 0 7px 0;}
.product-info .product-desc{ padding:10px; background:url(images/info.png); width:133px; }

.price { display:block; font-size:21px; color:#8b0000; line-height:23px; }

.more-products { border:solid 1px #dedede; position:relative; height:114px; overflow:hidden; }
.more-products ul{ list-style-type: none; height:94px; position:relative; overflow:hidden; width:805px;}
.more-products ul li{ float:left; width:94px; height:94px; border-right:dashed 1px #ccc; padding:0 10px;}
.more-products ul li.last{ border-right:0; }

.more-products-holder { width:804px; height:94px; position:relative; overflow:hidden; top:10px; left:70px;}
.more-products-holder .jcarousel-clip{ width:804px; height:94px; position:relative; overflow:hidden; }

.more-nav { font-size:0; line-height:0;}
.more-nav a{ position:absolute; top:40px; left:0; width:30px; height:32px; text-indent: -4000px; z-index:3;}
.more-nav a.next{ background:url(images/next.gif); left:910px;}
.more-nav a.prev{ background:url(images/prev.gif); left:20px;}

.cols { padding:15px 0;}
.col { float:left; display:inline; width:217px; margin-right:30px;}
.col-last { margin-right:0;}

h3.ico { background-repeat:no-repeat; background-position:0 2px; padding:6px 0 8px 30px;}
h3.ico1 { background-image:url(images/ico1.gif);}
h3.ico2 { background-image:url(images/ico2.gif);}
h3.ico3 { background-image:url(images/ico3.gif);}
h3.ico4 { background-image:url(images/ico4.gif);}

#footer { height:51px; background:#ebebeb; white-space:nowrap; line-height:50px; padding:0 15px; color:#7b7b7b; margin-top:10px;}
#footer a{ color:#7b7b7b; text-decoration: none;}
#footer a:hover{ color:#000;}
#footer span{ padding:0 2px;}


</style>


<!--[if lte IE 6]><link rel="stylesheet" href="shop-around-css/ie6.css" type="text/css" media="all" /><![endif]-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script src="js/jquery-func.js" type="text/javascript"></script>
</head>
<body>
<!-- Shell -->
<div class="shell">
  <!-- Header -->
  <div id="header">
    <h1 id="logo"><a href="#">shoparound</a></h1>
    <!-- Cart -->
    <div id="cart"> <a href="#" class="cart-link">Your Shopping Cart</a>
      <div class="cl">&nbsp;</div>
      <span>Articles: <strong>4</strong></span> &nbsp;&nbsp; <span>Cost: <strong>$250.99</strong></span> </div>
    <!-- End Cart -->
    <!-- Navigation -->
    <div id="navigation">
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">The Store</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- End Navigation -->
  </div>
  <!-- End Header -->
  <!-- Main -->
  <div id="main">
    <div class="cl">&nbsp;</div>
    <!-- Content -->
    <div id="content">
      <!-- Content Slider -->
      <div id="slider" class="box">
        <div id="slider-holder">
          <ul>
            <li><a href="#"><img src="shop-around-css/images/slide1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="shop-around-css/images/slide1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="shop-around-css/images/slide1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="shop-around-css/images/slide1.jpg" alt="" /></a></li>
          </ul>
        </div>
        <div id="slider-nav"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div>
      </div>
      <!-- End Content Slider -->
      <!-- Products -->
      <div class="products">
        <div class="cl">&nbsp;</div>
        <ul>
          <li> <a href="#"><img src="shop-around-css/images/big1.jpg" alt="" /></a>
            <div class="product-info">
              <h3>LOREM IPSUM</h3>
              <div class="product-desc">
                <h4>WOMENS</h4>
                <p>Lorem ipsum dolor sit<br />
                  amet</p>
                <strong class="price">$58.99</strong> </div>
            </div>
          </li>
          <li> <a href="#"><img src="shop-around-css/images/big1.jpg" alt="" /></a>
            <div class="product-info">
              <h3>LOREM IPSUM</h3>
              <div class="product-desc">
                <h4>WOMENS</h4>
                <p>Lorem ipsum dolor sit<br />
                  amet</p>
                <strong class="price">$58.99</strong> </div>
            </div>
          </li>
          <li class="last"> <a href="#"><img src="shop-around-css/images/big1.jpg" alt="" /></a>
            <div class="product-info">
              <h3>LOREM IPSUM</h3>
              <div class="product-desc">
                <h4>WOMENS</h4>
                <p>Lorem ipsum dolor sit<br />
                  amet</p>
                <strong class="price">$58.99</strong> </div>
            </div>
          </li>
        </ul>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Products -->
    </div>
    <!-- End Content -->
    <!-- Sidebar -->
    <div id="sidebar">
      <!-- Search -->
      <div class="box search">
        <h2>Search by <span></span></h2>
        <div class="box-content">
          <form action="#" method="post">
            <label>Keyword</label>
            <input type="text" class="field" />
            <label>Category</label>
            <select class="field">
              <option value="">-- Select Category --</option>
            </select>
            <div class="inline-field">
              <label>Price</label>
              <select class="field small-field">
                <option value="">$10</option>
              </select>
              <label>to:</label>
              <select class="field small-field">
                <option value="">$50</option>
              </select>
            </div>
            <input type="submit" class="search-submit" value="Search" />
            <p> <a href="#" class="bul">Advanced search</a><br />
              <a href="#" class="bul">Contact Customer Support</a> </p>
          </form>
        </div>
      </div>
      <!-- End Search -->
      <!-- Categories -->
      <div class="box categories">
        <h2>Categories <span></span></h2>
        <div class="box-content">
          <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
            <li><a href="#">Category 3</a></li>
            <li><a href="#">Category 4</a></li>
            <li><a href="#">Category 5</a></li>
            <li><a href="#">Category 6</a></li>
            <li><a href="#">Category 7</a></li>
            <li><a href="#">Category 8</a></li>
            <li><a href="#">Category 9</a></li>
            <li><a href="#">Category 10</a></li>
            <li><a href="#">Category 11</a></li>
            <li><a href="#">Category 12</a></li>
            <li class="last"><a href="#">Category 13</a></li>
          </ul>
        </div>
      </div>
      <!-- End Categories -->
    </div>
    <!-- End Sidebar -->
    <div class="cl">&nbsp;</div>
  </div>
  <!-- End Main -->
  <!-- Side Full -->
  <div class="side-full">
    <!-- More Products -->
    <div class="more-products">
      <div class="more-products-holder">
        <ul>
          <li><a href="#"><img src="shop-around-css/images/small1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small3.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small4.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small5.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small6.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small7.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small3.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small4.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small5.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small6.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small7.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small3.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small4.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small5.jpg" alt="" /></a></li>
          <li><a href="#"><img src="shop-around-css/images/small6.jpg" alt="" /></a></li>
          <li class="last"><a href="#"><img src="shop-around-css/images/small7.jpg" alt="" /></a></li>
        </ul>
      </div>
      <div class="more-nav"> <a href="#" class="prev">previous</a> <a href="#" class="next">next</a> </div>
    </div>
    <!-- End More Products -->
    <!-- Text Cols -->
    <div class="cols">
      <div class="cl">&nbsp;</div>
      <div class="col">
        <h3 class="ico ico1">Donec imperdiet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
      </div>
      <div class="col">
        <h3 class="ico ico2">Donec imperdiet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
      </div>
      <div class="col">
        <h3 class="ico ico3">Donec imperdiet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
      </div>
      <div class="col col-last">
        <h3 class="ico ico4">Donec imperdiet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
      </div>
      <div class="cl">&nbsp;</div>
    </div>
    <!-- End Text Cols -->
  </div>
  <!-- End Side Full -->
  <!-- Footer -->
  <div id="footer">
    <p class="left"> <a href="#">Home</a> <span>|</span> <a href="#">Support</a> <span>|</span> <a href="#">My Account</a> <span>|</span> <a href="#">The Store</a> <span>|</span> <a href="#">Contact</a> </p>
    <p class="right"> &copy; 2010 Shop Around. Design by <a href="http://chocotemplates.com">Chocotemplates.com</a> </p>
  </div>
  <!-- End Footer -->
</div>
<!-- End Shell -->
</body>
</html>

Related examples in the same category

1.	metamorph_disco
2.	businesdesign2007
3.	businesportal
4.	business template
5.	business web design
6.	business web template 38
7.	business-1
8.	business-2
9.	business-box
10.	business-center
11.	business-co
12.	business-company
13.	business-consultants
14.	Business-Design
15.	business-elegance
16.	business-llc
17.	business-online
18.	business-solution
19.	business-strategy
20.	business-time
21.	business-way
22.	business-world
23.	businessblog
24.	businessdesign
25.	businesshighway
26.	businesslike
27.	BusinessName
28.	BusinessSolution
29.	businesssolutions01
30.	businesstheme
31.	businessweb
32.	Business_Elegance
33.	business_events
34.	business_maritime
35.	busineswebdesign
36.	CarCar
37.	car-club
38.	car-dealer
39.	cars-website
40.	bloodybusiness
41.	Bloody_Business
42.	biz-company
43.	biz-solution
44.	biz-watch
45.	bizbox
46.	bizgroup
47.	metamorph_autosalon
48.	metamorph_business
49.	metamorph_casino
50.	alouette-agency
51.	advertising
52.	financial-services
53.	financial-website
54.	five-star-hotel
55.	metamorph_advice
56.	bloom
57.	blooming
58.	clubcard
59.	clubhouse
60.	bed-and-breakfast
61.	construction-company
62.	construction-group
63.	constructional-company
64.	consulting-services
65.	Consulting
66.	corporate-2.0
67.	corporate-blue
68.	corporate
69.	CorporateBlack
70.	corporateblue
71.	CorporateBlue2
72.	corporategreen
73.	CorporateGrey
74.	corporateluxe
75.	corporateprofiles
76.	CorporateRedGrey
77.	Corporate_Design
78.	corporation-ltd
79.	design-company
80.	metamorph_shopping
81.	metamorph_spasaloon
82.	metamorph_restaurant
83.	metamorph_photostudio
84.	abc-company
85.	ad-agency
86.	foo_shooting_club
87.	firming
88.	financialco
89.	abstract-studio
90.	carpet-cleaning
91.	architect-company
92.	architect-group
93.	architect
94.	architectural-company
95.	architectural-group
96.	architecture-bureau
97.	architecture
98.	computer-business
99.	computer-store
100.	djclub
101.	dally_studio
102.	future-business
103.	global-business
104.	global-hosting
105.	global
106.	globalhouse
107.	globalpress
108.	enterprise
109.	corpplus
110.	corpwire-magazine
111.	funkycorporate
112.	simply_business
113.	Small_Corporation
114.	your-business
115.	voip-company
116.	economics
117.	educational-site
118.	ec-mania
119.	furniture-collections
120.	mobileshop
121.	political-party
122.	pizza-factory
123.	pizzaparlor
124.	plainoffice
125.	plantshop
126.	play-school
127.	office
128.	online-casino
129.	online-radio
130.	online_education
131.	outsource-inc
132.	software-co
133.	software-company
134.	simplyBusiness
135.	smallstudio
136.	small-corporation
137.	rainbow_consultant
138.	Professional
139.	professional-web2
140.	premium-business
141.	premiumtemplateshop
142.	radio-station
143.	real-estate-agency
144.	real-estate-co
145.	real-estate
146.	realestate-company
147.	realestate
148.	sample-resume
149.	sample_business_site
150.	resume
151.	shop-online
152.	social-community-management
153.	workshyfop
154.	workspacer
155.	whirlpool
156.	WebStore
157.	weblogo
158.	strategicbusinessdesigns
159.	thebluecompany
160.	thebookstore
161.	TheCorporation
162.	total_management
163.	thepinkcompany
164.	theme-marketplace
165.	transportcompany
166.	internetmarket
167.	internetjobs
168.	market-leader
169.	Market
170.	marketing-company
171.	lawyer-and-attorney
172.	lawyer-marketing
173.	Job-Portal
174.	happy-print-shop
175.	health-care
176.	inbusiness
177.	industrial-company
178.	industrial-construction
179.	industrial
180.	industry
181.	internethosting
182.	internetservices
183.	luxury-hotel
184.	luxury-restaurant
185.	military-school
186.	headquarters
187.	hosting-co
188.	incorporated
189.	interior-design
190.	internetcorporation
191.	internetmanagement
192.	internet-studio
193.	TWO COLUMN CSS BUSINESS WEBSITE TEMPLATE
194.	Business template 2