web-shop : Design 8 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 8

web-shop

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>

*{
padding:0;
margin:0;
}

body
{
  background-color: white;
  font-family: arial;
  font-size: 12px;
}

#Inner
{
  margin-top: 15px;
}

#Container
{
  width: 900px;
  margin: 0px auto;
}

.cleaner
{
    clear: both;
}

#Head
{
  height: 212px;
  width: 900px;
  background: url("web-shop-img/bac_logo.gif") top left repeat-x;
}

#Head_left
{
  height: 212px;
  width: 324px;
  float: left;
}

#Leaf_top
{
    background: url("web-shop-img/leaf.gif") top left no-repeat;
    height: 161px;
    width: 324px;
  float: left;
}

#Leaf_bottom
{
  background: url("web-shop-img/leaf2.gif") top left no-repeat;
    height: 51px;
  float: left;
  width: 324px;
}

#Leaf_bottom a
{
  color: #6b9c22;
  text-decoration: none;
  font-weight: bold;
  line-height: 58px;
  font-size: 11px;
}

#Leaf_bottom a:hover
{
  text-decoration: underline;
}

.registration
{
  text-indent: 12px;
}

*>.registration
{
    margin-left: 12px;
}

.log-in
{
    margin-left: 40px;
}

*>.log-in
{
    margin-left: 52px;
}

#Head_right
{
  height: 212px;
  width: 576px;
  float: right;
  clear: right;
}

#Logo
{
  height: 161px;
  width: 576px;
}

#Name
{
    background: url("web-shop-img/logo.gif") top left no-repeat;
    background-position: 54px 50px;
    font-size: 34px;
    padding-top: 48px;
    padding-left: 100px;
    color: #989d9e;
}

.blue
{
  color: #0e88af;
}

#Informations
{
    font-size: 15px;
    padding-left: 92px;
    color: #989d9e;
}

#Top_menu
{
    height: 51px;
  width: 576px;
  background: url("web-shop-img/bac_button.gif") top left repeat-x;
}

#Top_menu a
{
  width: 110px;
  height: 51px;
  float: right;
  color: #0e88af;
  text-decoration: none;
  font-weight: bold;
  padding-top: 20px;
  text-indent: 38px;
}

#Top_menu a:hover
{
  text-decoration: underline;
}

#Top_menu .home
{
    background: url("web-shop-img/home.jpg") top left no-repeat;
}

#Top_menu .help
{
    background: url("web-shop-img/help.jpg") top left no-repeat;
}

#Top_menu .contact
{
    background: url("web-shop-img/contact.jpg") top left no-repeat;
}

#Top_menu .orders
{
    background: url("web-shop-img/orders.jpg") top left no-repeat;
}

#Top_menu .kart
{
    background: url("web-shop-img/kart.jpg") top left no-repeat;
}

#LeftPart
{
  width: 215px;
  background-color: #fbfdfe;
  margin-top: -12px;
  float: left;
}

*>#LeftPart
{
    margin-top: 8px;
}

#Menu
{
    width: 215px;
    float: left;
}

#Menu_header
{
    width: 215px;
    height: 31px;
}

.menu_header_right
{
    background: url("web-shop-img/ornament_menu.gif") top left no-repeat;
  height: 31px;
  width: 46px;
  float: right;
}

.menu_header_left
{
    background: url("web-shop-img/bac_menu.gif") top left repeat-x;
  width: 169px;
  height: 31px;
  float: left;
}

.menu_text
{
  color: #0e88af;
  font-weight: bold;
  line-height: 31px;
  padding-left: 14px;
}

#Menu_content
{
  float: left;
  width: 205px;
  padding: 5px;
}

#Menu_content a:hover
{
    text-decoration: underline;
    color: #0e88af;
}

.menu_item
{
  color: #8d9395;
  text-decoration: none;
  padding-left: 20px;
  background: url("web-shop-img/arrow.gif") top left no-repeat;
  margin-left: 6px;
  line-height: 18px;
}

.menu_item2
{
  color: #8d9395;
  text-decoration: none;
  padding-left: 50px;
  font-size: 11px;
}

#Poll_header
{
    width: 215px;
    height: 31px;
    float: left;
}

