Retro shop – single page layout for your e-shop

Today I have prepared for you another interesting template. It is vintage template layout. In retro styles. It has friendly and warm colors. Sure that you will like it. Now, lets look how it is made.

 

Final Result

final template result

Live Demo
download result

Get started

As usual – lets create a new project folder and several folders inside (to keep anything well structured):

  • css – for all CSS stylesheets (reset.css, style.css)
  • images – for all used images
  • js – for all JS files (html5.js, jquery.js and superfish.js)

Head section markup

Now I am going to give you the HTML markup of our header:

01 <!DOCTYPE html>
02 <html lang="en"><head>
03     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
04     <title>'Retro shop' single page layout | Script tutorials demo</title>
05     <meta charset="utf-8">
06     <!-- Link fonth -->
07     <link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
08     <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
09     <!-- Link styles -->
10     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
11     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
12     <!-- Link scripts -->
13     <script src="js/jquery.js" type="text/javascript"></script>
14     <script src="js/superfish.js"></script>
15     <script>
16         $(window).load(function() {
17             $("ul.sf-menu").superfish({
18                 pathClass:  'current',
19                 delay:      2000,
20                 animation:   {opacity:'show',height:'show'},
21                 speed:       'slow',
22                 autoArrows:  true,
23                 dropShadows: true
24             });
25         });
26         WebFontConfig = {google: {families: ['Yellowtail']}};
27         (function() {
28             var wf = document.createElement('script');
29             wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
30             wf.type = 'text/javascript';
31             wf.async = 'true';
32             var s = document.getElementsByTagName('script')[0];
33             s.parentNode.insertBefore(wf, s);
34         })();
35     </script>
36     <!--[if lt IE 9]>
37     <script type="text/javascript" src="js/html5.js"></script>
38     <![endif]-->
39 </head>

Moving forward – Main layout (body)

Whole layout consists of 7 main sections: header (with the top menus, currency switcher, search form and logo), navigation menu, small area for banners, main content section (Popular products), second content section (two column layout for tags cloud at the left side and Another products at the right), small breadcrumb section and footer (several more links and copyrights). It looks like:

001 <body>
002     <header><!-- Define the header section of the page -->
003         <div class="head_menus">
004             <div class="menu"><!-- Define the topest menu -->
005                 <ul>
006                     <li><a href="#">Home</a></li>
007                     ........
008                 </ul>
009             </div>
010             <div class="box_currencies"><!-- Define currency switcher -->
011                 <select class="select" name="currency">
012                     <option value="USD">US dollar</option>
013                     <option value="EUR">Euro</option>
014                 </select>
015             </div>
016             <div class="search"><!-- Define the search element -->
017                 <form method="get" action="#">
018                     <input type="text" onfocus="if(this.value =='Search' ) this.value=''" onblur="if(this.value=='') this.value='Search'" maxlength="300" size="10" value="Search" name="s">
019                     <input type="image" alt="" src="images/search_btn.gif">
020                 </form>
021             </div>
022         </div>
023         <div class="logo"><!-- Define the logo element -->
024             <a href="https://www.script-tutorials.com/">
025                 <h1>My Retro Shop</h1>
026                 <h3>Choose your favorite</h3>
027             </a>
028         </div>
029     </header>
030     <nav><!-- Define the navigation menu -->
031         <div>
032             <ul class="sf-menu">
033                 <li><a href="#">Menu 1</a>
034                     <ul>
035                         <li><a href="#">Submenu 1</a></li>
036                         <li><a href="#">Submenu 2</a></li>
037                         <li><a href="#">Submenu 3</a></li>
038                         <li><a href="#">Submenu 4</a></li>
039                     </ul>
040                 </li>
041                 ........
042             </ul>
043         </div>
044     </nav>
045     <section id="banners"><!-- Banners section -->
046         <ul>
047             <li><a href="#"><img alt="" src="images/b1.png"></a></li>
048             ........
049         </ul>
050     </section>
051     <section id="content"><!-- Define the content section -->
052         <div class="dbox">
053             <div class="head">Popular products</div>
054             <div class="list">
055                 <ul>
056                     <li>
057                         <a href="#">
058                             <img src="images/coin.png" />
059                             <span class="title">Item title</span>
060                             <span class="price"><p>$10.00</p></span>
061                             <div class="but"><p>Add to Cart</p><p></p></div>
062                         </a>
063                     </li>
064                     <li class="vsep"></li>
065                     ........
066                 </ul>
067             </div>
068         </div>
069     </section>
070     <section id="breadcrumb"><!-- Define the breadcrumb section -->
071         <div class="breadcrumb">
072             <a class="headerNavigation" href="#">Top</a> »
073             <a class="headerNavigation" href="#">Catalog</a> »
074             <a class="headerNavigation last" href="#">Coins</a>
075         </div>
076     </section>
077     <section id="content"><!-- Define the content #2 section -->
078         <div class="col1">
079             <div class="dbox">
080                 <div class="head">Tag Cloud</div>
081                 <div class="tags">
082                     <ul>
083                         <li><a href="#">Tag 1</a></li>
084                         ........
085                     </ul>
086                 </div>
087             </div>
088         </div>
089         <div class="col2">
090             <div class="dbox">
091                 <div class="head">Another products</div>
092                 <div class="blist">
093                     <ul>
094                         ........
095                     </ul>
096                 </div>
097             </div>
098         </div>
099     </section>
100     <footer><!-- Define the footer section of the page -->
101         <div>
102         <ul>
103             <li><a href="#">Home</a></li>
104             ........
105         </ul>
106         <p class="link"><a href="https://www.script-tutorials.com/">Template by Script Tutorials</a></p>
107         </div>
108     </footer>
109 </body>

