├── .gitattributes
├── .github
    └── workflows
    │   └── static.yml
├── README.md
├── account.html
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── app-store.png
    │   ├── buy-1.jpg
    │   ├── buy-2.jpg
    │   ├── buy-3.jpg
    │   ├── cart.png
    │   ├── category-1.jpg
    │   ├── category-2.jpg
    │   ├── category-3.jpg
    │   ├── exclusive.png
    │   ├── gallery-1.jpg
    │   ├── gallery-2.jpg
    │   ├── gallery-3.jpg
    │   ├── gallery-4.jpg
    │   ├── image1.png
    │   ├── img-credit.txt
    │   ├── logo-coca-cola.png
    │   ├── logo-godrej.png
    │   ├── logo-oppo.png
    │   ├── logo-paypal.png
    │   ├── logo-philips.png
    │   ├── logo-white.png
    │   ├── logo.png
    │   ├── menu.png
    │   ├── play-store.png
    │   ├── product-1.jpg
    │   ├── product-10.jpg
    │   ├── product-11.jpg
    │   ├── product-12.jpg
    │   ├── product-2.jpg
    │   ├── product-3.jpg
    │   ├── product-4.jpg
    │   ├── product-5.jpg
    │   ├── product-6.jpg
    │   ├── product-7.jpg
    │   ├── product-8.jpg
    │   ├── product-9.jpg
    │   ├── user-1.png
    │   ├── user-2.png
    │   └── user-3.png
    └── js
    │   ├── account.js
    │   ├── gallery.js
    │   └── toggleMenu.js