#Poll
{
  margin-top: 5px;
  float: left;
}

#Poll_content
{
    width: 203px;
  padding: 5px;
    padding-left: 12px;
  float: left;
}

#Poll_content a:hover
{
    text-decoration: underline;
    color: #0e88af;
}

.poll_question
{
    color: #767879;
  text-decoration: none;
  font-weight: bold;
}

.poll_unswer
{
    color: #8d9395;
  text-decoration: none;
  line-height: 25px;
}

#RightPart
{
  width: 680px;
  float: right;
  clear: left;
  background-color: #f5fdfd;
  margin-top: -12px;
}

*>#RightPart
{
    margin-top: 8px;
    clear: right;
    margin-left: 5px;
}

#Page
{
  width: 675px;
  padding: 5px;
  padding-right: 0px;
}

*>#Page
{
  padding: 5px;
}

h1
{
  color: #979a9b;
  font-size: 20px;
  font-weight: normal;
  padding-left: 20px;
  line-height: 35px;
}

#Page_header
{
  background-color: white;
  padding: 8px;
  padding-right: 0px;
  padding-left: 0px;
  width: 669px;
}

.page_header_img
{
  width: 68px;
  padding-left: 8px;
}

.page_header_text
{
    width: 250px;
    text-align: justify;
    font-size: 11px;
    color: #0e88af;
}

#Page_header tr
{
  width: 670px;
}

#Page_top
{
  background-color: #a5d7e9;
  margin-top: 8px;
  margin-bottom: 8px;
  color: #074d64;
  width: 669px;
}

#Page_top p
{
    padding: 5px;
}

#Page_top a
{
    color: #074d64;
}

#Page_center
{
    width: 669px;
}

.page_center_button
{
  width: 31px;
}

.page_center_button span
{
  display: none;
}

.page_center_buy
{
    background: url("web-shop-img/buy.gif") top left no-repeat;
    height: 53px;
    width: 31px;
    float: left;
}

.page_center_info
{
    background: url("web-shop-img/info.gif") top left no-repeat;
    height: 99px;
    width: 31px;
    float: left;
}

.page_center_content
{
    height: 142px;
    width: 170px;
    background-color: white;
    margin-bottom: 3px;
    padding-left: 10px;
}


#Page_center tr
{
    width: 669px;
    margin-bottom: 5px;
}

.page_center_img
{
  width: 117px;
  height: 152px;
  background-color: white;
  margin-right: 3px;
}

.page_center_img img
{
  padding-top: 30px;
  padding-left: 20px;
}

.page_center_img2
{
  float: left;
  width: 117px;
  height: 152px;
  background-color: white;
}

.page_center_img2 img
{
  padding-top: 30px;
  padding-left: 20px;
}

.blue2
{
    color: #0e88af;
    font-size: 16px;
    font-weight: bold;
    line-height: 45px;
}

.gray
{
    color: #a6acae;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
}

.green
{
    color: #7e9b1e;
    font-size: 14px;
    font-weight: bold;
}

.page_center_text
{
  width: 170px;
  float: left;
}

#Bottom
{
  width: 900px;
  float: left;
  margin-top: 5px;
}

.down
{
  font-size: 11px;
  margin-left: 650px;
  text-align: left;
  padding-bottom: 5px;
}

.down a
{
    color: #5a5551;
}

.down2
{
  margin-left: 810px;
  padding-bottom: 10px;
}

.down2 img
{
    border: 0px;
}

</style>


