-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (289 loc) · 14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Red Store">
<meta property="og:description" content="Give Your Workout A New Style!">
<meta property="og:image" content="https://alkaidg.github.io/eCommerce/assets/image1.png">
<meta property="og:url" content="https://alkaidg.github.io/eCommerce/">
<meta name="twitter:card" content="https://alkaidg.github.io/eCommerce/assets/image1.png">
<meta name="twitter:title" content="Red Store">
<meta name="twitter:description" content="Give Your Workout A New Style!">
<meta name="twitter:image" content="https://alkaidg.github.io/eCommerce/assets/image1.png">
<link rel="icon" href="./assets/logo.png" type="image/x-icon">
<link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/cec2b045b4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
<script src="./script.js"></script>
<title>Red Store</title>
</head>
<body>
<!-------- Header -------->
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<a href="index.html"><img src="./assets/logo.png" alt="Red Store logo"></a>
</div>
<nav id="navMenu">
<ul id="menuItems">
<li><a href="./index.html">Home</a></li>
<li><a href="./products.html">Products</a></li>
<li><a href="./contact.html">Contact Us</a></li>
<li><a href="./login.html">Login</a></li>
</ul>
</nav>
<div class="cartContainer">
<img src="./assets/cart.png" alt="cart">
<div class="cartCounter">10</div>
</div>
<img class="menu-icon" id="menuIcon" src="./assets/menu.png" alt="mobile menu">
</div>
</div>
</div>
<div id="notification-container"></div>
<!-------- Hero -------->
<div class="hero">
<div class="container">
<div class="row">
<div class="col-2">
<h1>Give Your Workout A New Style!</h1>
<p>Success isn't always about greatness. It's about consistency. Consistent hard work gains success. Greatness will come.</p>
<a class="btn" href="./products.html">Explore Now</a>
</div>
<div class="col-2">
<img src="./assets/image1.png" alt="hero image">
</div>
</div>
</div>
</div>
<!-------- Categories -------->
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<a href="./products.html?filter=t-shirt&sort=default">
<div class="overlay">
<img src="./assets/tshirt.png" alt="T-shirt category image">
<div class="category-name">T-Shirts</div>
</div>
</a>
</div>
<div class="col-3">
<a href="./products.html?filter=trainers&sort=default">
<div class="overlay">
<img src="./assets/category-2.jpg" alt="Footwear category image">
<div class="category-name">Trainers</div>
</div>
</a>
</div>
<div class="col-3">
<a href="./products.html?filter=jacket&sort=default">
<div class="overlay">
<img src="./assets/category-3.jpg" alt="Hoodie category image">
<div class="category-name">Jackets</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-------- Featured product -------->
<div class="small-container">
<h2 class="title">Featured Products</h2>
<div class="row alignTop">
<div class="col-4">
<a href="./product-details.html?sku=10010">
<img src="./assets/10011.webp" alt="Borg Lined Shacket">
<h4>Borg Lined Shacket</h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p>£64.99</p>
</a>
</div>
<div class="col-4">
<a href="./product-details.html?sku=10030">
<img src="./assets/10031.webp" alt="Basket Textured Crew Neck Jumper">
<h4>Basket Textured Crew Neck Jumper</h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<p>£35.99</p>
</a>
</div>
<div class="col-4">
<a href="./product-details.html?sku=10110">
<img src="./assets/10111.webp" alt="Premium Textured Overhead Hoodie">
<h4>Premium Textured Overhead Hoodie</h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p>£34.99</p>
</a>
</div>
<div class="col-4">
<a href="./product-details.html?sku=10120">
<img src="./assets/10121.webp" alt="Nike Club Pullover Hoodie">
<h4>Nike Club Pullover Hoodie</h4>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p>£59.99</p>
</a>
</div>
</div>
</div>
<!-------- Latest product -------->
<div class="small-container">
<h2 class="title">Latest Products</h2>
<div class="row alignTop" id="latestProductsRow">
</div>
</div>
<!-------- Offer -------->
<div class="offer">
<div class="small-container">
<div class="row">
<div class="col-2">
<img class="offer-img" src="./assets/exclusive.png" alt="Smart Band 4">
</div>
<div class="col-2">
<p>Exclusively Available on RedStore</p>
<h1>Smart Band 4</h1>
<small>
The Mi Smart Band 4 features a 39.9% larger (than Mi Band 3) AMOLED colour full-touch display with adjustable brightness, so everything is clear as can be.
</small>
<a href="./product-details.html?sku=10130" class="btn">Buy Now</a>
</div>
</div>
</div>
</div>
<!-------- Testimonials -------->
<div class="testimonial">
<div class="small-container">
<div class="row">
<div class="col-3">
<i class="fa fa-quote-left"></i>
<p>I stumbled upon Red Store while searching for trendy sportswear, and it turned out to be a game-changer! The quality of their products is top-notch, and the variety of casual and athletic wear is impressive. I've been a loyal customer ever since, and the convenience of shopping online with fast shipping has made Red Store my go-to destination for all my fashion needs. Highly recommended!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<img src="./assets/user-1.png" alt="">
<h3>Susan Storm</h3>
</div>
<div class="col-3">
<i class="fa fa-quote-left"></i>
<p>As someone who values both style and comfort, I can confidently say that Red Store delivers on both fronts. The seamless blend of sporty and casual fashion is exactly what I've been looking for. The materials are durable, and the designs are always on point. What sets Red Store apart is their commitment to customer satisfaction, evident in the hassle-free shopping experience and responsive customer service. Red Store has become my ultimate destination for upgrading my wardrobe!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<img src="./assets/user-2.png" alt="">
<h3>Peter Parker</h3>
</div>
<div class="col-3">
<i class="fa fa-quote-left"></i>
<p>I've never been much of an online shopper, but Red Store has converted me. The simplicity of navigating their website and the detailed product descriptions made my shopping experience enjoyable. The clothes I ordered exceeded my expectations – stylish, comfortable, and reasonably priced. Red Store has certainly raised the bar for online male fashion. I've received countless compliments on my Red Store outfits, and I'm excited to continue exploring their ever-growing collection. Five stars!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<img src="./assets/user-3.png" alt="">
<h3>Mary Jane</h3>
</div>
</div>
</div>
</div>
<!-------- Brands -------->
<div class="brands">
<div class="small-container">
<div class="row">
<div class="col-5">
<img src="./assets/logo-coca-cola.png" alt="">
</div>
<div class="col-5">
<img src="./assets/logo-godrej.png" alt="">
</div>
<div class="col-5">
<img src="./assets/logo-oppo.png" alt="">
</div>
<div class="col-5">
<img src="./assets/logo-paypal.png" alt="">
</div>
<div class="col-5">
<img src="./assets/logo-philips.png" alt="">
</div>
</div>
</div>
</div>
<!-------- Footer -------->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Download our App</h3>
<p>Download App for Android and iOS</p>
<div class="app-logo">
<a href=""><img src="./assets/play-store.png" alt="Google Plat store"></a>
<a href=""><img src="./assets/app-store.png" alt="iOS App store"></a>
</div>
</div>
<div class="footer-col-2">
<img src="./assets/logo-white.png" alt="">
<p>Our purpose is to sustainably make the please and benefits of sports accessible to everyone.</p>
</div>
<div class="footer-col-3">
<h3>Sitemap</h3>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./products.html">Products</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./login.html">Login</a></li>
</ul>
</div>
<div class="footer-col-4">
<h3>Follow us</h3>
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter/X</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">YouTube</a></li>
</ul>
</div>
</div>
<hr>
<p class="copyright">Copyright 2023 - Res Store</p>
</div>
</div>
</body>
</html>