Base CSS styles

01 /* base styles */
02 body {
03     backgroundnone repeat scroll 0 0 #E5DEC2;
04     color#B38466;
05     font-familyArial,Helvetica,sans-serif;
06     font-size75%;
07     line-height1.5em;
08     margin0;
09     positionrelative;
10 }
11 a {
12     color#A16641;
13     text-decorationnone;
14 }
15 a:hover,a:active {
16     color#A16641;
17     text-decorationunderline;
18 }
19 img {
20     border:0 none;
21     margin:0;
22     vertical-align:top;
23     -webkit-transition: all 0.3s ease;
24     -moz-transition: all 0.3s ease;
25     -o-transition: all 0.3s ease;
26 }
27 a:hover img {
28     opacity:.9;
29 }

Header section (the header, navigation menu and three banners)

header area

First three elements – header area, navigation menu and banners. Html markup:

01 <header><!-- Define the header section of the page -->
02     <div class="head_menus">
03         <div class="menu"><!-- Define the topest menu -->
04             <ul>
05                 <li><a href="#">Home</a></li>
06                 <li><a href="#">What's New?</a></li>
07                 <li><a href="#">Featured</a></li>
08                 <li><a href="#">Top sells</a></li>
09                 <li><a href="#">Specials</a></li>
10                 <li><a href="#">Extra</a></li>
11                 <li><a href="#">Reviews</a></li>
12                 <li><a href="#">Contacts</a></li>
13             </ul>
14         </div>
15         <div class="box_currencies"><!-- Define currency switcher -->
16             <select class="select" name="currency">
17                 <option value="USD">US dollar</option>
18                 <option value="EUR">Euro</option>
19             </select>
20         </div>
21         <div class="search"><!-- Define the search element -->
22             <form method="get" action="#">
23                 <input type="text" onfocus="if(this.value =='Search' ) this.value=''" onblur="if(this.value=='') this.value='Search'" maxlength="300" size="10" value="Search" name="s">
24                 <input type="image" alt="" src="images/search_btn.gif">
25             </form>
26         </div>
27     </div>
28     <div class="logo"><!-- Define the logo element -->
29         <a href="https://www.script-tutorials.com/">
30             <h1>My Retro Shop</h1>
31             <h3>Choose your favorite</h3>
32         </a>
33     </div>
34 </header>
35 <nav><!-- Define the navigation menu -->
36     <div>
37         <ul class="sf-menu">
38             <li><a href="#">Menu 1</a>
39                 <ul>
40                     <li><a href="#">Submenu 1</a></li>
41                     <li><a href="#">Submenu 2</a></li>
42                     <li><a href="#">Submenu 3</a></li>
43                     <li><a href="#">Submenu 4</a></li>
44                 </ul>
45             </li>
46             <li><a href="#">Menu 2</a>
47                 <ul>
48                     <li><a href="#">Submenu 21</a></li>
49                     <li><a href="#">Submenu 22</a>
50                         <ul>
51                             <li><a href="#">Submenu a</a></li>
52                             <li><a href="#">Submenu b</a>
53                                 <ul>
54                                     <li><a href="#">Submenu e</a></li>
55                                     <li><a href="#">Submenu f</a></li>
56                                     <li><a href="#">Submenu g</a></li>
57                                     <li><a href="#">Submenu h</a></li>
58                                 </ul>
59                             </li>
60                             <li><a href="#">Submenu c</a></li>
61                             <li><a href="#">Submenu d</a></li>
62                         </ul>
63                     </li>
64                     <li><a href="#">Submenu 23</a></li>
65                     <li><a href="#">Submenu 24</a></li>
66                 </ul>
67             </li>
68             <li><a href="#">Menu 3</a>
69                 <ul>
70                     <li><a href="#">Submenu 31</a></li>
71                     <li><a href="#">Submenu 32</a></li>
72                     <li><a href="#">Submenu 33</a></li>
73                     <li><a href="#">Submenu 34</a></li>
74                 </ul>
75             </li>
76             <li><a href="#">Menu 4</a>
77                 <ul>
78                     <li><a href="#">Submenu 41</a></li>
79                     <li><a href="#">Submenu 42</a></li>
80                     <li><a href="#">Submenu 43</a></li>
81                     <li><a href="#">Submenu 44</a></li>
82                 </ul>
83             </li>
84             <li><a href="#">Menu 5</a></li>
85             <li><a href="#">Menu 6</a></li>
86             <li><a href="#">Menu 7</a></li>
87             <li><a href="#">Menu 8</a></li>
88             <li><a href="#">Menu 9</a></li>
89         </ul>
90     </div>
91 </nav>
92 <section id="banners"><!-- Banners section -->
93     <ul>
94         <li><a href="#"><img alt="" src="images/b1.png"></a></li>
95         <li><a href="#"><img alt="" src="images/b2.png"></a></li>
96         <li><a href="#"><img alt="" src="images/b3.png"></a></li>
97     </ul>
98 </section>

