Today I want to introduce new great masterpiece – new template with codename: ‘E-Store’. This will nice HTML5/CSS3 template with nice light gray colors. This is template for online stores. Hope that you will like new styles and you will learn some new design methods.
I going to start step-by-step tutorial for creating html5-css3 layout.
Final Result
Live Demo
[sociallocker]
download result
[/sociallocker]
Get started
Ok, let`s start. Lets create new folder and several folders inside (to keep all well structured):
- css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css)
- images – which will contain all used images
- js – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js)
Head section code
Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.
01 |
<!DOCTYPE html> |
02 |
<html lang="en"><head> |
03 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
04 |
<title>E-Store single page layout | Script Tutorials</title> |
05 |
<meta charset="utf-8"> |
06 |
<!-- Linking styles --> |
07 |
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> |
08 |
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> |
09 |
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"> |
10 |
<!-- Linking scripts --> |
11 |
<script src="js/jquery.js"></script> |
12 |
<script src="js/jquery.nivo.slider.pack.js"></script> |
13 |
<script src="js/main.js"></script> |
14 |
<!--[if lt IE 9]> |
15 |
<script type="text/javascript" src="js/html5.js"></script> |
16 |
<![endif]--> |
17 |
</head> |
Moving forward – Main layout (body)
Whole layout consist of 4 main section: header (with navigation menu, logo, search form, social icons, plus submenu with categories), slider section (nivoSlider), main content section (two column layout for all your rest content) and footer (with copyrights). It looks like:
01 |
<body> |
02 |
<div class="container"> |
03 |
<header><!-- Defining the header section of the page --> |
04 |
<nav><!-- Defining the navigation menu --> |
05 |
<ul> |
06 |
<li class="selected"><a href="#">Home</a></li> |
07 |
<li><a href="#">Specials</a></li> |
08 |
....... |
09 |
</ul> |
10 |
</nav> |
11 |
<div class="top_head"><!-- Defining the top head element --> |
12 |
<div class="logo"><!-- Defining the logo element --> |
13 |
<a href="https://www.script-tutorials.com/"> |
14 |
<img src="images/logo.jpg" title="E-Store template" alt="E-Store template" /> |
15 |
</a> |
16 |
</div> |
17 |
<section id="search"><!-- Search form --> |
18 |
<form action="#" onsubmit="return false;" method="get"> |
19 |
....... |
20 |
</form> |
21 |
<ul id="social"><!-- Social profiles links --> |
22 |
....... |
23 |
</ul> |
24 |
</section> |
25 |
</div> |
26 |
<section id="submenu"><!-- Defining the sub menu --> |
27 |
<ul> |
28 |
<li><a href="#">Category #1</a></li> |
29 |
<li><a href="#">Category #2</a></li> |
30 |
....... |
31 |
</ul> |
32 |
</section> |
33 |
</header> |
34 |
<div id="slider"><!-- Defining the main content section --> |
35 |
<!-- Promo slider --> |
36 |
<section id="slider-wrapper"> |
37 |
....... |
38 |
</section> |
39 |
</div> |
40 |
<div id="main"><!-- Defining submain content section --> |
41 |
<section id="content"><!-- Defining the content section #2 --> |
42 |
<div id="left"> |
43 |
<h3>Last products</h3> |
44 |
<ul> |
45 |
............ |
46 |
</ul> |
47 |
</div> |
48 |
<div id="right"> |
49 |
<h3>Top sells</h3> |
50 |
<ul> |
51 |
............ |
52 |
</ul> |
53 |
</div> |
54 |
</section> |
55 |
</div> |
56 |
<footer><!-- Defining the footer section of the page --> |
57 |
<div id="privacy"> |
58 |
</div> |
59 |
</footer> |
60 |
</div> |
61 |
</body> |
here are you can see base CSS styles
01 |
/* base styles */ |
02 |
* { |
03 |
margin: 0; |
04 |
padding: 0; |
05 |
} |
06 |
body { |
07 |
background: url("../images/body-bg.jpg") no-repeat fixed center top #FFFFFF; |
08 |
color: #7F7F7F; |
09 |
font-family: Arial,Helvetica,sans-serif; |
10 |
font-size: 12px; |
11 |
line-height: 17px; |
12 |
} |
13 |
img { |
14 |
border: 0 none; |
15 |
} |
16 |
.container { |
17 |
margin:30px auto 0; |
18 |
position:relative; |
19 |
text-align:left; |
20 |
width:1000px; |
21 |
padding-left: 20px; |
22 |
padding-right: 20px; |
23 |
} |
Header section with nav menu, logo, search bar, submenu etc
Here are HTML for this section:
01 |
<header><!-- Defining the header section of the page --> |
02 |
<nav><!-- Defining the navigation menu --> |
03 |
<ul> |
04 |
<li class="selected"><a href="#">Home</a></li> |
05 |
<li><a href="#">Specials</a></li> |
06 |
<li><a href="#">All Products</a></li> |
07 |
<li><a href="#">Contact us</a></li> |
08 |
<li><a href="#">About</a></li> |
09 |
<li><a href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Back To Tutorial</a></li> |
10 |
</ul> |
11 |
</nav> |
12 |
<div class="top_head"><!-- Defining the top head element --> |
13 |
<div class="logo"><!-- Defining the logo element --> |
14 |
<a href="https://www.script-tutorials.com/"> |
15 |
<img src="images/logo.jpg" title="E-Store template" alt="E-Store template" /> |
16 |
</a> |
17 |
</div> |
18 |
<section id="search"><!-- Search form --> |
19 |
<form action="#" onsubmit="return false;" method="get"> |
20 |
<input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q"> |
21 |
<input type="submit" value="Search"> |
22 |
</form> |
23 |
<ul id="social"><!-- Social profiles links --> |
24 |
<li><a href="#" title="facebook" rel="external nofollow"><img alt="" src="images/facebook.png"></a></li> |
25 |
<li><a href="#" title="twitter" rel="external nofollow"><img alt="" src="images/twitter.png"></a></li> |
26 |
<li><a href="#" title="linkedin" rel="external nofollow"><img alt="" src="images/linkedin.png"></a></li> |
27 |
<li><a href="#" title="rss" rel="external nofollow"><img alt="" src="images/rss.png"></a></li> |
28 |
</ul> |
29 |
</section> |
30 |
</div> |
31 |
<section id="submenu"><!-- Defining the sub menu --> |
32 |
<ul> |
33 |
<li><a href="#">Category #1</a></li> |
34 |
<li><a href="#">Category #2</a></li> |
35 |
<li><a href="#">Category #3</a></li> |
36 |
<li><a href="#">Category #4</a></li> |
37 |
<li><a href="#">Category #5</a></li> |
38 |
<li><a href="#">Category #6</a></li> |
39 |
</ul> |
40 |
</section> |
41 |
</header> |
CSS for header section
001 |
/* header section */ |
002 |
header { |
003 |
background: url("../images/header-bg.png") repeat scroll left top #fff; |
004 |
border-bottom:2px solid #e0e0e0; |
005 |
position: relative; |
006 |
z-index: 10; |
007 |
} |
008 |
.top_head { |
009 |
overflow: hidden; |
010 |
position: relative; |
011 |
} |
012 |
.logo { |
013 |
float: left; |
014 |
padding: 37px 0 0 39px; |
015 |
} |
016 |
#search { |
017 |
float: right; |
018 |
margin: 21px 41px 0 0; |
019 |
text-align: right; |
020 |
} |
021 |
#search form { |
022 |
float:right; |
023 |
} |
024 |
#search form input[type="text"] { |
025 |
background: none repeat scroll 0 0 #FFFFFF; |
026 |
border: 1px solid #E0E0E0; |
027 |
float: left; |
028 |
font-family: Arial,Helvetica,sans-serif; |
029 |
height: 15px; |
030 |
padding: 5px; |
031 |
width: 129px; |
032 |
} |
033 |
#search form input[type="submit"] { |
034 |
background-color: #FFFFFF; |
035 |
border: 1px solid #E0E0E0; |
036 |
border-left-width:0px; |
037 |
color: #383838; |
038 |
cursor:pointer; |
039 |
float: left; |
040 |
font-family: Arial,Helvetica,sans-serif; |
041 |
font-size: 11px; |
042 |
font-weight: bold; |
043 |
height: 27px; |
044 |
padding: 0; |
045 |
width: 64px; |
046 |
} |
047 |
#social { |
048 |
float:right; |
049 |
list-style:none outside none; |
050 |
margin:0 30px 0 0; |
051 |
padding:0; |
052 |
} |
053 |
#social li { |
054 |
float:left; |
055 |
padding:0 0 0 5px; |
056 |
} |
057 |
#social li a:hover img { |
058 |
margin-top:1px; |
059 |
} |
060 |
/*navigation menu*/ |
061 |
nav { |
062 |
background-color:#00942f; |
063 |
overflow: hidden; |
064 |
} |
065 |
nav ul { |
066 |
margin: 0; |
067 |
padding: 0; |
068 |
} |
069 |
nav ul li { |
070 |
float: left; |
071 |
} |
072 |
nav ul li a { |
073 |
color: #FFFFFF; |
074 |
display: block; |
075 |
font-size: 11px; |
076 |
font-weight: bold; |
077 |
height: 20px; |
078 |
line-height: 20px; |
079 |
padding: 4px 10px 4px 11px; |
080 |
position: relative; |
081 |
text-decoration: none; |
082 |
text-transform: uppercase; |
083 |
} |
084 |
nav ul li a:hover, nav ul li.selected a { |
085 |
background: none repeat scroll 0 0 #353535; |
086 |
} |
087 |
#submenu { |
088 |
background: -moz-linear-gradient(#ffffff, #f6f6f6); /* FF 3.6+ */ |
089 |
background: -ms-linear-gradient(#ffffff, #f6f6f6); /* IE10 */ |
090 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6)); /* Safari 4+, Chrome 2+ */ |
091 |
background: -webkit-linear-gradient(#ffffff, #f6f6f6); /* Safari 5.1+, Chrome 10+ */ |
092 |
background: -o-linear-gradient(#ffffff, #f6f6f6); /* Opera 11.10 */ |
093 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* IE6 & IE7 */ |
094 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6')"; /* IE8+ */ |
095 |
background: linear-gradient(#ffffff, #f6f6f6); /* the standard */ |
096 |
border: 1px solid #E0E0E0; |
097 |
height: 34px; |
098 |
margin: 20px 40px; |
099 |
} |
100 |
#submenu ul { |
101 |
margin: 0; |
102 |
padding: 0; |
103 |
} |
104 |
#submenu li { |
105 |
float: left; |
106 |
line-height: 1em; |
107 |
list-style: none outside none; |
108 |
margin: 0; |
109 |
position: relative; |
110 |
} |
111 |
#submenu li a { |
112 |
background: url("../images/smenup.png") no-repeat scroll 0 9px transparent; |
113 |
border-right: 1px solid #E0E0E0; |
114 |
color: #383838; |
115 |
display: block; |
116 |
font-size: 12px; |
117 |
font-weight: bold; |
118 |
line-height: 14px; |
119 |
margin: 0 0 0 19px; |
120 |
padding: 9px 18px 11px 24px; |
121 |
text-decoration: none; |
122 |
text-transform: uppercase; |
123 |
} |
124 |
#submenu li a:hover { |
125 |
background-image: url("../images/smenua.png"); |
126 |
} |
Slider and Main content section
After our header area – we have next two areas – slider (nivoSlider) and main content area.
001 |
<div id="slider"><!-- Defining the main content section --> |
002 |
<!-- Promo slider --> |
003 |
<section id="slider-wrapper"> |
004 |
<div id="slider" class="nivoSlider"> |
005 |
<img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1"> |
006 |
<img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2"> |
007 |
<img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3"> |
008 |
</div> |
009 |
<div id="htmlcaption-1" class="nivo-html-caption"> |
010 |
<h5 class="p2">Welcome to the our E-Shop</h5> |
011 |
<p>Put any description here</p> |
012 |
</div> |
013 |
<div id="htmlcaption-1" class="nivo-html-caption"> |
014 |
<h5 class="p2">This is promo area</h5> |
015 |
<p>Put any description here</p> |
016 |
</div> |
017 |
<div id="htmlcaption-2" class="nivo-html-caption"> |
018 |
<h5 class="p2">Where you can add any feature products</h5> |
019 |
<p>Put any description here</p> |
020 |
</div> |
021 |
<div id="htmlcaption-3" class="nivo-html-caption"> |
022 |
<h5 class="p2">Or something else</h5> |
023 |
<p>Put any description here</p> |
024 |
</div> |
025 |
</section> |
026 |
</div> |
027 |
<div id="main"><!-- Defining submain content section --> |
028 |
<section id="content"><!-- Defining the content section #2 --> |
029 |
<div id="left"> |
030 |
<h3>Last products</h3> |
031 |
<ul> |
032 |
<li> |
033 |
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div> |
034 |
<div class="info"> |
035 |
<a class="title" href="#">Product 1</a> |
036 |
<p>long description here 1</p> |
037 |
<div class="price"> |
038 |
<span class="st">Our price:</span><strong>$550.00</strong> |
039 |
</div> |
040 |
<div class="actions"> |
041 |
<a href="#">Details</a> |
042 |
<a href="#">Add to cart</a> |
043 |
</div> |
044 |
</div> |
045 |
</li> |
046 |
<li> |
047 |
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div> |
048 |
<div class="info"> |
049 |
<a class="title" href="#">Product 2</a> |
050 |
<p>long description here 2</p> |
051 |
<div class="price"> |
052 |
<span class="st">Our price:</span><strong>$250.00</strong> |
053 |
</div> |
054 |
<div class="actions"> |
055 |
<a href="#">Details</a> |
056 |
<a href="#">Add to cart</a> |
057 |
</div> |
058 |
</div> |
059 |
</li> |
060 |
<li> |
061 |
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div> |
062 |
<div class="info"> |
063 |
<a class="title" href="#">Product 3</a> |
064 |
<p>long description here 3</p> |
065 |
<div class="price"> |
066 |
<span class="st">Our price:</span><strong>$350.00</strong> |
067 |
</div> |
068 |
<div class="actions"> |
069 |
<a href="#">Details</a> |
070 |
<a href="#">Add to cart</a> |
071 |
</div> |
072 |
</div> |
073 |
</li> |
074 |
<li> |
075 |
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div> |
076 |
<div class="info"> |
077 |
<a class="title" href="#">Product 4</a> |
078 |
<p>long description here 1</p> |
079 |
<div class="price"> |
080 |
<span class="st">Our price:</span><strong>$550.00</strong> |
081 |
</div> |
082 |
<div class="actions"> |
083 |
<a href="#">Details</a> |
084 |
<a href="#">Add to cart</a> |
085 |
</div> |
086 |
</div> |
087 |
</li> |
088 |
<li> |
089 |
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div> |
090 |
<div class="info"> |
091 |
<a class="title" href="#">Product 5</a> |
092 |
<p>long description here 2</p> |
093 |
<div class="price"> |
094 |
<span class="st">Our price:</span><strong>$250.00</strong> |
095 |
</div> |
096 |
<div class="actions"> |
097 |
<a href="#">Details</a> |
098 |
<a href="#">Add to cart</a> |
099 |
</div> |
100 |
</div> |
101 |
</li> |
102 |
<li> |
103 |
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div> |
104 |
<div class="info"> |
105 |
<a class="title" href="#">Product 6</a> |
106 |
<p>long description here 3</p> |
107 |
<div class="price"> |
108 |
<span class="st">Our price:</span><strong>$350.00</strong> |
109 |
</div> |
110 |
<div class="actions"> |
111 |
<a href="#">Details</a> |
112 |
<a href="#">Add to cart</a> |
113 |
</div> |
114 |
</div> |
115 |
</li> |
116 |
</ul> |
117 |
</div> |
118 |
<div id="right"> |
119 |
<h3>Top sells</h3> |
120 |
<ul> |
121 |
<li> |
122 |
<div class="img"><a href="#"><img alt="" src="images/post6.jpg"></a></div> |
123 |
<div class="info"> |
124 |
<a class="title" href="#">Product 7</a> |
125 |
<div class="price"> |
126 |
<span class="usual">$600.00 </span> |
127 |
<span class="special">$500.00</span> |
128 |
</div> |
129 |
</div> |
130 |
</li> |
131 |
<li> |
132 |
<div class="img"><a href="#"><img alt="" src="images/post5.jpg"></a></div> |
133 |
<div class="info"> |
134 |
<a class="title" href="#">Product 8</a> |
135 |
<div class="price"> |
136 |
<span class="usual">$500.00 </span> |
137 |
<span class="special">$400.00</span> |
138 |
</div> |
139 |
</div> |
140 |
</li> |
141 |
<li> |
142 |
<div class="img"><a href="#"><img alt="" src="images/post4.jpg"></a></div> |
143 |
<div class="info"> |
144 |
<a class="title" href="#">Product 9</a> |
145 |
<div class="price"> |
146 |
<span class="usual">$700.00 </span> |
147 |
<span class="special">$600.25</span> |
148 |
</div> |
149 |
</div> |
150 |
</li> |
151 |
<li> |
152 |
<div class="img"><a href="#"><img alt="" src="images/post3.jpg"></a></div> |
153 |
<div class="info"> |
154 |
<a class="title" href="#">Product 10</a> |
155 |
<div class="price"> |
156 |
<span class="usual">$805.00 </span> |
157 |
<span class="special">$714.25</span> |
158 |
</div> |
159 |
</div> |
160 |
</li> |
161 |
<li> |
162 |
<div class="img"><a href="#"><img alt="" src="images/post2.jpg"></a></div> |
163 |
<div class="info"> |
164 |
<a class="title" href="#">Product 11</a> |
165 |
<div class="price"> |
166 |
<span class="usual">$1205.00 </span> |
167 |
<span class="special">$1000.25</span> |
168 |
</div> |
169 |
</div> |
170 |
</li> |
171 |
<li> |
172 |
<div class="img"><a href="#"><img alt="" src="images/post1.jpg"></a></div> |
173 |
<div class="info"> |
174 |
<a class="title" href="#">Product 12</a> |
175 |
<div class="price"> |
176 |
<span class="usual">$200.00 </span> |
177 |
<span class="special">$190.25</span> |
178 |
</div> |
179 |
</div> |
180 |
</li> |
181 |
</ul> |
182 |
</div> |
183 |
</section> |
184 |
</div> |
CSS for Main content section
001 |
/* main section */ |
002 |
#main { |
003 |
background-color: #fff; |
004 |
padding:20px 0; |
005 |
} |
006 |
#content { |
007 |
overflow: hidden; |
008 |
} |
009 |
#content #left, #content #right { |
010 |
border: 1px solid #E9E9E9; |
011 |
float: left; |
012 |
margin: 0 2%; |
013 |
width: 63%; |
014 |
} |
015 |
#content #right { |
016 |
margin-left: 0; |
017 |
width: 30%; |
018 |
} |
019 |
#content h3 { |
020 |
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */ |
021 |
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */ |
022 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */ |
023 |
background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */ |
024 |
background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */ |
025 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 & IE7 */ |
026 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */ |
027 |
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */ |
028 |
border-bottom: 1px solid #E0E0E0; |
029 |
color: #3C3C3C; |
030 |
font-size: 12px; |
031 |
font-weight: bold; |
032 |
line-height: 15px; |
033 |
padding: 11px 0 12px 20px; |
034 |
text-transform: uppercase; |
035 |
} |
036 |
#content ul { |
037 |
list-style:none outside none; |
038 |
margin:0; |
039 |
padding:0; |
040 |
} |
041 |
#content #left ul li { |
042 |
float:left; |
043 |
padding-bottom: 21px; |
044 |
width: 33%; |
045 |
} |
046 |
#content #left ul li:hover { |
047 |
background-color: #fbfbfb; |
048 |
} |
049 |
#content #right ul li { |
050 |
border-top: 1px solid #E7E7E7; |
051 |
overflow: hidden; |
052 |
} |
053 |
#content #right ul li:hover { |
054 |
background-color: #fbfbfb; |
055 |
} |
056 |
#content #right ul li:first-child { |
057 |
border-width: none; |
058 |
} |
059 |
#content #left ul li .img { |
060 |
text-align: center; |
061 |
} |
062 |
#content #right ul li .img { |
063 |
background-color: #FFFFFF; |
064 |
float: left; |
065 |
height: 94px; |
066 |
text-align: center; |
067 |
width: 113px; |
068 |
} |
069 |
#content #left ul li .img img { |
070 |
height:128px; |
071 |
width:128px; |
072 |
} |
073 |
#content #right ul li .img img { |
074 |
height:70px; |
075 |
margin-top: 11px; |
076 |
width:70px; |
077 |
} |
078 |
#content #left ul li .info { |
079 |
padding: 17px 20px 0 19px; |
080 |
} |
081 |
#content #right ul li .info { |
082 |
float: left; |
083 |
overflow: hidden; |
084 |
padding: 17px 0 0 21px; |
085 |
width: 164px; |
086 |
} |
087 |
#content ul li .info .title { |
088 |
color: #4B4B4B; |
089 |
display: inline-block; |
090 |
font-size: 11px; |
091 |
font-weight: bold; |
092 |
line-height: 16px; |
093 |
text-decoration: none; |
094 |
text-transform: uppercase; |
095 |
width: 150px; |
096 |
} |
097 |
#content ul li .info .title:hover { |
098 |
color: #049733; |
099 |
} |
100 |
#content #left ul li .info p { |
101 |
color: #7F7F7F; |
102 |
font-size: 11px; |
103 |
line-height: 16px; |
104 |
padding-top: 3px; |
105 |
} |
106 |
#content #left ul li .info .price { |
107 |
background: none repeat scroll 0 0 #F7F7F7; |
108 |
color: #383838; |
109 |
font-size: 12px; |
110 |
font-weight: bold; |
111 |
line-height: 16px; |
112 |
margin: 17px 0 10px; |
113 |
padding: 6px 0 6px 8px; |
114 |
} |
115 |
#content #right ul li .info .price { |
116 |
color: #383838; |
117 |
font-size: 12px; |
118 |
font-weight: bold; |
119 |
line-height: 16px; |
120 |
padding-top: 25px; |
121 |
} |
122 |
#content #left ul li .info .price .st { |
123 |
color: #7F7F7F; |
124 |
font-size: 11px; |
125 |
line-height: 16px; |
126 |
margin-right: 3px; |
127 |
} |
128 |
#content #right ul li .info .price .usual, #content #right ul li .info .price .special { |
129 |
color: #7F7F7F; |
130 |
font-size: 12px; |
131 |
font-weight: normal; |
132 |
line-height: 16px; |
133 |
padding-right: 6px; |
134 |
text-decoration: line-through; |
135 |
} |
136 |
#content #right ul li .info .price .special { |
137 |
color: #FD7A01; |
138 |
font-weight: bold; |
139 |
text-decoration: none; |
140 |
} |
141 |
#content #left ul li .info .actions { |
142 |
overflow:hidden; |
143 |
} |
144 |
#content #left ul li .info .actions a { |
145 |
border: 1px solid #E0E0E0; |
146 |
color: #fd7a01; |
147 |
display: block; |
148 |
float:right; |
149 |
font-size: 11px; |
150 |
font-weight: bold; |
151 |
line-height: 16px; |
152 |
padding: 5px; |
153 |
text-decoration: none; |
154 |
} |
155 |
#content #left ul li .info .actions a:first-child { |
156 |
color: #009832; |
157 |
float:left; |
158 |
} |
Customized styles of our slider (nivoSlider) will in external file
css/nivo-slider.css
This file always available in our package.
Footer section
Finally, here are our footer area
1 |
<footer><!-- Defining the footer section of the page --> |
2 |
<div id="privacy"> |
3 |
E-Store template © 2011 <a class="link" href="https://www.script-tutorials.com/">Privacy Policy</a><br /> |
4 |
<a class="link" href="https://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/">Template by Script Tutorials</a> |
5 |
</div> |
6 |
</footer> |
CSS for footer section
01 |
/* footer section */ |
02 |
footer { |
03 |
background: none repeat scroll 0 0 #FFFFFF; |
04 |
border-top: 1px solid #E0E0E0; |
05 |
margin: 0 0 5px; |
06 |
padding: 15px 0 15px 20px; |
07 |
} |
08 |
footer #privacy { |
09 |
color: #9B9B9B; |
10 |
font-size: 12px; |
11 |
line-height: 20px; |
12 |
overflow: hidden; |
13 |
width: 100%; |
14 |
} |
15 |
footer a{ |
16 |
color: #9B9B9B; |
17 |
text-decoration: none; |
18 |
} |
JS for our template
Here are all necessary JS scripts:
js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js
All these libraries already available in package
js/main.js
01 |
$(window).load(function() { |
02 |
$('#slider').nivoSlider({ |
03 |
effect:'random', |
04 |
slices:15, |
05 |
boxCols:8, |
06 |
boxRows:8, |
07 |
animSpeed:500, |
08 |
pauseTime:4000, |
09 |
directionNav:false, |
10 |
directionNavHide:false, |
11 |
controlNav:false, |
12 |
captionOpacity:1 |
13 |
}); |
14 |
}); |
nivoSlider itself have very easy initialization – so I hope that all easy here too.
Live Demo
Conclusion
Congrats, our new template ‘E-Store’ 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!