</head>
<body>
<div id="WholePage">
  <div id="Inner">
    <div id="Container">
      <div id="Head">
        <div id="Head_left">
          <div id="Leaf_top"></div>
          <div id="Leaf_bottom"> <a class="registration" href="http://www.free-css.com/">REGISTRATION</a> <a class="log-in" href="http://www.free-css.com/">LOG IN</a> </div>
        </div>
        <div id="Head_right">
          <div id="Logo">
            <div id="Name"><span class="blue">C</span><span>ompany</span>&nbsp;<span class="blue">N</span><span>ame</span> </div>
            <div id="Informations">Good afternoon | It's Friday | Time: 12:51 </div>
          </div>
          <div id="Top_menu"> <a class="kart" href="http://www.free-css.com/"><span>KART</span></a> <a class="orders" href="http://www.free-css.com/"><span>ORDERS</span></a> <a class="contact" href="http://www.free-css.com/"><span>CONTACT</span></a> <a class="help" href="http://www.free-css.com/"><span>HELP</span></a> <a class="home" href="http://www.free-css.com/"><span>HOME</span></a> </div>
        </div>
      </div>
      <div id="CentralPart">
        <div id="LeftPart">
          <div id="Menu">
            <div id="Menu_header">
              <div class="menu_header_left"> <span class="menu_text">MENU</span> </div>
              <div class="menu_header_right"> </div>
            </div>
            <div id="Menu_content"> <a class="menu_item" href="http://www.free-css.com/"><span>Lorem ipsum</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Nulla facilisi</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Suspendisse ipsum</span></a><br/>
              <a class="menu_item2" href="http://www.free-css.com/"><span>Aliquam interdum</span></a><br/>
              <a class="menu_item2" href="http://www.free-css.com/"><span>Morbi sit amet augue</span></a><br/>
              <a class="menu_item2" href="http://www.free-css.com/"><span>In hac habitasse platea dictumst</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Donec sed mauris sit amet</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>In sollicitudin cursus purus</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Lorem ipsum</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Nulla facilisi</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Suspendisse ipsum</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Aliquam volutpat auctor</span></a><br/>
              <a class="menu_item" href="http://www.free-css.com/"><span>Suspendisse scelerisque</span></a><br/>
            </div>
          </div>
          <div id="Poll">
            <div id="Poll_header">
              <div class="menu_header_left"> <span class="menu_text">POLL</span> </div>
              <div class="menu_header_right"> </div>
            </div>
            <div id="Poll_content"> <span class="poll_question">Donec at justo ac ipsum laoreet dapibus?</span><br/>
              <a class="poll_unswer" href="http://www.free-css.com/"><span>Lorem ipsum</span></a><br/>
              <a class="poll_unswer" href="http://www.free-css.com/"><span>Nulla facilisi</span></a><br/>
              <a class="poll_unswer" href="http://www.free-css.com/"><span>Suspendisse ipsum</span></a><br/>
            </div>
          </div>
          <div id="Banner"> <img src="web-shop-img/banner.jpg" alt="" /> </div>
        </div>
        <div id="RightPart">
          <div id="Page">
            <div id="Page_header">
              <h1>Advantages of our shop</h1>
              <table>
                <tr>
                  <td class="page_header_img"><img src="web-shop-img/basket.gif" alt="" /></td>
                  <td class="page_header_text"><p>Donec at justo ac ipsum laoreet dapibus. Vivamus lacinia. Suspendisse ipsum. Morbi vitae nulla. In hac habitasse platea dictumst.</p></td>
                  <td class="page_header_img"><img src="web-shop-img/idea.gif" alt="" /></td>
                  <td class="page_header_text"><p>Etiam sollicitudin dignissim tellus. Cras ut ligula nec ligula aliquam ultrices. Praesent tempor. Donec arcu. Morbi sit amet augue.</p></td>
                </tr>
                <tr>
                  <td class="page_header_img"><img src="web-shop-img/car.gif" alt="" /></td>
                  <td class="page_header_text"><p>Etiam sollicitudin dignissim tellus. Cras ut ligula nec ligula aliquam ultrices. Praesent tempor. Donec arcu. Morbi sit amet augue.</p></td>
                  <td class="page_header_img"><img src="web-shop-img/envelope.gif" alt="" /></td>
                  <td class="page_header_text"><p>Donec at justo ac ipsum laoreet dapibus. Vivamus lacinia. Suspendisse ipsum. Morbi vitae nulla. In hac habitasse platea dictumst.</p></td>
                </tr>
              </table>
            </div>
            <div id="Page_top">
              <p> Lorem ipsum dolor sit amet 1-4<br/>
                Cras volutpat ligula sed est. Quisque lacus <a href="http://www.free-css.com/">libero,</a> <a href="http://www.free-css.com/">vestibulum ut,</a> <a href="http://www.free-css.com/">venenatis ac,</a> <a href="http://www.free-css.com/">interdum quis, mi.</a><br/>
                Donec at justo ac ipsum laoreet <a href="http://www.free-css.com/">dapibus</a><br/>
                <a href="http://www.free-css.com/">1</a> 2 3 .... 11 12 13<br/>
              </p>
            </div>
            <div id="Page_center">
              <table>
                <tr>
                  <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href="http://www.free-css.com/"><span>more-info</span></a> </td>
                  <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
                      <span class="gray">Donec at:  justo ac</span><br/>
                      <span class="gray">Cras ut: ligula nec</span><br/>
                      <br/>
                      <span class="green">Price: $156</span><br/>
                    </div></td>
                  <td class="page_center_img"><img src="web-shop-img/photo4.gif" alt="" /> </td>
                  <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href="http://www.free-css.com/"><span>more-info</span></a> </td>
                  <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
                      <span class="gray">Donec at:  justo ac</span><br/>
                      <span class="gray">Cras ut: ligula nec</span><br/>
                      <br/>
                      <span class="green">Price: $156</span><br/>
                    </div></td>
                  <td class="page_center_img2" ><img src="web-shop-img/photo4.gif" alt="" /> </td>
                </tr>
                <tr>
                  <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href="http://www.free-css.com/"><span>more-info</span></a> </td>
                  <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
                      <span class="gray">Donec at:  justo ac</span><br/>
                      <span class="gray">Cras ut: ligula nec</span><br/>
                      <br/>
                      <span class="green">Price: $156</span><br/>
                    </div></td>
                  <td class="page_center_img" ><img src="web-shop-img/photo4.gif" alt="" /> </td>
                  <td class="page_center_button"><a class="page_center_buy" href="http://www.free-css.com/"><span>buy</span></a><a class="page_center_info" href="http://www.free-css.com/"><span>more-info</span></a> </td>
                  <td class="page_center_content"><div class="page_center_text"> <span class="blue2">Lorem ipsum dolor</span><br/>
                      <span class="gray">Donec at:  justo ac</span><br/>
                      <span class="gray">Cras ut: ligula nec</span><br/>
                      <br/>
                      <span class="green">Price: $156</span><br/>
                    </div></td>
                  <td class="page_center_img2" ><img src="web-shop-img/photo4.gif" alt="" /> </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="cleaner"></div>
      </div>
      <div id="Bottom">
        <p class="down">Copyright &copy; 2007, <a href="http://www.sunlight.cz">Design by: Sunlight webdesign</a> </p>
        <div class="down2">
          <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a> </p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.themissing-piece