├── cart.html
├── index.html
├── product-details.html
├── products.html
└── rellax.min.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["master"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v5
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## E-Commerce Website Design Using HTML CSS and JS
 2 | ![Screenshot (517)](https://user-images.githubusercontent.com/51481476/97994919-e0cdf680-1e0b-11eb-9567-fd78c9595f77.png)
 3 | ![Screenshot (518)](https://user-images.githubusercontent.com/51481476/97995225-40c49d00-1e0c-11eb-910c-3f837e7b6e70.png)
 4 | ![Screenshot (519)](https://user-images.githubusercontent.com/51481476/97995052-0e1aa480-1e0c-11eb-88b5-e2b058925326.png)
 5 | ![Screenshot (520)](https://user-images.githubusercontent.com/51481476/97995142-25599200-1e0c-11eb-9061-484b73b1fcc1.png)
 6 | ![Screenshot (521)](https://user-images.githubusercontent.com/51481476/97994908-dc094280-1e0b-11eb-9946-08e28f042189.png)
 7 | 
 8 | ### Credits : Easy Tuts YouTube Channel
 9 | https://www.youtube.com/c/EasyTutorialsVideo/videos
10 | 


--------------------------------------------------------------------------------
/account.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>All Products - Red store</title>
  8 |   <link rel="stylesheet" href="./assets/css/style.css" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div class="header">
 17 |     <div class="container">
 18 |       <div class="navbar">
 19 |         <div class="logo">
 20 |           <a href="index.html">
 21 |             <img src="./assets/images/logo.png" alt="" width="125px" /></a>
 22 |         </div>
 23 |         <nav>
 24 |           <ul id="MenuItems">
 25 |             <li><a href="index.html">Home</a></li>
 26 |             <li><a href="products.html">Products</a></li>
 27 |             <li><a href="">About</a></li>
 28 |             <li><a href="">Contact</a></li>
 29 |             <li><a href="account.html">Account</a></li>
 30 |             <!-- TODo: 22:20 -->
 31 |           </ul>
 32 |         </nav>
 33 |         <a href="cart.html"><img src="./assets/images/cart.png" alt="" width="30px" height="30px" /></a>
 34 |         <img src="./assets/images/menu.png" alt="" class="menu-icon" onclick="menutoggle()" />
 35 |       </div>
 36 |     </div>
 37 |   </div>
 38 |   <!-- Navigation ends here -->
 39 |   <!-- Account Page -->
 40 | 
 41 |   <div class="account-page">
 42 |     <div class="container">
 43 |       <div class="row">
 44 |         <div class="col-2">
 45 |           <img src="./assets/images/image1.png" width="100%" />
 46 |         </div>
 47 |         <div class="col-2">
 48 |           <div class="form-container">
 49 |             <div class="form-btn">
 50 |               <span onclick="login()">Login</span>
 51 |               <span onclick="register()">Register</span>
 52 |               <hr id="indicator" />
 53 |             </div>
 54 |             <form action="" id="LoginForm">
 55 |               <input type="text" placeholder="Username" />
 56 |               <input type="password" placeholder="Password" />
 57 | 
 58 |               <button type="submit" class="btn">Login</button>
 59 |               <a href="">Forgot Password</a>
 60 |             </form>
 61 |             <form action="" id="RegForm">
 62 |               <input type="text" placeholder="Username" />
 63 |               <input type="email" placeholder="Email" />
 64 |               <input type="password" placeholder="Password" />
 65 | 
 66 |               <button type="submit" class="btn">Register</button>
 67 |             </form>
 68 |           </div>
 69 |         </div>
 70 |       </div>
 71 |     </div>
 72 |   </div>
 73 | 
 74 |   <!-- Footer -->
 75 |   <div class="footer">
 76 |     <div class="container">
 77 |       <div class="row">
 78 |         <div class="footer-col-1">
 79 |           <h3>Download Our App</h3>
 80 |           <p>
 81 |             Download App for Android <br />
 82 |             and ios mobile phone
 83 |           </p>
 84 |           <div class="app-logo">
 85 |             <img src="./assets/images/play-store.png" alt="" />
 86 |             <img src="./assets/images/app-store.png" alt="" />
 87 |           </div>
 88 |         </div>
 89 |         <div class="footer-col-2">
 90 |           <img src="./assets/images/logo-white.png" alt="" />
 91 |           <p>
 92 |             Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.
 93 |             Porro, eum?
 94 |           </p>
 95 |         </div>
 96 |         <div class="footer-col-3">
 97 |           <h3>Useful Links</h3>
 98 |           <ul>
 99 |             <li>Coupons</li>
100 |             <li>Blog Post</li>
101 |             <li>Return Policy</li>
102 |             <li>Join Affiliate</li>
103 |           </ul>
104 |         </div>
105 | 
106 |         <div class="footer-col-4">
107 |           <h3>Follow us</h3>
108 |           <ul>
109 |             <li>Facebook</li>
110 |             <li>Twitter</li>
111 |             <li>Instagram</li>
112 |             <li>YouTube</li>
113 |           </ul>
114 |         </div>
115 |       </div>
116 |       <hr />
117 |       <p class="copyright" id="copyright-text">Copyright 2020 - introidx</p>
118 |     </div>
119 |   </div>
120 | 
121 |   <!-- scripts -->
122 |   <script src="./assets/js/account.js"></script>
123 |   <script src="../assets/js/toggleMenu.js"></script>
124 | </body>
125 | 
126 | </html>


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --main-text-color: #555;
  3 |   --main-bg-color: #fff;
  4 |   --accent-color: #ff523b;
  5 |   --hover-color: #563434;
  6 |   --slate-gray: #8a8a8a;
  7 |   --smoth-pink: #ffd6d6;
  8 | }
  9 | 
 10 | *::selection {
 11 |   background-color: var(--accent-color);
 12 |   color: var(--main-bg-color);
 13 | }
 14 | 
 15 | * {
 16 |   margin: 0;
 17 |   padding: 0;
 18 |   box-sizing: border-box;
 19 | }
 20 | 
 21 | body {
 22 |   font-family: "Poppins", sans-serif;
 23 | }
 24 | 
 25 | .navbar {
 26 |   display: flex;
 27 |   align-items: center;
 28 |   padding: 20px;
 29 | }
 30 | 
 31 | nav {
 32 |   flex: 1;
 33 |   text-align: right;
 34 | }
 35 | 
 36 | nav ul {
 37 |   display: inline-block;
 38 |   list-style-type: none;
 39 | }
 40 | 
 41 | nav ul li {
 42 |   display: inline-block;
 43 |   margin-right: 30px;
 44 | }
 45 | 
 46 | a {
 47 |   text-decoration: none;
 48 |   color: var(--main-text-color);
 49 |   ;
 50 | 
 51 | }
 52 | 
 53 | p {
 54 |   color: var(--main-text-color);
 55 | }
 56 | 
 57 | .navbar a {
 58 |   text-decoration: none;
 59 |   color: var(--main-text-color);
 60 |   font-weight: 600;
 61 | }
 62 | 
 63 | .navbar a:hover {
 64 |   color: var(--accent-color);
 65 | }
 66 | 
 67 | .container {
 68 |   max-width: 1300px;
 69 |   margin: auto;
 70 |   padding-left: 25px;
 71 |   padding-right: 25px;
 72 | }
 73 | 
 74 | .row {
 75 |   margin-top: 50px;
 76 |   display: flex;
 77 |   align-items: center;
 78 |   flex-wrap: wrap;
 79 |   justify-content: space-around;
 80 | }
 81 | 
 82 | .col-2 {
 83 |   flex-basis: 50%;
 84 |   min-width: 300px;
 85 | }
 86 | 
 87 | .col-2 img {
 88 |   max-width: 100%;
 89 |   padding: 50px 0;
 90 |   /* top and bottom 50 left and right 0 */
 91 | }
 92 | 
 93 | .col-2 h1 {
 94 |   font-size: 50px;
 95 |   line-height: 60px;
 96 |   margin: 25px 0;
 97 | }
 98 | 
 99 | .btn {
100 |   display: inline-block;
101 |   background: var(--accent-color);
102 |   color: var(--main-bg-color);
103 |   padding: 8px 30px;
104 |   margin: 30px 0;
105 |   border-radius: 5px;
106 |   transition: background 0.5s;
107 | }
108 | 
109 | .btn:hover {
110 |   background-color: var(--hover-color);
111 |   /* Green */
112 |   color: var(--main-bg-color);
113 | }
114 | 
115 | .header {
116 |   background: radial-gradient(#fff, #ffd6d6);
117 | }
118 | 
119 | .header .row {
120 |   margin-top: 20px;
121 | }
122 | 
123 | .categories {
124 |   margin: 70px 0;
125 | }
126 | 
127 | .col-3 {
128 |   flex-basis: 30%;
129 |   min-width: 250px;
130 |   margin-bottom: 30px;
131 | }
132 | 
133 | .col-3 img {
134 |   width: 100%;
135 |   transition: 0.5s;
136 |   border-radius: 10px;
137 | }
138 | 
139 | .col-3 img:hover {
140 |   scale: 1.1;
141 | }
142 | 
143 | .small-container {
144 |   max-width: 1080px;
145 |   margin: auto;
146 |   padding-left: 25px;
147 |   padding-right: 25px;
148 | }
149 | 
150 | .col-4 {
151 |   flex-basis: 25%;
152 |   padding: 10px;
153 |   min-width: 200px;
154 |   margin-bottom: 50px;
155 |   transition: transform 0.5s;
156 | }
157 | 
158 | .col-4 img {
159 |   width: 100%;
160 |   border-radius: 10px;
161 | }
162 | 
163 | .title {
164 |   text-align: center;
165 |   margin: 0 auto 80px;
166 |   position: relative;
167 |   line-height: 60px;
168 |   color: var(--main-text-color);
169 | }
170 | 
171 | .title::after {
172 |   content: "";
173 |   background: var(--accent-color);
174 |   width: 80px;
175 |   height: 5px;
176 |   border-radius: 5px;
177 |   position: absolute;
178 |   bottom: 0;
179 |   left: 50%;
180 |   transform: translateX(-50%);
181 | }
182 | 
183 | h4 {
184 |   color: var(--main-text-color);
185 |   font-weight: normal;
186 | }
187 | 
188 | .col-4 p {
189 |   font-size: 14px;
190 | }
191 | 
192 | .rating .fa {
193 |   color: var(--accent-color);
194 | }
195 | 
196 | .col-4:hover {
197 |   transform: translateY(-5px);
198 | }
199 | 
200 | /*     offer     */
201 | .offer {
202 |   background: radial-gradient(#fff, #ffd6d6);
203 |   margin-top: 80px;
204 |   padding: 30px 0;
205 | }
206 | 
207 | .col-2 .offer-img {
208 |   padding: 50px;
209 | }
210 | 
211 | small {
212 |   color: var(--main-text-color);
213 | }
214 | 
215 | /* -----Testimonial----- */
216 | 
217 | .testimonial {
218 |   padding-top: 100px;
219 | }
220 | 
221 | .testimonial .col-3 {
222 |   text-align: center;
223 |   padding: 40px 20px;
224 |   box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
225 |   cursor: pointer;
226 |   transition: transform 0.5s;
227 | }
228 | 
229 | .testimonial .col-3 img {
230 |   width: 50px;
231 |   margin-top: 20px;
232 |   border-radius: 50%;
233 | }
234 | 
235 | .testimonial .col-3:hover {
236 |   transform: translateY(-10px);
237 | }
238 | 
239 | .fa.fa-quote-left {
240 |   font-size: 34px;
241 |   color: var(--accent-color);
242 | }
243 | 
244 | .col-3 p {
245 |   font-size: 12px;
246 |   margin: 12px 0;
247 |   color: #777;
248 | }
249 | 
250 | .testimonial .col-3 h3 {
251 |   font-weight: 600;
252 |   color: var(--main-text-color);
253 |   font-size: 16px;
254 | }
255 | 
256 | /* brands */
257 | 
258 | .brands {
259 |   margin: 100px auto;
260 | }
261 | 
262 | .col-5 {
263 |   width: 160px;
264 | }
265 | 
266 | .col-5 img {
267 |   width: 100%;
268 |   cursor: pointer;
269 |   filter: grayscale(100%);
270 |   transition: 0.2s;
271 | }
272 | 
273 | .col-5 img:hover {
274 |   filter: grayscale(0);
275 |   scale: 1.1;
276 | }
277 | 
278 | /* footer */
279 | .footer {
280 |   background: #000;
281 |   color: var(--slate-gray);
282 |   font-size: 14px;
283 |   padding: 60px 0 20px;
284 | }
285 | 
286 | .footer p {
287 |   color: var(--slate-gray);
288 | }
289 | 
290 | .footer h3 {
291 |   color: var(--main-bg-color);
292 |   margin-bottom: 20px;
293 | }
294 | 
295 | .footer-col-1,
296 | .footer-col-2,
297 | .footer-col-3,
298 | .footer-col-4 {
299 |   min-width: 250px;
300 |   margin-bottom: 20px;
301 | }
302 | 
303 | .footer-col-1 {
304 |   flex-basis: 30px;
305 | }
306 | 
307 | .footer-col-2 {
308 |   flex: 1;
309 |   text-align: center;
310 | }
311 | 
312 | .footer-col-2 img {
313 |   width: 180px;
314 |   margin-bottom: 20px;
315 | }
316 | 
317 | .footer-col-3,
318 | .footer-col-4 {
319 |   flex-basis: 12%;
320 |   text-align: center;
321 | }
322 | 
323 | ul {
324 |   list-style-type: none;
325 | }
326 | 
327 | .app-logo {
328 |   margin-top: 20px;
329 | }
330 | 
331 | .app-logo img {
332 |   width: 140px;
333 | }
334 | 
335 | .footer hr {
336 |   border: none;
337 |   background: #b5b5b5;
338 |   height: 1px;
339 |   margin: 20px 0;
340 | }
341 | 
342 | .copyright {
343 |   text-align: center;
344 | }
345 | 
346 | .menu-icon {
347 |   width: 28px;
348 |   margin-left: 20px;
349 |   display: none;
350 | }
351 | 
352 | /* Media Quer for menu */
353 | 
354 | @media only screen and (max-width: 800px) {
355 |   nav ul {
356 |     position: absolute;
357 |     top: 70px;
358 |     left: 0;
359 |     background: #333;
360 |     width: 100%;
361 |     overflow: hidden;
362 |     transition: max-height 0.5s;
363 |   }
364 | 
365 |   nav ul li {
366 |     display: block;
367 |     margin-right: 50px;
368 |     margin-top: 10px;
369 |     margin-bottom: 10px;
370 |   }
371 | 
372 |   nav ul li a {
373 |     color: var(--main-bg-color);
374 |   }
375 | 
376 |   .menu-icon {
377 |     display: block;
378 |     cursor: pointer;
379 |   }
380 | }
381 | 
382 | /* All Products */
383 | .row-2 {
384 |   justify-content: space-between;
385 |   margin: 100px auto 50px;
386 | }
387 | 
388 | select {
389 |   border: 1px solid var(--accent-color);
390 |   padding: 5px;
391 | }
392 | 
393 | select:focus {
394 |   outline: none;
395 | }
396 | 
397 | .page-btn {
398 |   margin: 0 auto 80px;
399 | }
400 | 
401 | .page-btn span {
402 |   display: inline-block;
403 |   border: 1px solid var(--accent-color);
404 |   margin-left: 10px;
405 |   width: 40px;
406 |   height: 40px;
407 |   text-align: center;
408 |   line-height: 40px;
409 |   line-height: 40px;
410 |   cursor: pointer;
411 | }
412 | 
413 | .page-btn span:hover {
414 |   background: var(--accent-color);
415 |   color: var(--main-bg-color);
416 | }
417 | 
418 | /* Media Quer for less than 600 screen size */
419 | @media only screen and (max-width: 600px) {
420 |   .row {
421 |     text-align: center;
422 |   }
423 | 
424 |   .col-2,
425 |   .col-3,
426 |   .col-4 {
427 |     flex-basis: 100%;
428 |   }
429 | 
430 |   .single-product .row {
431 |     text-align: left;
432 |   }
433 | 
434 |   .single-product .col-2 {
435 |     padding: 20px 0;
436 |   }
437 | 
438 |   .single-product h2 {
439 |     font-size: 26px;
440 |     line-height: 32px;
441 |   }
442 | 
443 |   .cart-info p {
444 |     display: none;
445 |   }
446 | }
447 | 
448 | /* Single Product Detail */
449 | .single-product {
450 |   margin-top: 80px;
451 | }
452 | 
453 | .single-product .col-2 img {
454 |   padding: 0;
455 | }
456 | 
457 | .single-product .col-2 {
458 |   padding: 20px;
459 | }
460 | 
461 | .single-product h4 {
462 |   margin: 20px 0;
463 |   font-size: 22px;
464 |   font-weight: bold;
465 | }
466 | 
467 | .single-product select {
468 |   display: block;
469 |   padding: 10px;
470 |   margin-top: 20px;
471 | }
472 | 
473 | .single-product input {
474 |   width: 50px;
475 |   height: 40px;
476 |   padding-left: 10px;
477 |   font-size: 20px;
478 |   margin-right: 10px;
479 |   border: 1px solid var(--accent-color);
480 | }
481 | 
482 | input:focus {
483 |   outline: none;
484 | }
485 | 
486 | .single-product .fa {
487 |   color: var(--accent-color);
488 |   margin-left: 10px;
489 | }
490 | 
491 | .small-img-row {
492 |   display: flex;
493 |   justify-content: space-between;
494 | }
495 | 
496 | .small-img-col {
497 |   flex-basis: 24%;
498 |   cursor: pointer;
499 | }
500 | 
501 | /* Cart Items Details */
502 | .cart-page {
503 |   margin: 30px auto;
504 | }
505 | 
506 | table {
507 |   width: 100%;
508 |   border-collapse: collapse;
509 | }
510 | 
511 | .cart-info {
512 |   display: flex;
513 |   flex-wrap: wrap;
514 | }
515 | 
516 | th {
517 |   text-align: left;
518 |   padding: 5px;
519 |   color: var(--main-bg-color);
520 |   background: var(--accent-color);
521 |   font-weight: normal;
522 | }
523 | 
524 | td {
525 |   padding: 10px 5px;
526 | }
527 | 
528 | td input {
529 |   width: 40px;
530 |   height: 30px;
531 |   padding: 5px;
532 | }
533 | 
534 | td a {
535 |   color: var(--accent-color);
536 |   font-size: 12px;
537 | }
538 | 
539 | td img {
540 |   width: 80px;
541 |   height: 80px;
542 |   margin-right: 10px;
543 | }
544 | 
545 | .total-price {
546 |   display: flex;
547 |   justify-content: flex-end;
548 | }
549 | 
550 | .total-price table {
551 |   border-top: 3px solid var(--accent-color);
552 |   width: 100%;
553 |   max-width: 400px;
554 | }
555 | 
556 | td:last-child {
557 |   text-align: right;
558 | }
559 | 
560 | th:last-child {
561 |   text-align: right;
562 | }
563 | 
564 | /* Account Page */
565 | 
566 | .account-page {
567 |   padding: 50px 0;
568 |   background: radial-gradient(var(--main-bg-color), var(--smoth-pink));
569 | }
570 | 
571 | .form-container {
572 |   background: var(--main-bg-color);
573 |   backdrop-filter: blur(10px);
574 |   width: 300px;
575 |   height: 400px;
576 |   position: relative;
577 |   text-align: center;
578 |   padding: 20px 0;
579 |   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
580 |   border-radius: 10px;
581 |   overflow: hidden;
582 | }
583 | 
584 | .form-container span {
585 |   font-weight: bold;
586 |   padding: 0 10px;
587 |   color: var(--main-text-color);
588 |   cursor: pointer;
589 |   width: 100px;
590 |   display: inline-block;
591 | }
592 | 
593 | .form-btn {
594 |   display: inline-block;
595 | }
596 | 
597 | .form-container form {
598 |   max-width: 300px;
599 |   padding: 0 20px;
600 |   position: absolute;
601 |   top: 130px;
602 |   transition: transform 1s;
603 | }
604 | 
605 | form input {
606 |   width: 100%;
607 |   height: 30px;
608 |   margin: 10px 0;
609 |   padding: 6px 12px;
610 |   border-radius: 10px;
611 |   border: 1px solid var(--slate-gray);
612 | }
613 | 
614 | form .btn {
615 |   width: 100%;
616 |   border: none;
617 |   cursor: pointer;
618 |   margin: 10px;
619 | }
620 | 
621 | form .btn:focus {
622 |   outline: none;
623 | }
624 | 
625 | #LoginForm {
626 |   left: -300px;
627 | }
628 | 
629 | #RegForm {
630 |   left: 0;
631 | }
632 | 
633 | form a {
634 |   font-size: 12px;
635 | }
636 | 
637 | #indicator {
638 |   width: 100px;
639 |   border: none;
640 |   background: var(--accent-color);
641 |   height: 3px;
642 |   margin-top: 8px;
643 |   transform: translateX(100px);
644 |   transition: transform 1s;
645 | }


--------------------------------------------------------------------------------
/assets/images/app-store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/app-store.png


--------------------------------------------------------------------------------
/assets/images/buy-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/buy-1.jpg


--------------------------------------------------------------------------------
/assets/images/buy-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/buy-2.jpg


--------------------------------------------------------------------------------
/assets/images/buy-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/buy-3.jpg


--------------------------------------------------------------------------------
/assets/images/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/cart.png


--------------------------------------------------------------------------------
/assets/images/category-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/category-1.jpg


--------------------------------------------------------------------------------
/assets/images/category-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/category-2.jpg


--------------------------------------------------------------------------------
/assets/images/category-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/category-3.jpg


--------------------------------------------------------------------------------
/assets/images/exclusive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/exclusive.png


--------------------------------------------------------------------------------
/assets/images/gallery-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/gallery-1.jpg


--------------------------------------------------------------------------------
/assets/images/gallery-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/gallery-2.jpg


--------------------------------------------------------------------------------
/assets/images/gallery-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/gallery-3.jpg


--------------------------------------------------------------------------------
/assets/images/gallery-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/gallery-4.jpg


--------------------------------------------------------------------------------
/assets/images/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/image1.png


--------------------------------------------------------------------------------
/assets/images/img-credit.txt:
--------------------------------------------------------------------------------
1 | <a href='https://www.freepik.com/free-photos-vectors/banner'>Banner psd created by freepik - www.freepik.com</a>
2 | 
3 | Products image: www.myntra.com


--------------------------------------------------------------------------------
/assets/images/logo-coca-cola.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-coca-cola.png


--------------------------------------------------------------------------------
/assets/images/logo-godrej.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-godrej.png


--------------------------------------------------------------------------------
/assets/images/logo-oppo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-oppo.png


--------------------------------------------------------------------------------
/assets/images/logo-paypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-paypal.png


--------------------------------------------------------------------------------
/assets/images/logo-philips.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-philips.png


--------------------------------------------------------------------------------
/assets/images/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo-white.png


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/logo.png


--------------------------------------------------------------------------------
/assets/images/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/menu.png


--------------------------------------------------------------------------------
/assets/images/play-store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/play-store.png


--------------------------------------------------------------------------------
/assets/images/product-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-1.jpg


--------------------------------------------------------------------------------
/assets/images/product-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-10.jpg


--------------------------------------------------------------------------------
/assets/images/product-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-11.jpg


--------------------------------------------------------------------------------
/assets/images/product-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-12.jpg


--------------------------------------------------------------------------------
/assets/images/product-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-2.jpg


--------------------------------------------------------------------------------
/assets/images/product-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-3.jpg


--------------------------------------------------------------------------------
/assets/images/product-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-4.jpg


--------------------------------------------------------------------------------
/assets/images/product-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-5.jpg


--------------------------------------------------------------------------------
/assets/images/product-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-6.jpg


--------------------------------------------------------------------------------
/assets/images/product-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-7.jpg


--------------------------------------------------------------------------------
/assets/images/product-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-8.jpg


--------------------------------------------------------------------------------
/assets/images/product-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/product-9.jpg


--------------------------------------------------------------------------------
/assets/images/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/user-1.png


--------------------------------------------------------------------------------
/assets/images/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/user-2.png


--------------------------------------------------------------------------------
/assets/images/user-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/introidx/E-Commerce-website-html-css-js/32fdef04c5fe60bc3a3e38b9b5f1069ebf0393c1/assets/images/user-3.png


--------------------------------------------------------------------------------
/assets/js/account.js:
--------------------------------------------------------------------------------
 1 | // js for toggle form
 2 | var LoginForm = document.getElementById("LoginForm");
 3 | var RegForm = document.getElementById("RegForm");
 4 | var indicator = document.getElementById("indicator");
 5 | 
 6 | function register() {
 7 |   RegForm.style.transform = "translateX(0px)";
 8 |   LoginForm.style.transform = "translateX(0px)";
 9 |   indicator.style.transform = "translateX(100px)";
10 | }
11 | 
12 | function login() {
13 |   RegForm.style.transform = "translateX(300px)";
14 |   LoginForm.style.transform = "translateX(300px)";
15 |   indicator.style.transform = "translateX(0px)";
16 | }
17 | 
18 | // JS for Toggle menu 
19 | var MenuItems = document.getElementById("MenuItems");
20 | 
21 |     MenuItems.style.maxHeight = "0px";
22 | 
23 |     function menutoggle() {
24 |       if (MenuItems.style.maxHeight == "0px") {
25 |         MenuItems.style.maxHeight = "200px";
26 |       } else {
27 |         MenuItems.style.maxHeight = "0px";
28 |       }
29 |     }


--------------------------------------------------------------------------------
/assets/js/gallery.js:
--------------------------------------------------------------------------------
 1 | // js for product gallery
 2 | var ProductImg = document.getElementById("ProductImg");
 3 |       var smallImg = document.getElementsByClassName("small-img");
 4 |       smallImg[0].onclick = function () {
 5 |         ProductImg.src = smallImg[0].src;
 6 |       };
 7 |       smallImg[1].onclick = function () {
 8 |         ProductImg.src = smallImg[1].src;
 9 |       };
10 |       smallImg[2].onclick = function () {
11 |         ProductImg.src = smallImg[2].src;
12 |       };
13 |       smallImg[3].onclick = function () {
14 |         ProductImg.src = smallImg[3].src;
15 |       };


--------------------------------------------------------------------------------
/assets/js/toggleMenu.js:
--------------------------------------------------------------------------------
 1 | // < !--JS for Toggle menu-- >
 2 | var MenuItems = document.getElementById("MenuItems");
 3 | 
 4 | MenuItems.style.maxHeight = "0px";
 5 | 
 6 | function menutoggle() {
 7 |     if (MenuItems.style.maxHeight == "0px") {
 8 |         MenuItems.style.maxHeight = "200px";
 9 |     } else {
10 |         MenuItems.style.maxHeight = "0px";
11 |     }
12 | }
13 | 
14 | // copyright section change by year
15 | let copyrightElem = document.getElementById('copyright-text');
16 | let currentYear = new Date().getFullYear()
17 | let fullText = `Copyright ${currentYear} - introidx`;
18 | copyrightElem.innerText = fullText;


--------------------------------------------------------------------------------
/cart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>All Products - Red store</title>
  8 |   <link rel="stylesheet" href="./assets/css/style.css" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div class="container">
 17 |     <div class="navbar">
 18 |       <div class="logo">
 19 |         <a href="index.html">
 20 |           <img src="./assets/images/logo.png" alt="" width="125px" /></a>
 21 |       </div>
 22 |       <nav>
 23 |         <ul id="MenuItems">
 24 |           <li><a href="index.html">Home</a></li>
 25 |           <li><a href="products.html">Products</a></li>
 26 |           <li><a href="">About</a></li>
 27 |           <li><a href="">Contact</a></li>
 28 |           <li><a href="account.html">Account</a></li>
 29 |           <!-- TODo: 22:20 -->
 30 |         </ul>
 31 |       </nav>
 32 |       <a href="cart.html"><img src="./assets/images/cart.png" alt="" width="30px" height="30px" /></a>
 33 |       <img src="./assets/images/menu.png" alt="" class="menu-icon" onclick="menutoggle()" />
 34 |     </div>
 35 |   </div>
 36 | 
 37 |   <!-- Cart Items Details -->
 38 |   <div class="small-container cart-page">
 39 |     <table>
 40 |       <tr>
 41 |         <th>Product</th>
 42 |         <th>Quantity</th>
 43 |         <th>Subtotal</th>
 44 |       </tr>
 45 |       <tr>
 46 |         <td>
 47 |           <div class="cart-info">
 48 |             <img src="./assets/images/buy-1.jpg" alt="" />
 49 |             <div>
 50 |               <p>Red Printed T-shirt</p>
 51 |               <small>Price: $50.00</small>
 52 |               <br />
 53 |               <a href="">Remove</a>
 54 |             </div>
 55 |           </div>
 56 |         </td>
 57 |         <td><input type="nunber" value="1" /></td>
 58 |         <td>$50.00</td>
 59 |       </tr>
 60 | 
 61 |       <tr>
 62 |         <td>
 63 |           <div class="cart-info">
 64 |             <img src="./assets/images/buy-2.jpg" alt="" />
 65 |             <div>
 66 |               <p>Red Printed T-shirt</p>
 67 |               <small>Price: $50.00</small>
 68 |               <br />
 69 |               <a href="">Remove</a>
 70 |             </div>
 71 |           </div>
 72 |         </td>
 73 |         <td><input type="nunber" value="1" /></td>
 74 |         <td>$50.00</td>
 75 |       </tr>
 76 | 
 77 |       <tr>
 78 |         <td>
 79 |           <div class="cart-info">
 80 |             <img src="./assets/images/buy-3.jpg" alt="" />
 81 |             <div>
 82 |               <p>Red Printed T-shirt</p>
 83 |               <small>Price: $50.00</small>
 84 |               <br />
 85 |               <a href="">Remove</a>
 86 |             </div>
 87 |           </div>
 88 |         </td>
 89 |         <td><input type="nunber" value="1" /></td>
 90 |         <td>$50.00</td>
 91 |       </tr>
 92 |     </table>
 93 | 
 94 |     <div class="total-price">
 95 |       <table>
 96 |         <tr>
 97 |           <td>Subtotal</td>
 98 |           <td>$200.00</td>
 99 |         </tr>
100 |         <tr>
101 |           <td>Tax</td>
102 |           <td>$30.00</td>
103 |         </tr>
104 |         <tr>
105 |           <td>Total</td>
106 |           <td>$230.00</td>
107 |         </tr>
108 |       </table>
109 |     </div>
110 |   </div>
111 |   <!-- Footer -->
112 |   <div class="footer">
113 |     <div class="container">
114 |       <div class="row">
115 |         <div class="footer-col-1">
116 |           <h3>Download Our App</h3>
117 |           <p>
118 |             Download App for Android <br />
119 |             and ios mobile phone
120 |           </p>
121 |           <div class="app-logo">
122 |             <img src="./assets/images/play-store.png" alt="" />
123 |             <img src="./assets/images/app-store.png" alt="" />
124 |           </div>
125 |         </div>
126 |         <div class="footer-col-2">
127 |           <img src="./assets/images/logo-white.png" alt="" />
128 |           <p>
129 |             Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.
130 |             Porro, eum?
131 |           </p>
132 |         </div>
133 |         <div class="footer-col-3">
134 |           <h3>Useful Links</h3>
135 |           <ul>
136 |             <li>Coupons</li>
137 |             <li>Blog Post</li>
138 |             <li>Return Policy</li>
139 |             <li>Join Affiliate</li>
140 |           </ul>
141 |         </div>
142 | 
143 |         <div class="footer-col-4">
144 |           <h3>Follow us</h3>
145 |           <ul>
146 |             <li>Facebook</li>
147 |             <li>Twitter</li>
148 |             <li>Instagram</li>
149 |             <li>YouTube</li>
150 |           </ul>
151 |         </div>
152 |       </div>
153 |       <hr />
154 |       <p class="copyright" id="copyright-text">Copyright 2020 - introidx</p>
155 |     </div>
156 |   </div>
157 |   <!-- JS for Toggle menu -->
158 |   <script src="./assets/js/toggleMenu.js"></script>
159 | </body>
160 | 
161 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Red store | Ecommerce Website Design</title>
  7 |     <link rel="stylesheet" href="./assets/css/style.css" />
  8 |     <link
  9 |       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
 10 |       rel="stylesheet"
 11 |     />
 12 |     <link
 13 |       rel="stylesheet"
 14 |       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
 15 |     />
 16 |   </head>
 17 |   <body>
 18 |     <div class="header">
 19 |       <div class="container">
 20 |         <div class="navbar">
 21 |           <div class="logo">
 22 |             <a href="index.html">
 23 |               <img src="./assets/images/logo.png" alt="" width="125px"
 24 |             /></a>
 25 |           </div>
 26 |           <nav>
 27 |             <ul id="MenuItems">
 28 |               <li><a href="index.html">Home</a></li>
 29 |               <li><a href="products.html">Products</a></li>
 30 |               <li><a href="">About</a></li>
 31 |               <li><a href="">Contact</a></li>
 32 |               <li><a href="account.html">Account</a></li>
 33 |               <!-- TODo: 22:20 -->
 34 |             </ul>
 35 |           </nav>
 36 |           <a href="cart.html"
 37 |             ><img src="./assets/images/cart.png" alt="" width="30px" height="30px"
 38 |           /></a>
 39 |           <img
 40 |             src="./assets/images/menu.png"
 41 |             alt=""
 42 |             class="menu-icon"
 43 |             onclick="menutoggle()"
 44 |           />
 45 |         </div>
 46 |         <div class="row">
 47 |           <div class="col-2">
 48 |             <h1>
 49 |               Give your Workout<br />
 50 |               a new Style!
 51 |             </h1>
 52 |             <p>
 53 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
 54 |               Voluptas rerum maiores animi officiis
 55 |             </p>
 56 |             <a href="" class="btn">Explore Now &#8594;</a>
 57 |           </div>
 58 |           <div class="col-2">
 59 |             <img src="./assets/images/image1.png" alt="" />
 60 |           </div>
 61 |         </div>
 62 |       </div>
 63 |     </div>
 64 |     <!----- Featurd Categories--------->
 65 |     <div class="categories">
 66 |       <div class="small-container">
 67 |         <div class="row">
 68 |           <div class="col-3">
 69 |             <img src="./assets/images/category-1.jpg" alt="" />
 70 |           </div>
 71 |           <div class="col-3">
 72 |             <img src="./assets/images/category-2.jpg" alt="" />
 73 |           </div>
 74 |           <div class="col-3">
 75 |             <img src="./assets/images/category-3.jpg" alt="" />
 76 |           </div>
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 |     <!----- Featurd Products--------->
 81 |     <div class="small-container">
 82 |       <h2 class="title">Featured Products</h2>
 83 |       <div class="row">
 84 |         <div class="col-4">
 85 |           <a href="product-details.html">
 86 |             <img src="./assets/images/product-1.jpg" alt=""
 87 |           /></a>
 88 |           <h4>Red Printed T-shirt</h4>
 89 |           <div class="rating">
 90 |             <i class="fa fa-star"></i>
 91 |             <i class="fa fa-star"></i>
 92 |             <i class="fa fa-star"></i>
 93 |             <i class="fa fa-star"></i>
 94 |             <i class="fa fa-star-o"></i>
 95 |           </div>
 96 |           <p>$50.00</p>
 97 |         </div>
 98 | 
 99 |         <div class="col-4">
100 |           <img src="./assets/images/product-2.jpg" alt="" />
101 |           <h4>Red Printed T-shirt</h4>
102 |           <div class="rating">
103 |             <i class="fa fa-star"></i>
104 |             <i class="fa fa-star"></i>
105 |             <i class="fa fa-star"></i>
106 |             <i class="fa fa-star-half-o"></i>
107 |             <i class="fa fa-star-o"></i>
108 |           </div>
109 |           <p>$50.00</p>
110 |         </div>
111 | 
112 |         <div class="col-4">
113 |           <img src="./assets/images/product-3.jpg" alt="" />
114 |           <h4>Red Printed T-shirt</h4>
115 |           <div class="rating">
116 |             <i class="fa fa-star"></i>
117 |             <i class="fa fa-star"></i>
118 |             <i class="fa fa-star"></i>
119 |             <i class="fa fa-star"></i>
120 |             <i class="fa fa-star-half-o"></i>
121 |           </div>
122 |           <p>$50.00</p>
123 |         </div>
124 |         <div class="col-4">
125 |           <img src="./assets/images/product-4.jpg" alt="" />
126 |           <h4>Red Printed T-shirt</h4>
127 |           <div class="rating">
128 |             <i class="fa fa-star"></i>
129 |             <i class="fa fa-star"></i>
130 |             <i class="fa fa-star"></i>
131 |             <i class="fa fa-star"></i>
132 |             <i class="fa fa-star-o"></i>
133 |           </div>
134 |           <p>$50.00</p>
135 |         </div>
136 |       </div>
137 |       <h2 class="title">Latest Products</h2>
138 |       <div class="row">
139 |         <div class="col-4">
140 |           <img src="./assets/images/product-5.jpg" alt="" />
141 |           <h4>Red Printed T-shirt</h4>
142 |           <div class="rating">
143 |             <i class="fa fa-star"></i>
144 |             <i class="fa fa-star"></i>
145 |             <i class="fa fa-star"></i>
146 |             <i class="fa fa-star"></i>
147 |             <i class="fa fa-star-o"></i>
148 |           </div>
149 |           <p>$50.00</p>
150 |         </div>
151 | 
152 |         <div class="col-4">
153 |           <img src="./assets/images/product-6.jpg" alt="" />
154 |           <h4>Red Printed T-shirt</h4>
155 |           <div class="rating">
156 |             <i class="fa fa-star"></i>
157 |             <i class="fa fa-star"></i>
158 |             <i class="fa fa-star"></i>
159 |             <i class="fa fa-star-half-o"></i>
160 |             <i class="fa fa-star-o"></i>
161 |           </div>
162 |           <p>$50.00</p>
163 |         </div>
164 | 
165 |         <div class="col-4">
166 |           <img src="./assets/images/product-7.jpg" alt="" />
167 |           <h4>Red Printed T-shirt</h4>
168 |           <div class="rating">
169 |             <i class="fa fa-star"></i>
170 |             <i class="fa fa-star"></i>
171 |             <i class="fa fa-star"></i>
172 |             <i class="fa fa-star"></i>
173 |             <i class="fa fa-star-half-o"></i>
174 |           </div>
175 |           <p>$50.00</p>
176 |         </div>
177 |         <div class="col-4">
178 |           <img src="./assets/images/product-8.jpg" alt="" />
179 |           <h4>Red Printed T-shirt</h4>
180 |           <div class="rating">
181 |             <i class="fa fa-star"></i>
182 |             <i class="fa fa-star"></i>
183 |             <i class="fa fa-star"></i>
184 |             <i class="fa fa-star"></i>
185 |             <i class="fa fa-star-o"></i>
186 |           </div>
187 |           <p>$50.00</p>
188 |         </div>
189 |       </div>
190 |       <div class="row">
191 |         <div class="col-4">
192 |           <img src="./assets/images/product-9.jpg" alt="" />
193 |           <h4>Red Printed T-shirt</h4>
194 |           <div class="rating">
195 |             <i class="fa fa-star"></i>
196 |             <i class="fa fa-star"></i>
197 |             <i class="fa fa-star"></i>
198 |             <i class="fa fa-star"></i>
199 |             <i class="fa fa-star-o"></i>
200 |           </div>
201 |           <p>$50.00</p>
202 |         </div>
203 | 
204 |         <div class="col-4">
205 |           <img src="./assets/images/product-10.jpg" alt="" />
206 |           <h4>Red Printed T-shirt</h4>
207 |           <div class="rating">
208 |             <i class="fa fa-star"></i>
209 |             <i class="fa fa-star"></i>
210 |             <i class="fa fa-star"></i>
211 |             <i class="fa fa-star-half-o"></i>
212 |             <i class="fa fa-star-o"></i>
213 |           </div>
214 |           <p>$50.00</p>
215 |         </div>
216 | 
217 |         <div class="col-4">
218 |           <img src="./assets/images/product-11.jpg" alt="" />
219 |           <h4>Red Printed T-shirt</h4>
220 |           <div class="rating">
221 |             <i class="fa fa-star"></i>
222 |             <i class="fa fa-star"></i>
223 |             <i class="fa fa-star"></i>
224 |             <i class="fa fa-star"></i>
225 |             <i class="fa fa-star-half-o"></i>
226 |           </div>
227 |           <p>$50.00</p>
228 |         </div>
229 |         <div class="col-4">
230 |           <img src="./assets/images/product-12.jpg" alt="" />
231 |           <h4>Red Printed T-shirt</h4>
232 |           <div class="rating">
233 |             <i class="fa fa-star"></i>
234 |             <i class="fa fa-star"></i>
235 |             <i class="fa fa-star"></i>
236 |             <i class="fa fa-star"></i>
237 |             <i class="fa fa-star-o"></i>
238 |           </div>
239 |           <p>$50.00</p>
240 |         </div>
241 |       </div>
242 |     </div>
243 | 
244 |     <!-------- Offer --------->
245 |     <div class="offer">
246 |       <div class="small-container">
247 |         <div class="row">
248 |           <div class="col-2">
249 |             <img src="./assets/images/exclusive.png" class="offer-img" alt="" />
250 |           </div>
251 |           <div class="col-2">
252 |             <p>Exclusively available on RedStore</p>
253 |             <h1>Smart Band 4</h1>
254 |             <small
255 |               >Lorem ipsum dolor sit amet consectetur adipisicing elit.
256 |               Excepturi rerum maiores eveniet minus ut deserunt vitae
257 |             </small>
258 |             <a href="" class="btn">Buy Now &#8594;</a>
259 |           </div>
260 |         </div>
261 |       </div>
262 |     </div>
263 | 
264 |     <!------ Testimonial  ------>
265 |     <div class="testimonial">
266 |       <div class="small-container">
267 |         <div class="row">
268 |           <div class="col-3">
269 |             <i class="fa fa-quote-left"></i>
270 | 
271 |             <p>
272 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse
273 |               quae ex sequi praesentium fuga voluptatem placeat voluptates odio
274 |               rerum.
275 |             </p>
276 |             <div class="rating">
277 |               <i class="fa fa-star"></i>
278 |               <i class="fa fa-star"></i>
279 |               <i class="fa fa-star"></i>
280 |               <i class="fa fa-star"></i>
281 |               <i class="fa fa-star-o"></i>
282 |             </div>
283 |             <img src="./assets/images/user-1.png" alt="" />
284 |             <h3>Sean Parker</h3>
285 |           </div>
286 | 
287 |           <div class="col-3">
288 |             <i class="fa fa-quote-left"></i>
289 | 
290 |             <p>
291 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse
292 |               quae ex sequi praesentium fuga voluptatem placeat voluptates odio
293 |               rerum.
294 |             </p>
295 |             <div class="rating">
296 |               <i class="fa fa-star"></i>
297 |               <i class="fa fa-star"></i>
298 |               <i class="fa fa-star"></i>
299 |               <i class="fa fa-star"></i>
300 |               <i class="fa fa-star-o"></i>
301 |             </div>
302 |             <img src="./assets/images/user-2.png" alt="" />
303 |             <h3>Michel Joe</h3>
304 |           </div>
305 | 
306 |           <div class="col-3">
307 |             <i class="fa fa-quote-left"></i>
308 | 
309 |             <p>
310 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse
311 |               quae ex sequi praesentium fuga voluptatem placeat voluptates odio
312 |               rerum.
313 |             </p>
314 |             <div class="rating">
315 |               <i class="fa fa-star"></i>
316 |               <i class="fa fa-star"></i>
317 |               <i class="fa fa-star"></i>
318 |               <i class="fa fa-star"></i>
319 |               <i class="fa fa-star-o"></i>
320 |             </div>
321 |             <img src="./assets/images/user-3.png" alt="" />
322 |             <h3>Kaily Jenner</h3>
323 |           </div>
324 |         </div>
325 |       </div>
326 |     </div>
327 | 
328 |     <!-- Brands -->
329 | 
330 |     <div class="brands">
331 |       <div class="small-container">
332 |         <div class="row">
333 |           <div class="col-5">
334 |             <img src="./assets/images/logo-godrej.png" alt="" />
335 |           </div>
336 |           <div class="col-5">
337 |             <img src="./assets/images/logo-oppo.png" alt="" />
338 |           </div>
339 |           <div class="col-5">
340 |             <img src="./assets/images/logo-paypal.png" alt="" />
341 |           </div>
342 |           <div class="col-5">
343 |             <img src="./assets/images/logo-philips.png" alt="" />
344 |           </div>
345 |           <div class="col-5">
346 |             <img src="./assets/images/logo-coca-cola.png" alt="" />
347 |           </div>
348 |         </div>
349 |       </div>
350 |     </div>
351 | 
352 |     <!-- Footer -->
353 |     <div class="footer">
354 |       <div class="container">
355 |         <div class="row">
356 |           <div class="footer-col-1">
357 |             <h3>Download Our App</h3>
358 |             <p>
359 |               Download App for Android <br />
360 |               and ios mobile phone
361 |             </p>
362 |             <div class="app-logo">
363 |               <img src="./assets/images/play-store.png" alt="" />
364 |               <img src="./assets/images/app-store.png" alt="" />
365 |             </div>
366 |           </div>
367 |           <div class="footer-col-2">
368 |             <img src="./assets/images/logo-white.png" alt="" />
369 |             <p>
370 |               Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.
371 |               Porro, eum?
372 |             </p>
373 |           </div>
374 |           <div class="footer-col-3">
375 |             <h3>Useful Links</h3>
376 |             <ul>
377 |               <li>Coupons</li>
378 |               <li>Blog Post</li>
379 |               <li>Return Policy</li>
380 |               <li>Join Affiliate</li>
381 |             </ul>
382 |           </div>
383 | 
384 |           <div class="footer-col-4">
385 |             <h3>Follow us</h3>
386 |             <ul>
387 |               <li>Facebook</li>
388 |               <li>Twitter</li>
389 |               <li>Instagram</li>
390 |               <li>YouTube</li>
391 |             </ul>
392 |           </div>
393 |         </div>
394 |         <hr />
395 |         <p class="copyright" id="copyright-text">Copyright 2020 - introidx</p>
396 |       </div>
397 |     </div>
398 |     
399 |     <!-- scripts -->
400 |     <script src="../assets/js/toggleMenu.js"></script>
401 |   </body>
402 | </html>
403 | 


--------------------------------------------------------------------------------
/product-details.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>All Products - Red store</title>
  8 |   <link rel="stylesheet" href="./assets/css/style.css" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div class="container">
 17 |     <div class="navbar">
 18 |       <div class="logo">
 19 |         <a href="index.html">
 20 |           <img src="./assets/images/logo.png" alt="" width="125px" /></a>
 21 |       </div>
 22 |       <nav>
 23 |         <ul id="MenuItems">
 24 |           <li><a href="index.html">Home</a></li>
 25 |           <li><a href="products.html">Products</a></li>
 26 |           <li><a href="">About</a></li>
 27 |           <li><a href="">Contact</a></li>
 28 |           <li><a href="account.html">Account</a></li>
 29 |           <!-- TODo: 22:20 -->
 30 |         </ul>
 31 |       </nav>
 32 |       <a href="cart.html"><img src="./assets/images/cart.png" alt="" width="30px" height="30px" /></a>
 33 |       <img src="./assets/images/menu.png" alt="" class="menu-icon" onclick="menutoggle()" />
 34 |     </div>
 35 |   </div>
 36 | 
 37 |   <!-- Single Products Detail -->
 38 |   <div class="small-container single-product">
 39 |     <div class="row">
 40 |       <div class="col-2">
 41 |         <img src="./assets/images/gallery-1.jpg" width="100%" id="ProductImg" />
 42 | 
 43 |         <div class="small-img-row">
 44 |           <div class="small-img-col">
 45 |             <img src="./assets/images/gallery-1.jpg" class="small-img" />
 46 |           </div>
 47 |           <div class="small-img-col">
 48 |             <img src="./assets/images/gallery-2.jpg" class="small-img" />
 49 |           </div>
 50 |           <div class="small-img-col">
 51 |             <img src="./assets/images/gallery-3.jpg" class="small-img" />
 52 |           </div>
 53 |           <div class="small-img-col">
 54 |             <img src="./assets/images/gallery-4.jpg" class="small-img" />
 55 |           </div>
 56 |         </div>
 57 |       </div>
 58 |       <div class="col-2">
 59 |         <p>Home / T-shirt</p>
 60 |         <h2>Red Printed T-Shirt By HRX</h2>
 61 |         <h4>$50.00</h4>
 62 |         <select name="" id="">
 63 |           <option value="">Select Size</option>
 64 |           <option value="">XXL</option>
 65 |           <option value="">XL</option>
 66 |           <option value="">Large</option>
 67 |           <option value="">Medium</option>
 68 |           <option value="">Small</option>
 69 |         </select>
 70 |         <input type="number" value="1" />
 71 |         <a href="" class="btn">Add to Cart</a>
 72 |         <h3>Product Details<i class="fa fa-indent"></i></h3>
 73 |         <br />
 74 |         <p>
 75 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nemo
 76 |           nam magnam rerum sunt explicabo! Distinctio ipsam doloremque nostrum
 77 |           ipsum?
 78 |         </p>
 79 |       </div>
 80 |     </div>
 81 |   </div>
 82 | 
 83 |   <!-- Title -->
 84 |   <div class="small-container">
 85 |     <div class="row row-2">
 86 |       <h2>Related Products</h2>
 87 |       <p>View More</p>
 88 |     </div>
 89 |   </div>
 90 | 
 91 |   <!-- Similar Products -->
 92 | 
 93 |   <div class="small-container">
 94 |     <div class="row">
 95 |       <div class="col-4">
 96 |         <img src="./assets/images/product-9.jpg" alt="" />
 97 |         <h4>Red Printed T-shirt</h4>
 98 |         <div class="rating">
 99 |           <i class="fa fa-star"></i>
100 |           <i class="fa fa-star"></i>
101 |           <i class="fa fa-star"></i>
102 |           <i class="fa fa-star"></i>
103 |           <i class="fa fa-star-o"></i>
104 |         </div>
105 |         <p>$50.00</p>
106 |       </div>
107 | 
108 |       <div class="col-4">
109 |         <img src="./assets/images/product-10.jpg" alt="" />
110 |         <h4>Red Printed T-shirt</h4>
111 |         <div class="rating">
112 |           <i class="fa fa-star"></i>
113 |           <i class="fa fa-star"></i>
114 |           <i class="fa fa-star"></i>
115 |           <i class="fa fa-star-half-o"></i>
116 |           <i class="fa fa-star-o"></i>
117 |         </div>
118 |         <p>$50.00</p>
119 |       </div>
120 | 
121 |       <div class="col-4">
122 |         <img src="./assets/images/product-11.jpg" alt="" />
123 |         <h4>Red Printed T-shirt</h4>
124 |         <div class="rating">
125 |           <i class="fa fa-star"></i>
126 |           <i class="fa fa-star"></i>
127 |           <i class="fa fa-star"></i>
128 |           <i class="fa fa-star"></i>
129 |           <i class="fa fa-star-half-o"></i>
130 |         </div>
131 |         <p>$50.00</p>
132 |       </div>
133 |       <div class="col-4">
134 |         <img src="./assets/images/product-12.jpg" alt="" />
135 |         <h4>Red Printed T-shirt</h4>
136 |         <div class="rating">
137 |           <i class="fa fa-star"></i>
138 |           <i class="fa fa-star"></i>
139 |           <i class="fa fa-star"></i>
140 |           <i class="fa fa-star"></i>
141 |           <i class="fa fa-star-o"></i>
142 |         </div>
143 |         <p>$50.00</p>
144 |       </div>
145 |     </div>
146 |   </div>
147 | 
148 |   <!-- Footer -->
149 |   <div class="footer">
150 |     <div class="container">
151 |       <div class="row">
152 |         <div class="footer-col-1">
153 |           <h3>Download Our App</h3>
154 |           <p>
155 |             Download App for Android <br />
156 |             and ios mobile phone
157 |           </p>
158 |           <div class="app-logo">
159 |             <img src="./assets/images/play-store.png" alt="" />
160 |             <img src="./assets/images/app-store.png" alt="" />
161 |           </div>
162 |         </div>
163 |         <div class="footer-col-2">
164 |           <img src="./assets/images/logo-white.png" alt="" />
165 |           <p>
166 |             Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.
167 |             Porro, eum?
168 |           </p>
169 |         </div>
170 |         <div class="footer-col-3">
171 |           <h3>Useful Links</h3>
172 |           <ul>
173 |             <li>Coupons</li>
174 |             <li>Blog Post</li>
175 |             <li>Return Policy</li>
176 |             <li>Join Affiliate</li>
177 |           </ul>
178 |         </div>
179 | 
180 |         <div class="footer-col-4">
181 |           <h3>Follow us</h3>
182 |           <ul>
183 |             <li>Facebook</li>
184 |             <li>Twitter</li>
185 |             <li>Instagram</li>
186 |             <li>YouTube</li>
187 |           </ul>
188 |         </div>
189 |       </div>
190 |       <hr />
191 |       <p class="copyright" id="copyright-text">Copyright 2020 - introidx</p>
192 |     </div>
193 |   </div>
194 | 
195 |   <!-- scripts -->
196 |   <script src="./assets/js/gallery.js"></script>
197 |   <!-- JS for Toggle menu -->
198 |   <script src="./assets/js/toggleMenu.js"></script>
199 | </body>
200 | 
201 | </html>


--------------------------------------------------------------------------------
/products.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>All Products - Red store</title>
  8 |   <link rel="stylesheet" href="./assets/css/style.css" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div class="container">
 17 |     <div class="navbar">
 18 |       <div class="logo">
 19 |         <a href="index.html">
 20 |           <img src="./assets/images/logo.png" alt="" width="125px" /></a>
 21 |       </div>
 22 |       <nav>
 23 |         <ul id="MenuItems">
 24 |           <li><a href="index.html">Home</a></li>
 25 |           <li><a href="products.html">Products</a></li>
 26 |           <li><a href="">About</a></li>
 27 |           <li><a href="">Contact</a></li>
 28 |           <li><a href="account.html">Account</a></li>
 29 |           <!-- TODo: 22:20 -->
 30 |         </ul>
 31 |       </nav>
 32 |       <a href="cart.html"><img src="./assets/images/cart.png" alt="" width="30px" height="30px" /></a>
 33 |       <img src="./assets/images/menu.png" alt="" class="menu-icon" onclick="menutoggle()" />
 34 |     </div>
 35 |   </div>
 36 | 
 37 |   <div class="small-container">
 38 |     <div class="row row-2">
 39 |       <h2>All Products</h2>
 40 |       <select name="" id="">
 41 |         <option value="">Default Sorting</option>
 42 |         <option value="">Sort by Price</option>
 43 |         <option value="">Sort by Popularity</option>
 44 |         <option value="">Sort by Rating</option>
 45 |         <option value="">Sort by sales</option>
 46 |       </select>
 47 |     </div>
 48 | 
 49 |     <div class="row">
 50 |       <div class="col-4">
 51 |         <img src="./assets/images/product-1.jpg" alt="" />
 52 |         <h4>Red Printed T-shirt</h4>
 53 |         <div class="rating">
 54 |           <i class="fa fa-star"></i>
 55 |           <i class="fa fa-star"></i>
 56 |           <i class="fa fa-star"></i>
 57 |           <i class="fa fa-star"></i>
 58 |           <i class="fa fa-star-o"></i>
 59 |         </div>
 60 |         <p>$50.00</p>
 61 |       </div>
 62 | 
 63 |       <div class="col-4">
 64 |         <img src="./assets/images/product-2.jpg" alt="" />
 65 |         <h4>Red Printed T-shirt</h4>
 66 |         <div class="rating">
 67 |           <i class="fa fa-star"></i>
 68 |           <i class="fa fa-star"></i>
 69 |           <i class="fa fa-star"></i>
 70 |           <i class="fa fa-star-half-o"></i>
 71 |           <i class="fa fa-star-o"></i>
 72 |         </div>
 73 |         <p>$50.00</p>
 74 |       </div>
 75 | 
 76 |       <div class="col-4">
 77 |         <img src="./assets/images/product-3.jpg" alt="" />
 78 |         <h4>Red Printed T-shirt</h4>
 79 |         <div class="rating">
 80 |           <i class="fa fa-star"></i>
 81 |           <i class="fa fa-star"></i>
 82 |           <i class="fa fa-star"></i>
 83 |           <i class="fa fa-star"></i>
 84 |           <i class="fa fa-star-half-o"></i>
 85 |         </div>
 86 |         <p>$50.00</p>
 87 |       </div>
 88 |       <div class="col-4">
 89 |         <img src="./assets/images/product-4.jpg" alt="" />
 90 |         <h4>Red Printed T-shirt</h4>
 91 |         <div class="rating">
 92 |           <i class="fa fa-star"></i>
 93 |           <i class="fa fa-star"></i>
 94 |           <i class="fa fa-star"></i>
 95 |           <i class="fa fa-star"></i>
 96 |           <i class="fa fa-star-o"></i>
 97 |         </div>
 98 |         <p>$50.00</p>
 99 |       </div>
100 |     </div>
101 |     <div class="row">
102 |       <div class="col-4">
103 |         <img src="./assets/images/product-5.jpg" alt="" />
104 |         <h4>Red Printed T-shirt</h4>
105 |         <div class="rating">
106 |           <i class="fa fa-star"></i>
107 |           <i class="fa fa-star"></i>
108 |           <i class="fa fa-star"></i>
109 |           <i class="fa fa-star"></i>
110 |           <i class="fa fa-star-o"></i>
111 |         </div>
112 |         <p>$50.00</p>
113 |       </div>
114 | 
115 |       <div class="col-4">
116 |         <img src="./assets/images/product-6.jpg" alt="" />
117 |         <h4>Red Printed T-shirt</h4>
118 |         <div class="rating">
119 |           <i class="fa fa-star"></i>
120 |           <i class="fa fa-star"></i>
121 |           <i class="fa fa-star"></i>
122 |           <i class="fa fa-star-half-o"></i>
123 |           <i class="fa fa-star-o"></i>
124 |         </div>
125 |         <p>$50.00</p>
126 |       </div>
127 | 
128 |       <div class="col-4">
129 |         <img src="./assets/images/product-7.jpg" alt="" />
130 |         <h4>Red Printed T-shirt</h4>
131 |         <div class="rating">
132 |           <i class="fa fa-star"></i>
133 |           <i class="fa fa-star"></i>
134 |           <i class="fa fa-star"></i>
135 |           <i class="fa fa-star"></i>
136 |           <i class="fa fa-star-half-o"></i>
137 |         </div>
138 |         <p>$50.00</p>
139 |       </div>
140 |       <div class="col-4">
141 |         <img src="./assets/images/product-8.jpg" alt="" />
142 |         <h4>Red Printed T-shirt</h4>
143 |         <div class="rating">
144 |           <i class="fa fa-star"></i>
145 |           <i class="fa fa-star"></i>
146 |           <i class="fa fa-star"></i>
147 |           <i class="fa fa-star"></i>
148 |           <i class="fa fa-star-o"></i>
149 |         </div>
150 |         <p>$50.00</p>
151 |       </div>
152 |     </div>
153 |     <div class="row">
154 |       <div class="col-4">
155 |         <img src="./assets/images/product-9.jpg" alt="" />
156 |         <h4>Red Printed T-shirt</h4>
157 |         <div class="rating">
158 |           <i class="fa fa-star"></i>
159 |           <i class="fa fa-star"></i>
160 |           <i class="fa fa-star"></i>
161 |           <i class="fa fa-star"></i>
162 |           <i class="fa fa-star-o"></i>
163 |         </div>
164 |         <p>$50.00</p>
165 |       </div>
166 | 
167 |       <div class="col-4">
168 |         <img src="./assets/images/product-10.jpg" alt="" />
169 |         <h4>Red Printed T-shirt</h4>
170 |         <div class="rating">
171 |           <i class="fa fa-star"></i>
172 |           <i class="fa fa-star"></i>
173 |           <i class="fa fa-star"></i>
174 |           <i class="fa fa-star-half-o"></i>
175 |           <i class="fa fa-star-o"></i>
176 |         </div>
177 |         <p>$50.00</p>
178 |       </div>
179 | 
180 |       <div class="col-4">
181 |         <img src="./assets/images/product-11.jpg" alt="" />
182 |         <h4>Red Printed T-shirt</h4>
183 |         <div class="rating">
184 |           <i class="fa fa-star"></i>
185 |           <i class="fa fa-star"></i>
186 |           <i class="fa fa-star"></i>
187 |           <i class="fa fa-star"></i>
188 |           <i class="fa fa-star-half-o"></i>
189 |         </div>
190 |         <p>$50.00</p>
191 |       </div>
192 |       <div class="col-4">
193 |         <img src="./assets/images/product-12.jpg" alt="" />
194 |         <h4>Red Printed T-shirt</h4>
195 |         <div class="rating">
196 |           <i class="fa fa-star"></i>
197 |           <i class="fa fa-star"></i>
198 |           <i class="fa fa-star"></i>
199 |           <i class="fa fa-star"></i>
200 |           <i class="fa fa-star-o"></i>
201 |         </div>
202 |         <p>$50.00</p>
203 |       </div>
204 |     </div>
205 | 
206 |     <div class="page-btn">
207 |       <span>1</span>
208 |       <span>2</span>
209 |       <span>3</span>
210 |       <span>4</span>
211 |       <span>&#8594;</span>
212 |     </div>
213 |   </div>
214 | 
215 |   <!-- Footer -->
216 |   <div class="footer">
217 |     <div class="container">
218 |       <div class="row">
219 |         <div class="footer-col-1">
220 |           <h3>Download Our App</h3>
221 |           <p>
222 |             Download App for Android <br />
223 |             and ios mobile phone
224 |           </p>
225 |           <div class="app-logo">
226 |             <img src="./assets/images/play-store.png" alt="" />
227 |             <img src="./assets/images/app-store.png" alt="" />
228 |           </div>
229 |         </div>
230 |         <div class="footer-col-2">
231 |           <img src="./assets/images/logo-white.png" alt="" />
232 |           <p>
233 |             Lorem, ipsum dolor sit amet consectetur <br />adipisicing elit.
234 |             Porro, eum?
235 |           </p>
236 |         </div>
237 |         <div class="footer-col-3">
238 |           <h3>Useful Links</h3>
239 |           <ul>
240 |             <li>Coupons</li>
241 |             <li>Blog Post</li>
242 |             <li>Return Policy</li>
243 |             <li>Join Affiliate</li>
244 |           </ul>
245 |         </div>
246 | 
247 |         <div class="footer-col-4">
248 |           <h3>Follow us</h3>
249 |           <ul>
250 |             <li>Facebook</li>
251 |             <li>Twitter</li>
252 |             <li>Instagram</li>
253 |             <li>YouTube</li>
254 |           </ul>
255 |         </div>
256 |       </div>
257 |       <hr />
258 |       <p class="copyright" id="copyright-text">Copyright 2020 - introidx</p>
259 |     </div>
260 |   </div>
261 |   <!-- JS for Toggle menu -->
262 |   <script src="./assets/js/toggleMenu.js"></script>
263 | </body>
264 | 
265 | </html>


--------------------------------------------------------------------------------
/rellax.min.js:
--------------------------------------------------------------------------------
  1 | (function (q, g) {
  2 |   "function" === typeof define && define.amd
  3 |     ? define([], g)
  4 |     : "object" === typeof module && module.exports
  5 |     ? (module.exports = g())
  6 |     : (q.Rellax = g());
  7 | })("undefined" !== typeof window ? window : global, function () {
  8 |   var q = function (g, u) {
  9 |     function C() {
 10 |       if (
 11 |         3 === a.options.breakpoints.length &&
 12 |         Array.isArray(a.options.breakpoints)
 13 |       ) {
 14 |         var f = !0,
 15 |           c = !0,
 16 |           b;
 17 |         a.options.breakpoints.forEach(function (a) {
 18 |           "number" !== typeof a && (c = !1);
 19 |           null !== b && a < b && (f = !1);
 20 |           b = a;
 21 |         });
 22 |         if (f && c) return;
 23 |       }
 24 |       a.options.breakpoints = [576, 768, 1201];
 25 |       console.warn(
 26 |         "Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted"
 27 |       );
 28 |     }
 29 |     var a = Object.create(q.prototype),
 30 |       l = 0,
 31 |       v = 0,
 32 |       m = 0,
 33 |       n = 0,
 34 |       d = [],
 35 |       w = !0,
 36 |       A =
 37 |         window.requestAnimationFrame ||
 38 |         window.webkitRequestAnimationFrame ||
 39 |         window.mozRequestAnimationFrame ||
 40 |         window.msRequestAnimationFrame ||
 41 |         window.oRequestAnimationFrame ||
 42 |         function (a) {
 43 |           return setTimeout(a, 1e3 / 60);
 44 |         },
 45 |       p = null,
 46 |       x = !1;
 47 |     try {
 48 |       var k = Object.defineProperty({}, "passive", {
 49 |         get: function () {
 50 |           x = !0;
 51 |         },
 52 |       });
 53 |       window.addEventListener("testPassive", null, k);
 54 |       window.removeEventListener("testPassive", null, k);
 55 |     } catch (f) {}
 56 |     var D =
 57 |         window.cancelAnimationFrame ||
 58 |         window.mozCancelAnimationFrame ||
 59 |         clearTimeout,
 60 |       E =
 61 |         window.transformProp ||
 62 |         (function () {
 63 |           var a = document.createElement("div");
 64 |           if (null === a.style.transform) {
 65 |             var c = ["Webkit", "Moz", "ms"],
 66 |               b;
 67 |             for (b in c)
 68 |               if (void 0 !== a.style[c[b] + "Transform"])
 69 |                 return c[b] + "Transform";
 70 |           }
 71 |           return "transform";
 72 |         })();
 73 |     a.options = {
 74 |       speed: -2,
 75 |       verticalSpeed: null,
 76 |       horizontalSpeed: null,
 77 |       breakpoints: [576, 768, 1201],
 78 |       center: !1,
 79 |       wrapper: null,
 80 |       relativeToWrapper: !1,
 81 |       round: !0,
 82 |       vertical: !0,
 83 |       horizontal: !1,
 84 |       verticalScrollAxis: "y",
 85 |       horizontalScrollAxis: "x",
 86 |       callback: function () {},
 87 |     };
 88 |     u &&
 89 |       Object.keys(u).forEach(function (d) {
 90 |         a.options[d] = u[d];
 91 |       });
 92 |     u && u.breakpoints && C();
 93 |     g || (g = ".rellax");
 94 |     k = "string" === typeof g ? document.querySelectorAll(g) : [g];
 95 |     if (0 < k.length) {
 96 |       a.elems = k;
 97 |       if (a.options.wrapper && !a.options.wrapper.nodeType)
 98 |         if ((k = document.querySelector(a.options.wrapper)))
 99 |           a.options.wrapper = k;
100 |         else {
101 |           console.warn(
102 |             "Rellax: The wrapper you're trying to use doesn't exist."
103 |           );
104 |           return;
105 |         }
106 |       var F,
107 |         B = function () {
108 |           for (var f = 0; f < d.length; f++)
109 |             a.elems[f].style.cssText = d[f].style;
110 |           d = [];
111 |           v = window.innerHeight;
112 |           n = window.innerWidth;
113 |           f = a.options.breakpoints;
114 |           F =
115 |             n < f[0]
116 |               ? "xs"
117 |               : n >= f[0] && n < f[1]
118 |               ? "sm"
119 |               : n >= f[1] && n < f[2]
120 |               ? "md"
121 |               : "lg";
122 |           H();
123 |           for (f = 0; f < a.elems.length; f++) {
124 |             var c = void 0,
125 |               b = a.elems[f],
126 |               e = b.getAttribute("data-rellax-percentage"),
127 |               y = b.getAttribute("data-rellax-speed"),
128 |               t = b.getAttribute("data-rellax-xs-speed"),
129 |               g = b.getAttribute("data-rellax-mobile-speed"),
130 |               h = b.getAttribute("data-rellax-tablet-speed"),
131 |               k = b.getAttribute("data-rellax-desktop-speed"),
132 |               l = b.getAttribute("data-rellax-vertical-speed"),
133 |               m = b.getAttribute("data-rellax-horizontal-speed"),
134 |               p = b.getAttribute("data-rellax-vertical-scroll-axis"),
135 |               q = b.getAttribute("data-rellax-horizontal-scroll-axis"),
136 |               u = b.getAttribute("data-rellax-zindex") || 0,
137 |               x = b.getAttribute("data-rellax-min"),
138 |               A = b.getAttribute("data-rellax-max"),
139 |               C = b.getAttribute("data-rellax-min-x"),
140 |               D = b.getAttribute("data-rellax-max-x"),
141 |               E = b.getAttribute("data-rellax-min-y"),
142 |               L = b.getAttribute("data-rellax-max-y"),
143 |               r = !0;
144 |             t || g || h || k ? (c = { xs: t, sm: g, md: h, lg: k }) : (r = !1);
145 |             t = a.options.wrapper
146 |               ? a.options.wrapper.scrollTop
147 |               : window.pageYOffset ||
148 |                 document.documentElement.scrollTop ||
149 |                 document.body.scrollTop;
150 |             a.options.relativeToWrapper &&
151 |               (t =
152 |                 (window.pageYOffset ||
153 |                   document.documentElement.scrollTop ||
154 |                   document.body.scrollTop) - a.options.wrapper.offsetTop);
155 |             var z = a.options.vertical ? (e || a.options.center ? t : 0) : 0,
156 |               I = a.options.horizontal
157 |                 ? e || a.options.center
158 |                   ? a.options.wrapper
159 |                     ? a.options.wrapper.scrollLeft
160 |                     : window.pageXOffset ||
161 |                       document.documentElement.scrollLeft ||
162 |                       document.body.scrollLeft
163 |                   : 0
164 |                 : 0;
165 |             t = z + b.getBoundingClientRect().top;
166 |             g = b.clientHeight || b.offsetHeight || b.scrollHeight;
167 |             h = I + b.getBoundingClientRect().left;
168 |             k = b.clientWidth || b.offsetWidth || b.scrollWidth;
169 |             z = e ? e : (z - t + v) / (g + v);
170 |             e = e ? e : (I - h + n) / (k + n);
171 |             a.options.center && (z = e = 0.5);
172 |             c = r && null !== c[F] ? Number(c[F]) : y ? y : a.options.speed;
173 |             l = l ? l : a.options.verticalSpeed;
174 |             m = m ? m : a.options.horizontalSpeed;
175 |             p = p ? p : a.options.verticalScrollAxis;
176 |             q = q ? q : a.options.horizontalScrollAxis;
177 |             y = J(e, z, c, l, m);
178 |             b = b.style.cssText;
179 |             r = "";
180 |             if ((e = /transform\s*:/i.exec(b)))
181 |               (r = b.slice(e.index)),
182 |                 (r = (e = r.indexOf(";"))
183 |                   ? " " + r.slice(11, e).replace(/\s/g, "")
184 |                   : " " + r.slice(11).replace(/\s/g, ""));
185 |             d.push({
186 |               baseX: y.x,
187 |               baseY: y.y,
188 |               top: t,
189 |               left: h,
190 |               height: g,
191 |               width: k,
192 |               speed: c,
193 |               verticalSpeed: l,
194 |               horizontalSpeed: m,
195 |               verticalScrollAxis: p,
196 |               horizontalScrollAxis: q,
197 |               style: b,
198 |               transform: r,
199 |               zindex: u,
200 |               min: x,
201 |               max: A,
202 |               minX: C,
203 |               maxX: D,
204 |               minY: E,
205 |               maxY: L,
206 |             });
207 |           }
208 |           K();
209 |           w && (window.addEventListener("resize", B), (w = !1), G());
210 |         },
211 |         H = function () {
212 |           var d = l,
213 |             c = m;
214 |           l = a.options.wrapper
215 |             ? a.options.wrapper.scrollTop
216 |             : (
217 |                 document.documentElement ||
218 |                 document.body.parentNode ||
219 |                 document.body
220 |               ).scrollTop || window.pageYOffset;
221 |           m = a.options.wrapper
222 |             ? a.options.wrapper.scrollLeft
223 |             : (
224 |                 document.documentElement ||
225 |                 document.body.parentNode ||
226 |                 document.body
227 |               ).scrollLeft || window.pageXOffset;
228 |           a.options.relativeToWrapper &&
229 |             (l =
230 |               ((
231 |                 document.documentElement ||
232 |                 document.body.parentNode ||
233 |                 document.body
234 |               ).scrollTop || window.pageYOffset) - a.options.wrapper.offsetTop);
235 |           return (d != l && a.options.vertical) ||
236 |             (c != m && a.options.horizontal)
237 |             ? !0
238 |             : !1;
239 |         },
240 |         J = function (d, c, b, e, g) {
241 |           var f = {};
242 |           d = 100 * (g ? g : b) * (1 - d);
243 |           c = 100 * (e ? e : b) * (1 - c);
244 |           f.x = a.options.round ? Math.round(d) : Math.round(100 * d) / 100;
245 |           f.y = a.options.round ? Math.round(c) : Math.round(100 * c) / 100;
246 |           return f;
247 |         },
248 |         h = function () {
249 |           window.removeEventListener("resize", h);
250 |           window.removeEventListener("orientationchange", h);
251 |           (a.options.wrapper ? a.options.wrapper : window).removeEventListener(
252 |             "scroll",
253 |             h
254 |           );
255 |           (a.options.wrapper
256 |             ? a.options.wrapper
257 |             : document
258 |           ).removeEventListener("touchmove", h);
259 |           p = A(G);
260 |         },
261 |         G = function () {
262 |           H() && !1 === w
263 |             ? (K(), (p = A(G)))
264 |             : ((p = null),
265 |               window.addEventListener("resize", h),
266 |               window.addEventListener("orientationchange", h),
267 |               (a.options.wrapper ? a.options.wrapper : window).addEventListener(
268 |                 "scroll",
269 |                 h,
270 |                 x ? { passive: !0 } : !1
271 |               ),
272 |               (a.options.wrapper
273 |                 ? a.options.wrapper
274 |                 : document
275 |               ).addEventListener("touchmove", h, x ? { passive: !0 } : !1));
276 |         },
277 |         K = function () {
278 |           for (var f, c = 0; c < a.elems.length; c++) {
279 |             var b = d[c].verticalScrollAxis.toLowerCase(),
280 |               e = d[c].horizontalScrollAxis.toLowerCase();
281 |             f = -1 != b.indexOf("x") ? l : 0;
282 |             b = -1 != b.indexOf("y") ? l : 0;
283 |             var g = -1 != e.indexOf("x") ? m : 0;
284 |             e = -1 != e.indexOf("y") ? m : 0;
285 |             f = J(
286 |               (f + g - d[c].left + n) / (d[c].width + n),
287 |               (b + e - d[c].top + v) / (d[c].height + v),
288 |               d[c].speed,
289 |               d[c].verticalSpeed,
290 |               d[c].horizontalSpeed
291 |             );
292 |             e = f.y - d[c].baseY;
293 |             b = f.x - d[c].baseX;
294 |             null !== d[c].min &&
295 |               (a.options.vertical &&
296 |                 !a.options.horizontal &&
297 |                 (e = e <= d[c].min ? d[c].min : e),
298 |               a.options.horizontal &&
299 |                 !a.options.vertical &&
300 |                 (b = b <= d[c].min ? d[c].min : b));
301 |             null != d[c].minY && (e = e <= d[c].minY ? d[c].minY : e);
302 |             null != d[c].minX && (b = b <= d[c].minX ? d[c].minX : b);
303 |             null !== d[c].max &&
304 |               (a.options.vertical &&
305 |                 !a.options.horizontal &&
306 |                 (e = e >= d[c].max ? d[c].max : e),
307 |               a.options.horizontal &&
308 |                 !a.options.vertical &&
309 |                 (b = b >= d[c].max ? d[c].max : b));
310 |             null != d[c].maxY && (e = e >= d[c].maxY ? d[c].maxY : e);
311 |             null != d[c].maxX && (b = b >= d[c].maxX ? d[c].maxX : b);
312 |             a.elems[c].style[E] =
313 |               "translate3d(" +
314 |               (a.options.horizontal ? b : "0") +
315 |               "px," +
316 |               (a.options.vertical ? e : "0") +
317 |               "px," +
318 |               d[c].zindex +
319 |               "px) " +
320 |               d[c].transform;
321 |           }
322 |           a.options.callback(f);
323 |         };
324 |       a.destroy = function () {
325 |         for (var f = 0; f < a.elems.length; f++)
326 |           a.elems[f].style.cssText = d[f].style;
327 |         w || (window.removeEventListener("resize", B), (w = !0));
328 |         D(p);
329 |         p = null;
330 |       };
331 |       B();
332 |       a.refresh = B;
333 |       return a;
334 |     }
335 |     console.warn("Rellax: The elements you're trying to select don't exist.");
336 |   };
337 |   return q;
338 | });
339 | 


--------------------------------------------------------------------------------