CSS styles:

001 /* header section */
002 header {
003     backgroundurl("../images/head.gif"repeat-x scroll 0 0 transparent;
004     position:relative;
005 }
006 .logo {
007     margin30px auto;
008     positionrelative;
009     text-aligncenter;
010     width940px;
011 }
012 .logo a {
013     text-decorationnone;
014 }
015 .logo h1 {
016     color#B53D25;
017     font-family'Oswald',bold;
018     font-size44px;
019     height44px;
020     line-height44px;
021     margin-bottom10px;
022 }
023 .logo h3 {
024     color#7D4022;
025     font-family'Yellowtail',cursive;
026     font-size38px;
027     height38px;
028     line-height38px;
029 }
030 #search {
031     positionabsolute;
032     right40px;
033     top40px;
034 }
035 #search form input[type="text"] {
036     border1px solid #e3e3e3;
037     color#343434;
038     padding7px 30px 6px 10px;
039     width222px;
040 }
041 #search form input[type="submit"] {
042     backgroundurl(../images/search_btn.png) no-repeat 0 0;
043     bordernone;
044     cursorpointer;
045     height13px;
046     margin0;
047     padding-left0;
048     padding-right0;
049     positionabsolute;
050     right10px;
051     top8px;
052     width13px;
053 }
054 /*head menus*/
055 .head_menus {
056 margin:0 auto;
057 overflow:hidden;
058 width:940px;
059 }
060 .head_menus .menu {
061 float:left;
062 font-weight:400;
063 }
064 .menu ul {
065 float:left;
066 list-style:none outside none;
067 margin:0;
068 padding:0;
069 }
070 .menu li {
071 float:left;
072 margin:0;
073 padding:0;
074 }
075 .menu li a {
076 border:1px solid transparent;
077 border-width:0 1px;
078 color:#f1eddd;
079 display:inline-block;
080 font-family:'Oswald'sans-serif;
081 font-weight:400;
082 padding:6px 8px 9px;
083 text-decoration:none;
084 }
085 .menu li.act a,.menu li:hover a {
086 background:url('../images/menu_act.gif'100% 0 repeat-x transparent;
087 border:1px solid #4bb2a8;
088 border-width:0 1px;
089 color:#f1eddd;
090 text-decoration:none;
091 }
092 /* and rest elements */
093 .box_currencies {
094 float:right;
095 line-height:33px;
096 }
097 .box_currencies select {
098 background:url("../images/cur_arrow.gif"no-repeat scroll right top transparent;
099 border:none;
100 height:20px;
101 width:88px;
102 }
103 .search {
104 float:right;
105 line-height:33px;
106 margin-right:20px;
107 }
108 .search form {
109 display:inline-block;
110 overflow:hidden;
111 vertical-align:middle;
112 }
113 .search input[type=text] {
114 background:url("../images/search_input_bg.gif"no-repeat scroll 0 0 transparent;
115 border:0 none;
116 color:#AC9076;
117 float:left;
118 font-size:1.2em;
119 margin:0;
120 padding:4px;
121 position:relative;
122 width:160px;
123 }
124 .search input[type=image] {
125 border:0;
126 float:left;
127 width:23px;
128 }
129 /*navigation menu*/
130 nav {
131 backgroundurl("../images/nav.png"no-repeat scroll 50% 0 transparent;
132 }
133 nav > div {
134 margin0 auto;
135 min-height62px;
136 padding-top0;
137 width940px;
138 z-index999;
139 }
140 .sf-menu,.sf-menu * {
141 list-style:none;
142 margin:0;
143 padding:0;
144 }
145 .sf-menu {
146 line-height:1.0;
147 }
148 .sf-menu ul {
149 background:url('../images/sf-menu.gif'0 0 repeat transparent;
150 position:absolute;
151 top:-999em;
152 width:11.6338em;
153 }
154 .sf-menu > li ul {
155 padding:1em 1.8181em;
156 }
157 .sf-menu ul ul {
158 margin-top:7px;
159 }
160 .sf-menu ul li {
161 width:100%;
162 }
163 .sf-menu li:hover {
164 visibility:inherit;
165 }
166 .sf-menu li {
167 float:left;
168 position:relative;
169 }
170 .sf-menu a {
171 display:block;
172 position:relative;
173 }
174 .sf-menu li:hover ul, .sf-menu li.sfHover ul {
175 left:0;
176 top:5.2em;
177 z-index:99;
178 }
179 ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
180 top:-999em;
181 }
182 ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
183 left:13.4419em;
184 top:0;
185 }
186 ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
187 top:-999em;
188 }
189 ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
190 left:13.4519em;
191 top:0;
192 }
193 .sf-menu {
194 margin-bottom:0;
195 margin-left:18px;
196 }
197 #header .sf-menu a {
198 color:#FFF;
199 font-weight:700;
200 padding:.80em 2em;
201 text-decoration:none;
202 }
203 .sf-menu > li > a {
204 color:#f1eddd;
205 display:none;
206 font-size:1.7em;
207 font-weight:400;
208 margin:0 6px;
209 padding:16px 13px 20px;
210 text-decoration:none;
211 }
212 .sf-menu > li > a.current,.sf-menu > li > a:hover {
213 color:#f1eddd;
214 text-decoration:none;
215 }
216 .sf-menu .sfHover li a:hover {
217 color:#fefefe;
218 }
219 .sf-menu .sfHover a,.sf-menu a,.sf-menu a:hover,.sf-menu .sfHover li a,.sf-menu > li li > a:hover {
220 color:#fff;
221 text-decoration:none;
222 }
223 .sf-menu > li li > a:hover,.sf-menu > li li:hover > a.current {
224 color:#fefefe;
225 font-weight:400;
226 }
227 .sf-menu .sfHover li a,.sf-menu > li li > a {
228 background:transparent;
229 background-position:1px 4px;
230 color:#c6a37e;
231 font-size:1em;
232 padding:6px 0 7px;
233 }
234 .sf-menu > li li:hover > a.current,.sf-menu > li li > a:hover {
235 background-position:1px -31px;
236 }
237 .sf-menu > li {
238 background:url('../images/sf-menu_divider.png'0 27px no-repeat transparent;
239 }
240 .sf-menu > li.first {
241 background:none;
242 }
243 .sf-menu > li:hover > a {
244 color:#f7f189;
245 }
246 .sf-menu li li {
247 background:url('../images/sf-menu_li.gif'0 100% repeat-x transparent;
248 border-bottom:0 solid #242424;
249 }
250 .sf-menu li li.last {
251 background:none;
252 border-bottom:0 solid #2d2d2d;
253 }
254 .sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
255 outline:0;
256 }
257 .sf-menu a.sf-with-ul {
258 min-width:1px;
259 padding-right:25px;
260 }
261 .sf-sub-indicator2 {
262 height:10px;
263 width:17px;
264 }
265 .sf-sub-indicator {
266 height:10px;
267 width:10px;
268 }
269 .sf-sub-indicator2,.sf-sub-indicator {
270 background:url('../images/superfish-arrows.png'no-repeat;
271 display:block;
272 overflow:hidden;
273 position:absolute;
274 right:0;
275 text-indent:-999em;
276 top:1.05em;
277 z-index:100;
278 }
279 li > .sf-sub-indicator2 {
280 right:50%;
281 top:53px;
282 }
283 .sf-menu > li a > .sf-sub-indicator {
284 right:5px;
285 top:25px;
286 }
287 .sf-menu > li li a > .sf-sub-indicator {
288 right:-15px;
289 top:7px;
290 }
291 li li a > .sf-sub-indicator {
292 right:5px;
293 top:7px;
294 }
295 a:focus > .sf-sub-indicator,
296 a:hover > .sf-sub-indicator,
297 a:active > .sf-sub-indicator {
298 background-position:0px -20px;
299 }
300 a > .sf-sub-indicator {
301 background-position:0px -30px;
302 }
303 .sf-menu ul .sf-sub-indicator {
304 background-position:0 -30px;
305 }
306 .sf-menu ul a > .sf-sub-indicator {
307 background-position:0 0;
308 }
309 .sf-menu ul li:hover > a > .sf-sub-indicator {
310 background-position:0 -10px;
311 }
312 .sf-shadow ul {
313 padding:5px 0 12px;
314 }
315 .sf-shadow ul.sf-shadow-off {
316 background:transparent;
317 }
318 .sf-sub-indicator2 {
319 display:none;
320 }
321 .wf-inactive .sf-menu > li > a {
322 display:none;
323 font-family:serif;
324 font-size:0;
325 }
326 .wf-active .sf-menu > li > a {
327 display:block;
328 font-family:'Yellowtail'cursive;
329 font-size:1.915em;
330 }
331 /* banners section */
332 section#banners {
333     margin0 auto;
334     width940px;
335 }
336 section#banners ul {
337     list-stylenone outside none;
338     margin0;
339     overflowhidden;
340     padding0;
341 }
342 section#banners ul  li {
343     displayblock;
344     floatleft;
345     margin0 5px 15px;
346     padding0;
347 }

Main content section

After – the central main content area. This is the biggest area which contains three sections: the list of products with floating left to right (with small thumbnail), small breadcrumb section and third section consists of 2 columns (in the first column we can put something small, as example – the tags block), at the right side we can put the list of products with detailed description.

Main content area

001 <section id="content"><!-- Define the content section -->
002     <div class="dbox">
003         <div class="head">Popular products</div>
004         <div class="list">
005             <ul>
006                 <li>
007                     <a href="#">
008                         <img src="images/coin.png" />
009                         <span class="title">Item title</span>
010                         <span class="price"><p>$10.00</p></span>
011                         <div class="but"><p>Add to Cart</p><p></p></div>
012                     </a>
013                 </li>
014                 <li class="vsep"></li>
015                 <li>
016                     <a href="#">
017                         <img src="images/coin2.png" />
018                         <span class="title">Item title</span>
019                         <span class="price"><p>$15.00</p><del>$35.00</del></span>
020                         <div class="but"><p>Add to Cart</p><p></p></div>
021                     </a>
022                 </li>
023                 <li class="vsep"></li>
024                 <li>
025                     <a href="#">
026                         <img src="images/coin.png" />
027                         <span class="title">Item title</span>
028                         <span class="price"><p>$20.00</p></span>
029                         <div class="but"><p>Add to Cart</p><p></p></div>
030                     </a>
031                 </li>
032                 <li class="vsep"></li>
033                 <li>
034                     <a href="#">
035                         <img src="images/coin2.png" />
036                         <span class="title">Item title</span>
037                         <span class="price"><p>$25.00</p></span>
038                         <div class="but"><p>Add to Cart</p><p></p></div>
039                     </a>
040                 </li>
041                 <li class="vsep"></li>
042                 <li>
043                     <a href="#">
044                         <img src="images/coin.png" />
045                         <span class="title">Item title</span>
046                         <span class="price"><p>$30.00</p></span>
047                         <div class="but"><p>Add to Cart</p><p></p></div>
048                     </a>
049                 </li>
050             </ul>
051         </div>
052     </div>
053 </section>
054 <section id="breadcrumb"><!-- Define the breadcrumb section -->
055     <div class="breadcrumb">
056         <a class="headerNavigation" href="#">Top</a> »
057         <a class="headerNavigation" href="#">Catalog</a> »
058         <a class="headerNavigation last" href="#">Coins</a>
059     </div>
060 </section>
061 <section id="content"><!-- Define the content #2 section -->
062     <div class="col1">
063         <div class="dbox">
064             <div class="head">Tag Cloud</div>
065             <div class="tags">
066                 <ul>
067                     <li><a href="#">Tag 1</a></li>
068                     <li><a href="#">Tag 2</a></li>
069                     <li><a href="#">Tag 3</a></li>
070                     <li><a href="#">Tag 4</a></li>
071                     <li><a href="#">Tag 5</a></li>
072                     <li><a href="#">Tag 6</a></li>
073                     <li><a href="#">Tag 7</a></li>
074                     <li><a href="#">Tag 8</a></li>
075                     <li><a href="#">Tag 9</a></li>
076                     <li><a href="#">Tag 10</a></li>
077                 </ul>
078             </div>
079         </div>
080     </div>
081     <div class="col2">
082         <div class="dbox">
083             <div class="head">Another products</div>
084             <div class="blist">
085                 <ul>
086                     <li>
087                         <div class="img">
088                         <a href="#">
089                             <img src="images/coin3.png" />
090                         </a>
091                         </div>
092                         <div class="desc">
093                             <div class="d"><span>Date Added:</span> Thursday 27 March, 2012</div>
094                             <h2><a href="#">Coin title 1</a></h2>
095                             <div class="d">Price: <div class="price">$39.99</div></div>
096                             <div class="d">Some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here</div>
097                             <div>
098                                 <div class="but"><p>Details</p><p></p></div>
099                                 <div class="but"><p>Add to Cart</p><p></p></div>
100                             </div>
101                         </div>
102                     </li>
103                     <li class="sep"></li>
104                     <li>
105                         <div class="img">
106                         <a href="#">
107                             <img src="images/coin4.png" />
108                         </a>
109                         </div>
110                         <div class="desc">
111                             <div class="d"><span>Date Added:</span> Monday 26 March, 2012</div>
112                             <h2><a href="#">Coin title 2</a></h2>
113                             <div class="d">Price: <div class="price">$49.99</div></div>
114                             <div class="d">Some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here some text description here</div>
115                             <div>
116                                 <div class="but"><p>Details</p><p></p></div>
117                                 <div class="but"><p>Add to Cart</p><p></p></div>
118                             </div>
119                         </div>
120                     </li>
121                 </ul>
122             </div>
123         </div>
124     </div>
125 </section>

CSS styles

001 /* main section */
002 .col1 {
003     floatleft;
004     margin-right15px;
005     overflowhidden;
006     width300px;
007 }
008 .col2 {
009     floatleft;
010     overflowhidden;
011     width625px;
012 }
013 section#content {
014     margin0 auto;
015     overflowhidden;
016     width940px;
017 }
018 .dbox {
019     backgroundurl("../images/box_title.jpg"repeat-y scroll 0 0 transparent;
020     border1px solid #F1EDDD;
021     box-shadow: 0 0 3px #B2AC9C;
022     overflowhidden;
023 }
024 .dbox .head {
025     color#7D4022;
026     font-family'Yellowtail',cursive;
027     font-size2.09em;
028     padding15px 10px 12px 13px;
029 }
030 .dbox .list, .dbox .blist {
031     backgroundurl("../images/box_bg.jpg"repeat-x scroll 0 0 #F1EDDD;
032 }
033 .dbox .list ul, .dbox .blist ul {
034     list-stylenone outside none;
035     margin0;
036     overflowhidden;
037     padding0;
038 }
039 /* list type 1 */
040 .dbox .list ul li {
041     floatleft;
042     height285px;
043     margin7px;
044     width150px;
045 }
046 .dbox .list ul li:first-child {
047     margin-left15px;
048 }
049 .dbox .list ul li span {
050     displayblock;
051     text-aligncenter;
052     text-decorationnone;
053 }
054 .dbox .list ul li a:hover {
055     text-decorationnone;
056 }
057 .dbox .list ul li span p {
058     display: inline-block;
059     float:left;
060     font-size2.9em;
061 }
062 .dbox .list ul li span.price {
063     color#B53D25;
064     font-family'Yellowtail',cursive;
065     height28px;
066     line-height28px;
067     overflowhidden;
068     padding0 8px;
069 }
070 .dbox .list ul li span del {
071     color#4FA99B;
072     display: inline-block;
073     float:right;
074     font-size1.9em;
075 }
076 .dbox .list ul li div.but {
077     overflowhidden;
078     padding7px;
079 }
080 .dbox .list ul li div.but p {
081     backgroundurl("../images/buttons.gif"no-repeat scroll 100% 0 transparent;
082     floatleft;
083     height35px;
084     width16px;
085 }
086 .dbox .list ul li div.but p:first-child {
087     backgroundurl("../images/buttons.gif"no-repeat scroll 0 0 transparent;
088     color#F1EDDD;
089     cursorpointer;
090     display: inline-block;
091     floatleft;
092     font-family'Oswald',sans-serif;
093     font-size1.35em;
094     font-weightnormal;
095     height25px;
096     line-height1em;
097     padding5px 10px;
098     positionrelative;
099     text-aligncenter;
100     text-decorationnone;
101     white-spacenowrap;
102     widthauto;
103 }
104 .dbox .list ul li .but:hover p {
105     background-position100% 100%;
106 }
107 .dbox .list ul li .but:hover p:first-child {
108     background-position0 100%;
109 }
110 .dbox .list ul li.vsep {
111     backgroundurl("../images/vsep.gif"repeat-y scroll 50% 0 transparent;
112     display: inline-block;
113     floatleft;
114     min-height285px;
115     positionrelative;
116     width10px;
117 }
118 /* list type 2 */
119 .dbox .blist ul li {
120     margin10px;
121     overflowhidden;
122 }
123 .dbox .blist ul li .img {
124     floatleft;
125     height200px;
126     width200px;
127 }
128 .dbox .blist ul li img {
129     height200px;
130     width200px;
131 }
132 .dbox .blist ul li .desc {
133     floatleft;
134     margin-left15px;
135     width385px;
136 }
137 .dbox .blist ul li .desc .d {
138     border-bottom1px solid #B99A83;
139     padding7px 0 11px;
140     text-alignleft;
141 }
142 .dbox .blist ul li .desc span {
143     color#7D4022;
144     font-weightbold;
145 }
146 .dbox .blist ul li .desc h2 {
147     font-size18px;
148     line-height1.3em;
149     padding11px 0 10px;
150     text-alignleft;
151 }
152 .dbox .blist ul li .desc .d .price {
153     color#B53D25;
154     display: inline-block;
155     font-family'Yellowtail',cursive;
156     font-size2.9em;
157     height35px;
158     line-height35px;
159     margin-left10px;
160 }
161 .dbox .blist ul li div.but {
162     floatleft;
163     overflowhidden;
164     padding7px;
165 }
166 .dbox .blist ul li div.but p {
167     backgroundurl("../images/buttons.gif"no-repeat scroll 100% 0 transparent;
168     floatleft;
169     height35px;
170     width16px;
171 }
172 .dbox .blist ul li div.but p:first-child {
173     backgroundurl("../images/buttons.gif"no-repeat scroll 0 0 transparent;
174     color#F1EDDD;
175     cursorpointer;
176     display: inline-block;
177     floatleft;
178     font-family'Oswald',sans-serif;
179     font-size1.35em;
180     font-weightnormal;
181     height25px;
182     line-height1em;
183     padding5px 10px;
184     positionrelative;
185     text-aligncenter;
186     text-decorationnone;
187     white-spacenowrap;
188     widthauto;
189 }
190 .dbox .blist ul li .but:hover p {
191     background-position100% 100%;
192 }
193 .dbox .blist ul li .but:hover p:first-child {
194     background-position0 100%;
195 }
196 .dbox .blist ul li.vsep {
197     backgroundurl("../images/vsep.gif"repeat-y scroll 50% 0 transparent;
198     display: inline-block;
199     floatleft;
200     min-height285px;
201     positionrelative;
202     width10px;
203 }
204 .dbox .blist ul li.sep {
205     backgroundurl("../images/hsep.gif"repeat-x scroll 0 50% transparent;
206     height10px;
207 }
208 /* tags */
209 .dbox .tags {
210     backgroundurl("../images/box_bg.jpg"repeat-x scroll 0 0 #F1EDDD;
211 }
212 .dbox .tags ul {
213     list-stylenone outside none;
214     margin0;
215     overflowhidden;
216     padding0;
217 }
218 .dbox .tags ul li {
219     border1px solid #A8998C;
220     border-radius: 5px 5px 5px 5px;
221     display: inline-block;
222     floatleft;
223     font-family'Oswald',sans-serif;
224     margin5px;
225     padding3px 10px;
226     border-radius:5px;
227     -moz-border-radius:5px;
228     -ms-border-radius:5px;
229     -o-border-radius:5px;
230     -webkit-border-radius:5px;
231 }
232 .dbox .tags ul li:hover {
233     background-color#e9e5d5;
234     text-decorationnone;
235 }
236 .dbox .tags ul li a:hover {
237     text-decorationnone;
238 }
239 /* breadcrumb section */
240 section#breadcrumb {
241     margin0 auto;
242     width940px;
243 }
244 .breadcrumb {
245     font-size1.3em;
246     padding16px 0;
247 }

Footer section

Finally – the smallest footer area:

footer area

01 <footer><!-- Define the footer section of the page -->
02     <div>
03         <ul>
04             <li><a href="#">Home</a></li>
05             <li><a href="#">What's New?</a></li>
06             <li><a href="#">Featured</a></li>
07             <li><a href="#">Top sells</a></li>
08             <li><a href="#">Specials</a></li>
09             <li><a href="#">Extra</a></li>
10             <li><a href="#">Reviews</a></li>
11             <li><a href="#">Contacts</a></li>
12         </ul>
13         <p class="link"><a href="https://www.script-tutorials.com/">Template by Script Tutorials</a></p>
14     </div>
15 </footer>

CSS styles

01 /* footer section */
02 footer > div {
03     border-top1px solid #D7C6A8;
04     margin20px auto 0;
05     padding15px 0 0;
06     positionrelative;
07     width940px;
08 }
09 footer ul {
10     list-stylenone outside none;
11     overflowhidden;
12 }
13 footer ul li {
14     floatleft;
15 }
16 footer ul li a {
17     display: inline-block;
18     margin0 20px 10px 0;
19 }
20 footer ul li a {
21     color#A16641;
22     font-weightnormal;
23     text-decorationnone;
24 }
25 footer .link {
26     text-alignright;
27 }

JS for our template

Here are all necessary javascripts:

html5.js, jquery.js and superfish.js

All these libraries are in our package


Live Demo
download result

Conclusion

Congrats, our new template ‘Retro shop’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks 🙂 Good luck!