70.thermal
71.thesite
72.thetechies
73.thewall
74.the_gig
75.thisistext
76.throughout
77.thunder
78.ticktocklight
79.time
80.Timeless Template
81.timeless
82.timemanager
83.toolkit
84.tooplain
85.topbusiness
86.topgadgets
87.topworks
88.tornpaperdocom
89.totaltouch
90.towers
91.traditionalist
92.transient
93.transition
94.transport
95.trialservices
96.trikea-static
97.trinityinstitute
98.tropical-evening
99.tropical
100.truenature
101.turn-out-mag
102.Turnesol
103.turnitup
104.turrion-development
105.tv-archade
106.twirling
107.twisted
108.Typography
109.ultimateweb
110.unbound-1.0
111.uncomplicated
112.undefined
113.Underground
114.undertaking
115.UnderWraps
116.undiscovered
117.unembellished
118.unilluminated
119.uniq
120.unite
121.universal
122.unknown
123.unlink
124.unnamed
125.unqualified
126.urbanartist
127.usabilityreport
128.variety
129.vectorlover1-0
130.vegetable
131.veggie
132.ventix
133.vertical
134.verticals
135.vertigo
136.VeryGreen
137.VIBE
138.vibrant
139.Village
140.vintage-style
141.violetrays
142.visioninc
143.visions
144.vitruvius
145.vivid
146.Viziora
147.voodoo-dolls
148.voodoodollyv2.0
149.voyage
150.WaiveLive
151.walls
152.wanderer
153.warmblue
154.warped
155.watchthis
156.watercolored-portfolio
157.waterfactory
158.waterfall
159.waterfalls
160.WaterPool
161.we think
162.web-application
163.web-design-studio
164.web-design
165.web-hosting
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine