├── cart.html ├── images ├── banner1.jpg ├── banner2.jpg ├── brand1.png ├── brand2.png ├── brand3.png ├── brand4.png ├── brand5.png ├── brand6.png ├── brand7.png ├── favicon.png ├── hero-1.png ├── hero-2.png ├── hero-3.png ├── hero.png ├── logo.png ├── nav.png ├── payment.png ├── product-1.jpg ├── product-10.jpg ├── product-11.jpg ├── product-12.jpg ├── product-13.jpg ├── product-14.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 ├── promo1.jpg ├── promo2.jpg ├── promo3.jpg ├── promo4.jpg ├── promo5.jpg ├── promo6.jpg ├── search.svg └── shoppingBag.svg ├── index.html ├── js ├── index.js └── slider.js ├── productDetails.html ├── products.html └── styles.css /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | Codevo - Ecommerce Website 17 | 18 | 19 | 20 | 21 | 22 | 123 | 124 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 144 | 145 | 146 | 147 | 148 | 159 | 160 | 161 | 162 | 163 | 174 | 175 | 176 | 177 | 178 | 189 | 190 | 191 | 192 | 193 | 204 | 205 | 206 | 207 |
ProductQuantitySubtotal
134 |
135 | 136 |
137 |

Bambi Print Mini Backpack

138 | Price: $500.00 139 |
140 | remove 141 |
142 |
143 | 		$50.00
149 |
150 | 151 |
152 |

Bambi Print Mini Backpack

153 | Price: $900.00 154 |
155 | remove 156 |
157 |
158 | 		$90.00
164 |
165 | 166 |
167 |

Bambi Print Mini Backpack

168 | Price: $700.00 169 |
170 | remove 171 |
172 |
173 | 		$60.00
179 |
180 | 181 |
182 |

Bambi Print Mini Backpack

183 | Price: $600.00 184 |
185 | remove 186 |
187 |
188 | 		$60.00
194 |
195 | 196 |
197 |

Bambi Print Mini Backpack

198 | Price: $600.00 199 |
200 | remove 201 |
202 |
203 | 		$60.00
208 | 209 |
210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |
Subtotal$200
Tax$50
Total$250
224 | Proceed To Checkout 225 |
226 |
227 | 228 | 229 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | -------------------------------------------------------------------------------- /images/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/banner1.jpg -------------------------------------------------------------------------------- /images/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/banner2.jpg -------------------------------------------------------------------------------- /images/brand1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand1.png -------------------------------------------------------------------------------- /images/brand2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand2.png -------------------------------------------------------------------------------- /images/brand3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand3.png -------------------------------------------------------------------------------- /images/brand4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand4.png -------------------------------------------------------------------------------- /images/brand5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand5.png -------------------------------------------------------------------------------- /images/brand6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand6.png -------------------------------------------------------------------------------- /images/brand7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/brand7.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/favicon.png -------------------------------------------------------------------------------- /images/hero-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/hero-1.png -------------------------------------------------------------------------------- /images/hero-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/hero-2.png -------------------------------------------------------------------------------- /images/hero-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/hero-3.png -------------------------------------------------------------------------------- /images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/hero.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/logo.png -------------------------------------------------------------------------------- /images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/nav.png -------------------------------------------------------------------------------- /images/payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/payment.png -------------------------------------------------------------------------------- /images/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-1.jpg -------------------------------------------------------------------------------- /images/product-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-10.jpg -------------------------------------------------------------------------------- /images/product-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-11.jpg -------------------------------------------------------------------------------- /images/product-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-12.jpg -------------------------------------------------------------------------------- /images/product-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-13.jpg -------------------------------------------------------------------------------- /images/product-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-14.jpg -------------------------------------------------------------------------------- /images/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-2.jpg -------------------------------------------------------------------------------- /images/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-3.jpg -------------------------------------------------------------------------------- /images/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-4.jpg -------------------------------------------------------------------------------- /images/product-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-5.jpg -------------------------------------------------------------------------------- /images/product-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-6.jpg -------------------------------------------------------------------------------- /images/product-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-7.jpg -------------------------------------------------------------------------------- /images/product-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-8.jpg -------------------------------------------------------------------------------- /images/product-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/product-9.jpg -------------------------------------------------------------------------------- /images/promo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo1.jpg -------------------------------------------------------------------------------- /images/promo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo2.jpg -------------------------------------------------------------------------------- /images/promo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo3.jpg -------------------------------------------------------------------------------- /images/promo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo4.jpg -------------------------------------------------------------------------------- /images/promo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo5.jpg -------------------------------------------------------------------------------- /images/promo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/lc16-ecommerce-website/ef369f0385de1d9e13463f31878396e66d52305b/images/promo6.jpg -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/shoppingBag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | Nature Ecommerce Website 22 | 23 | 24 | 25 | 26 | 27 | 114 | 115 |
116 |
117 |
118 |
119 |
120 | 121 |
122 |

Super market vegbox 123 |
124 | start from 125 | $9 126 |

127 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti ad natus facilis magni corporis alias.

128 | 129 | Shop Now 130 |
131 |
132 | 133 |
134 | hero image 135 |
136 |

You first Order 137 |
138 | 20% off 139 | at Juice 140 |

141 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti ad natus facilis magni corporis alias.

142 | Shop Now 143 |
144 |
145 | 146 |
147 | hero image 148 |
149 |

You first Order 150 |
151 | 20% off 152 | at Juice 153 |

154 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti ad natus facilis magni corporis alias.

155 | Shop Now 156 |
157 |
158 |
159 |
160 |
161 | 162 | 163 |
164 |
165 | 166 |
167 |
168 | 169 |
170 |
171 |
172 | 173 | 174 | 175 |
176 |
177 |

Shop Collections

178 | Select from the premium product and save plenty money 179 |
180 | 181 |
182 |
183 | 184 |
185 |

JUICE

186 | SHOP NOW 187 |
188 |
189 | 190 |
191 | 192 |
193 |

MANGO

194 | SHOP NOW 195 |
196 |
197 | 198 |
199 | 200 |
201 |

GRAPES

202 | SHOP NOW 203 |
204 |
205 | 206 |
207 | 208 |
209 |

POTATOE

210 | SHOP NOW 211 |
212 |
213 | 214 |
215 | 216 |
217 |

ORANGE

218 | SHOP NOW 219 |
220 |
221 | 222 |
223 | 224 |
225 |

PINEAPPLE

226 | SHOP NOW 227 |
228 |
229 |
230 |
231 | 232 | 233 |
234 |
235 |

Featured Products

236 | Select from the premium product brands and save plenty money 237 |
238 | 239 |
240 |
241 |
242 |
243 |
244 |
245 | 246 |
247 | 248 |
249 | 250 |
    251 | 252 | 253 | 254 |
255 |
256 |
257 | Bambi Print Mini Backpack 258 |
259 | $150 260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 | 268 |
269 | 270 |
271 | 272 |
    273 | 274 | 275 | 276 |
277 |
278 |
279 | Bambi Print Mini Backpack 280 |
281 | $150 282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 | 290 |
291 | 292 |
293 | 294 |
    295 | 296 | 297 | 298 |
299 |
300 |
301 | Bambi Print Mini Backpack 302 |
303 | $150 304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 | 312 |
313 | 314 |
315 | 316 |
    317 | 318 | 319 | 320 |
321 |
322 |
323 | Bambi Print Mini Backpack 324 |
325 | $150 326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 | 334 |
335 | 336 |
337 | 338 |
    339 | 340 | 341 | 342 |
343 |
344 |
345 | Bambi Print Mini Backpack 346 |
347 | $150 348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 | 356 |
357 | 358 |
359 | 360 |
    361 | 362 | 363 | 364 |
365 |
366 |
367 | Bambi Print Mini Backpack 368 |
369 | $150 370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 | 378 |
379 | 380 |
381 | 382 |
    383 | 384 | 385 | 386 |
387 |
388 |
389 | Bambi Print Mini Backpack 390 |
391 | $150 392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 | 400 |
401 | 402 |
403 | 404 |
    405 | 406 | 407 | 408 |
409 |
410 |
411 | Bambi Print Mini Backpack 412 |
413 | $150 414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 | 422 | 423 |
424 |
425 | 426 |
427 |
428 | 429 |
430 |
431 |
432 | 433 | 434 |
435 |
436 |

New Products

437 | Select from the premium product brands and save plenty money 438 |
439 | 440 |
441 |
442 |
443 | 444 |
445 | 446 |
447 | 448 |
    449 | 450 | 451 | 452 |
453 |
454 |
455 | Bambi Print Mini Backpack 456 |
457 | $150 458 |
459 |
460 |
461 | 462 |
463 |
464 | 465 |
466 | 467 |
468 | 469 |
    470 | 471 | 472 | 473 |
474 |
475 |
476 | Bambi Print Mini Backpack 477 |
478 | $150 479 | $160 480 |
481 |
482 |
483 | 484 |
485 |
486 | 487 |
488 | 489 |
490 | 491 |
    492 | 493 | 494 | 495 |
496 |
497 |
498 | Bambi Print Mini Backpack 499 |
500 | $150 501 |
502 |
503 |
504 | 505 |
506 |
507 | 508 |
509 | 510 |
511 | 512 |
    513 | 514 | 515 | 516 |
517 |
518 |
519 | Bambi Print Mini Backpack 520 |
521 | $150 522 | $160 523 |
524 |
525 |
526 | 527 |
528 |
529 | 530 |
531 | 532 |
533 | 534 |
    535 | 536 | 537 | 538 |
539 |
540 |
541 | Bambi Print Mini Backpack 542 |
543 | $150 544 |
545 |
546 |
547 | 548 |
549 |
550 | 551 |
552 | 553 |
554 | 555 |
    556 | 557 | 558 | 559 |
560 |
561 |
562 | Bambi Print Mini Backpack 563 | 564 |
565 | $150 566 |
567 |
568 |
569 | 570 |
571 |
572 | 573 |
574 | 575 |
576 | 577 |
    578 | 579 | 580 | 581 |
582 |
583 |
584 | Bambi Print Mini Backpack 585 | 586 |
587 | $150 588 | $160 589 |
590 |
591 |
592 | 593 |
594 |
595 | 596 |
597 | 598 |
599 | 600 |
    601 | 602 | 603 | 604 |
605 |
606 |
607 | Bambi Print Mini Backpack 608 |
609 | $150 610 | $160 611 |
612 |
613 |
614 |
615 |
616 | 617 | 618 | 638 | 639 | 640 |
641 |
642 |

Shop by Brand

643 | Select from the premium product brands and save plenty money 644 |
645 | 646 |
647 |
648 |
649 |
650 | 651 |
652 |
653 | 654 |
655 |
656 | 657 |
658 |
659 | 660 |
661 |
662 | 663 |
664 |
665 | 666 |
667 |
668 | 669 |
670 | 671 |
672 |
673 |
674 |
675 | 676 | 677 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const openNav = document.querySelector(".open-btn"); 2 | const closeNav = document.querySelector(".close-btn"); 3 | const menu = document.querySelector(".nav-list"); 4 | 5 | openNav.addEventListener("click", () => { 6 | menu.classList.add("show"); 7 | }); 8 | 9 | closeNav.addEventListener("click", () => { 10 | menu.classList.remove("show"); 11 | }); 12 | 13 | // Fixed Nav 14 | const navBar = document.querySelector(".nav"); 15 | const navHeight = navBar.getBoundingClientRect().height; 16 | window.addEventListener("scroll", () => { 17 | const scrollHeight = window.pageYOffset; 18 | if (scrollHeight > navHeight) { 19 | navBar.classList.add("fix-nav"); 20 | } else { 21 | navBar.classList.remove("fix-nav"); 22 | } 23 | }); 24 | 25 | // Scroll To 26 | const links = [...document.querySelectorAll(".scroll-link")]; 27 | links.map((link) => { 28 | if (!link) return; 29 | link.addEventListener("click", (e) => { 30 | e.preventDefault(); 31 | 32 | const id = e.target.getAttribute("href").slice(1); 33 | 34 | const element = document.getElementById(id); 35 | const fixNav = navBar.classList.contains("fix-nav"); 36 | let position = element.offsetTop - navHeight; 37 | 38 | window.scrollTo({ 39 | top: position, 40 | left: 0, 41 | }); 42 | 43 | navBar.classList.remove("show"); 44 | menu.classList.remove("show"); 45 | document.body.classList.remove("show"); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /js/slider.js: -------------------------------------------------------------------------------- 1 | const swiper1 = new Swiper(".slider-1", { 2 | autoplay: { 3 | delay: 3500, 4 | disableOnInteraction: false, 5 | }, 6 | grabCursor: true, 7 | effect: "fade", 8 | loop: true, 9 | navigation: { 10 | nextEl: ".swiper-next", 11 | prevEl: ".swiper-prev", 12 | }, 13 | }); 14 | 15 | const swiper2 = new Swiper(".slider-2", { 16 | // loop: true, 17 | grabCursor: true, 18 | spaceBetween: 30, 19 | navigation: { 20 | nextEl: ".custom-next", 21 | prevEl: ".custom-prev", 22 | }, 23 | breakpoints: { 24 | 640: { 25 | slidesPerView: 2, 26 | }, 27 | 768: { 28 | slidesPerView: 3, 29 | }, 30 | 1024: { 31 | slidesPerView: 4, 32 | }, 33 | }, 34 | }); 35 | 36 | const swiper3 = new Swiper(".slider-3", { 37 | loop: true, 38 | grabCursor: true, 39 | autoplay: { 40 | delay: 3500, 41 | disableOnInteraction: false, 42 | }, 43 | spaceBetween: 30, 44 | slidesPerView: 2, 45 | breakpoints: { 46 | 768: { 47 | slidesPerView: 3, 48 | }, 49 | 1024: { 50 | slidesPerView: 5, 51 | }, 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /productDetails.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Codevo - Ecommerce Website 15 | 16 | 17 | 18 | 19 | 20 | 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 | Home/T-shirt 132 |

Bambi Print Mini Backpack

133 |
$50
134 |
135 |
136 | 145 | 146 |
147 |
148 | 149 |
150 | 151 | Add To Cart 152 |
153 |

Product Detail

154 |

155 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero minima 156 | delectus nulla voluptates nesciunt quidem laudantium, quisquam 157 | voluptas facilis dicta in explicabo, laboriosam ipsam suscipit! 158 |

159 |
160 |
161 |
162 | 163 | 164 | 165 |
166 |
167 |

Related Products

168 | Select from the premium product brands and save plenty money 169 |
170 |
171 |
172 |
173 | 174 |
175 | 176 |
177 | 178 |
    179 | 180 | 181 | 182 |
183 |
184 |
185 | Bambi Print Mini Backpack 186 |
187 | $150 188 |
189 |
190 |
191 |
192 |
193 | 194 |
195 | 196 |
197 | 198 |
    199 | 200 | 201 | 202 |
203 |
204 |
205 | Bambi Print Mini Backpack 206 |
207 | $150 208 |
209 |
210 |
211 |
212 |
213 | 214 |
215 | 216 |
217 | 218 |
    219 | 220 | 221 | 222 |
223 |
224 |
225 | Bambi Print Mini Backpack 226 |
227 | $150 228 |
229 |
230 |
231 |
232 |
233 | 234 |
235 | 236 |
237 | 238 |
    239 | 240 | 241 | 242 |
243 |
244 |
245 | Bambi Print Mini Backpack 246 |
247 | $150 248 |
249 |
250 |
251 |
252 |
253 | 254 | 255 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /products.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Codevo - Ecommerce Website 16 | 17 | 18 | 19 | 20 | 21 | 22 | 109 | 110 | 111 | 112 |
113 |
114 |
115 |
116 |
117 |

Category

118 |
119 | 120 |
    121 |
  • 122 | 123 | 127 |
    • 128 | 129 |
  • 130 | 131 | 135 |
    • 136 | 137 |
  • 138 | 139 | 143 |
    • 144 | 145 |
  • 146 | 147 | 151 |
    • 152 |
153 |
154 | 155 |
156 |
157 |

Brands

158 |
159 | 160 |
    161 |
  • 162 | 163 | 167 |
    • 168 | 169 |
  • 170 | 171 | 175 |
    • 176 | 177 |
  • 178 | 179 | 183 |
    • 184 | 185 |
  • 186 | 187 | 191 |
    • 192 | 193 |
  • 194 | 195 | 199 |
    • 200 | 201 |
  • 202 | 203 | 207 |
    • 208 | 209 |
  • 210 | 211 | 215 |
    • 216 | 217 |
  • 218 | 219 | 223 |
    • 224 |
225 |
226 |
227 |
228 |
229 |
230 | 231 | 237 |
238 |
239 | 240 | 244 |
245 | Apply 246 |
247 | 248 |
249 | 250 |
251 |
252 | 253 |
254 | 255 |
256 | 257 |
    258 | 259 | 260 | 261 |
262 |
263 |
264 | Bambi Print Mini Backpack 265 |
266 | $150 267 |
268 |
269 |
270 |
271 |
272 | 273 |
274 | 275 |
276 | 277 |
    278 | 279 | 280 | 281 |
282 |
283 |
284 | Bambi Print Mini Backpack 285 |
286 | $150 287 |
288 |
289 |
290 |
291 |
292 | 293 |
294 | 295 |
296 | 297 |
    298 | 299 | 300 | 301 |
302 |
303 |
304 | Bambi Print Mini Backpack 305 |
306 | $150 307 |
308 |
309 |
310 |
311 |
312 | 313 |
314 | 315 |
316 | 317 |
    318 | 319 | 320 | 321 |
322 |
323 |
324 | Bambi Print Mini Backpack 325 |
326 | $150 327 |
328 |
329 |
330 |
331 |
332 | 333 |
334 | 335 |
336 | 337 |
    338 | 339 | 340 | 341 |
342 |
343 |
344 | Bambi Print Mini Backpack 345 |
346 | $150 347 |
348 |
349 |
350 |
351 |
352 | 353 |
354 | 355 |
356 | 357 |
    358 | 359 | 360 | 361 |
362 |
363 |
364 | Bambi Print Mini Backpack 365 |
366 | $150 367 |
368 |
369 |
370 |
371 |
372 | 373 |
374 | 375 |
376 | 377 |
    378 | 379 | 380 | 381 |
382 |
383 |
384 | Bambi Print Mini Backpack 385 |
386 | $150 387 |
388 |
389 |
390 |
391 |
392 | 393 |
394 | 395 |
396 | 397 |
    398 | 399 | 400 | 401 |
402 |
403 |
404 | Bambi Print Mini Backpack 405 |
406 | $150 407 |
408 |
409 |
410 |
411 |
412 | 413 |
414 | 415 |
416 | 417 |
    418 | 419 | 420 | 421 |
422 |
423 |
424 | Bambi Print Mini Backpack 425 |
426 | $150 427 |
428 |
429 |
430 |
431 |
432 | 433 |
434 | 435 |
436 | 437 |
    438 | 439 | 440 | 441 |
442 |
443 |
444 | Bambi Print Mini Backpack 445 |
446 | $150 447 |
448 |
449 |
450 |
451 |
452 | 453 |
454 | 455 |
456 | 457 |
    458 | 459 | 460 | 461 |
462 |
463 |
464 | Bambi Print Mini Backpack 465 |
466 | $150 467 |
468 |
469 |
470 |
471 |
472 | 473 |
474 | 475 |
476 | 477 |
    478 | 479 | 480 | 481 |
482 |
483 |
484 | Bambi Print Mini Backpack 485 |
486 | $150 487 |
488 |
489 |
490 |
491 |
492 | 493 |
494 | 495 |
496 | 497 |
    498 | 499 | 500 | 501 |
502 |
503 |
504 | Bambi Print Mini Backpack 505 |
506 | $150 507 |
508 |
509 |
510 |
511 |
512 | 513 |
514 | 515 |
516 | 517 |
    518 | 519 | 520 | 521 |
522 |
523 |
524 | Bambi Print Mini Backpack 525 |
526 | $150 527 |
528 |
529 |
530 |
531 |
532 | 533 |
534 | 535 |
536 | 537 |
    538 | 539 | 540 | 541 |
542 |
543 |
544 | Bambi Print Mini Backpack 545 |
546 | $150 547 |
548 |
549 |
550 | 551 |
552 | 553 | 554 |
    555 | 1 556 | 2 557 | ›› 558 | Last » 559 |
560 |
561 |
562 |
563 | 564 | 565 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #69ae14; 3 | --white: #fff; 4 | --black: #222; 5 | --grey1: #3a3b3c; 6 | --grey2: #828282; 7 | } 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | margin: 0; 13 | padding: 0; 14 | box-sizing: inherit; 15 | } 16 | 17 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"); 18 | 19 | html { 20 | box-sizing: border-box; 21 | font-size: 62.5%; 22 | } 23 | 24 | body { 25 | font-family: "Open Sans", sans-serif; 26 | font-size: 1.6rem; 27 | background-color: var(--white); 28 | color: var(--black); 29 | font-weight: 400; 30 | } 31 | 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5 { 37 | font-weight: 600; 38 | } 39 | 40 | a { 41 | text-decoration: none; 42 | color: inherit; 43 | } 44 | 45 | li { 46 | list-style: none; 47 | } 48 | 49 | .container { 50 | max-width: 114rem; 51 | margin: 0 auto; 52 | } 53 | 54 | @media (max-width: 1200px) { 55 | .container { 56 | padding: 0 3rem; 57 | } 58 | } 59 | 60 | @media (max-width: 768px) { 61 | .container { 62 | max-width: 60rem; 63 | } 64 | } 65 | 66 | .d-flex { 67 | display: flex; 68 | align-items: center; 69 | } 70 | 71 | nav { 72 | position: fixed; 73 | top: 0; 74 | left: 0; 75 | width: 100%; 76 | z-index: 999; 77 | background-color: var(--white); 78 | height: 8rem; 79 | line-height: 8rem; 80 | } 81 | 82 | .nav.fix-nav { 83 | width: 100%; 84 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 85 | z-index: 999; 86 | } 87 | 88 | nav .wrapper { 89 | display: flex; 90 | align-items: center; 91 | justify-content: space-between; 92 | position: relative; 93 | height: 100%; 94 | } 95 | 96 | .wrapper .logo { 97 | height: 100%; 98 | } 99 | 100 | .wrapper .logo a { 101 | display: flex; 102 | align-items: center; 103 | justify-content: center; 104 | height: 100%; 105 | } 106 | 107 | .wrapper .nav-list { 108 | display: inline-flex; 109 | } 110 | 111 | .nav-list li i { 112 | color: var(--grey2); 113 | } 114 | 115 | .nav-list a { 116 | color: var(--black); 117 | font-size: 1.5rem; 118 | padding: 0.9rem 1.5rem; 119 | border-radius: 0.5rem; 120 | transition: all 300ms ease; 121 | } 122 | 123 | .nav-list li a:hover { 124 | color: var(--primary); 125 | } 126 | 127 | .nav-list .drop-menu1, 128 | .nav-list .drop-menu2 { 129 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); 130 | width: 20rem; 131 | top: 8.5rem; 132 | line-height: 4.5rem; 133 | position: absolute; 134 | background-color: var(--white); 135 | opacity: 0; 136 | visibility: hidden; 137 | transition: all 300ms ease; 138 | } 139 | 140 | .nav-list .drop-menu1 li a, 141 | .nav-list .drop-menu2 li a { 142 | display: block; 143 | font-size: 1.5rem; 144 | width: 100%; 145 | padding: 0 0 0 1.5rem; 146 | border-radius: 0; 147 | color: var(--grey2); 148 | } 149 | 150 | .nav-list .drop-menu1 li a:hover, 151 | .nav-list .drop-menu2 li a:hover { 152 | color: var(--primary); 153 | } 154 | 155 | .nav-list li:hover .drop-menu1, 156 | .nav-list li:hover .drop-menu2, 157 | .nav-list li:hover .mega-box { 158 | opacity: 1; 159 | visibility: visible; 160 | top: 6.5rem; 161 | } 162 | 163 | .mega-box { 164 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); 165 | position: absolute; 166 | top: 8.5rem; 167 | left: 0; 168 | width: 100%; 169 | padding: 0 3rem; 170 | background-color: var(--white); 171 | opacity: 0; 172 | visibility: hidden; 173 | transition: all 300ms ease; 174 | } 175 | 176 | .mega-box .content { 177 | padding: 2.5rem 2rem; 178 | display: flex; 179 | width: 100%; 180 | justify-content: space-between; 181 | } 182 | 183 | .mega-box .content .row { 184 | width: calc(25% - 3rem); 185 | line-height: 4.5rem; 186 | } 187 | 188 | .content .row img { 189 | width: 100%; 190 | height: 100%; 191 | object-fit: cover; 192 | } 193 | 194 | .content .row header { 195 | font-size: 1.6rem; 196 | font-weight: 700; 197 | color: var(--grey1); 198 | } 199 | 200 | .content .row .mega-links { 201 | border-left: 1px solid rgba(255, 255, 255, 0.09); 202 | margin-left: -4rem; 203 | } 204 | 205 | .content .row li { 206 | padding: 0 2rem; 207 | } 208 | 209 | .content .row li a { 210 | padding: 0 2rem; 211 | display: block; 212 | font-size: 1.5rem; 213 | color: var(--grey2); 214 | } 215 | 216 | .content .row li a:hover { 217 | color: var(--primary); 218 | } 219 | 220 | .nav-list .mobile-item { 221 | display: none; 222 | } 223 | 224 | .nav-list input { 225 | display: none; 226 | } 227 | 228 | .wrapper .btn { 229 | color: var(--white); 230 | font-size: 2rem; 231 | cursor: pointer; 232 | display: none; 233 | } 234 | 235 | .nav-list .icons span { 236 | display: inline-block; 237 | margin: 0.5rem 1rem 0 0; 238 | position: relative; 239 | } 240 | 241 | .nav-list .icons a { 242 | padding: 0; 243 | display: inline-block; 244 | } 245 | 246 | .nav-list .icons .count { 247 | justify-content: center; 248 | position: absolute; 249 | top: 0.8rem; 250 | right: -0.8rem; 251 | background-color: var(--primary); 252 | height: 2rem; 253 | padding: 0.5rem; 254 | color: var(--white); 255 | font-weight: 700; 256 | border-radius: 50%; 257 | } 258 | 259 | @media (max-width: 968px) { 260 | .wrapper .nav-list { 261 | position: fixed; 262 | top: 0; 263 | left: -100%; 264 | height: 100%; 265 | width: 100%; 266 | max-width: 35rem; 267 | background-color: var(--white); 268 | display: block; 269 | overflow-y: auto; 270 | line-height: 5rem; 271 | box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.1); 272 | transition: all 300ms linear; 273 | } 274 | 275 | .wrapper .nav-list.show { 276 | left: 0; 277 | } 278 | 279 | .nav-list li { 280 | margin: 1.5rem 1rem; 281 | } 282 | 283 | .nav-list a { 284 | display: block; 285 | font-size: 1.8rem; 286 | padding: 0 2rem; 287 | color: var(--black); 288 | } 289 | 290 | .nav-list .drop-menu1, 291 | .nav-list .drop-menu2 { 292 | position: static; 293 | opacity: 1; 294 | visibility: visible; 295 | top: 6.5rem; 296 | padding-left: 2rem; 297 | width: 100%; 298 | max-height: 0; 299 | overflow: hidden; 300 | } 301 | 302 | #showdrop1:checked ~ .drop-menu1, 303 | #showdrop2:checked ~ .drop-menu2, 304 | #showMega:checked ~ .mega-box { 305 | max-height: 100%; 306 | } 307 | 308 | .nav-list .drop-menu1 li, 309 | .nav-list .drop-menu2 li { 310 | margin: 0; 311 | } 312 | 313 | .nav-list .drop-menu1 li a, 314 | .nav-list .drop-menu2 li a { 315 | color: var(--grey2); 316 | font-size: 1.5rem; 317 | } 318 | 319 | .nav-list .desktop-item { 320 | display: none; 321 | } 322 | 323 | .nav-list .mobile-item { 324 | display: block; 325 | font-size: 1.8rem; 326 | padding-left: 2rem; 327 | color: var(--black); 328 | cursor: pointer; 329 | border-radius: 0.5rem; 330 | } 331 | 332 | .nav-list .mobile-item:hover { 333 | color: var(--primary); 334 | } 335 | 336 | .mega-box { 337 | position: static; 338 | top: 6.5rem; 339 | padding: 0 2rem; 340 | opacity: 1; 341 | visibility: visible; 342 | max-height: 0; 343 | overflow: hidden; 344 | transition: all 300ms ease; 345 | } 346 | 347 | .mega-box .content { 348 | flex-direction: column; 349 | padding: 2rem 2rem 0 2rem; 350 | } 351 | 352 | .mega-box .content .row { 353 | width: 100%; 354 | border-top: 1px solid rgba(255, 255, 255, 0.09); 355 | margin-bottom: 1.5rem; 356 | } 357 | 358 | .content .row:nth-child(1), 359 | .content .row:nth-child(2) { 360 | border-top: 0; 361 | } 362 | 363 | .content .row .mega-links { 364 | border-left: 0; 365 | padding-left: 2rem; 366 | } 367 | 368 | .row .mega-links li { 369 | margin: 0; 370 | } 371 | 372 | .wrapper .btn { 373 | display: block; 374 | color: var(--black); 375 | } 376 | 377 | .nav-list .top { 378 | position: relative; 379 | display: block; 380 | background-color: var(--primary); 381 | width: 100%; 382 | height: 8rem; 383 | } 384 | 385 | .nav-list .close-btn { 386 | position: absolute; 387 | top: 1.5rem; 388 | right: 2.5rem; 389 | color: var(--white); 390 | } 391 | 392 | .nav-list .icons { 393 | padding-left: 2rem; 394 | } 395 | } 396 | 397 | /* Hero */ 398 | .hero { 399 | height: 100vh; 400 | position: relative; 401 | overflow: hidden; 402 | } 403 | 404 | .swiper-container, 405 | .hero .row { 406 | width: 100%; 407 | height: 100%; 408 | } 409 | 410 | .hero .row { 411 | position: relative; 412 | } 413 | 414 | .hero .row img { 415 | height: 100%; 416 | width: 100%; 417 | object-fit: cover; 418 | } 419 | 420 | .hero .row .content { 421 | position: absolute; 422 | top: 50%; 423 | left: 80px; 424 | transform: translateY(-50%); 425 | } 426 | 427 | .hero .row .content h1 { 428 | line-height: 1.2; 429 | font-size: 5rem; 430 | font-weight: 700; 431 | } 432 | 433 | .hero .row .content span { 434 | color: var(--primary); 435 | } 436 | 437 | .hero .row .content p { 438 | margin: 1rem 0 1rem; 439 | width: 70%; 440 | } 441 | 442 | .hero .row .content a { 443 | display: inline-block; 444 | color: var(--white); 445 | background-color: var(--primary); 446 | border-radius: 5px; 447 | padding: 1rem 2.5rem; 448 | margin-top: 2rem; 449 | } 450 | 451 | .swiper-slide-active .content h1 { 452 | animation: movebottom 1s ease-in-out; 453 | } 454 | 455 | .swiper-slide-active .content a { 456 | animation: movetop 1s ease-in-out; 457 | } 458 | 459 | .swiper-slide-active .content p { 460 | animation: moveleft 1s ease-in-out; 461 | } 462 | 463 | @keyframes movebottom { 464 | 0% { 465 | transform: translateY(-100px); 466 | opacity: 0; 467 | } 468 | 469 | 100% { 470 | transform: translateY(0px); 471 | opacity: 1; 472 | } 473 | } 474 | 475 | @keyframes movetop { 476 | 0% { 477 | transform: translateY(100px); 478 | opacity: 0; 479 | } 480 | 481 | 100% { 482 | transform: translateY(0px); 483 | opacity: 1; 484 | } 485 | } 486 | 487 | @keyframes moveleft { 488 | 0% { 489 | transform: translateX(-100px); 490 | opacity: 0; 491 | } 492 | 493 | 100% { 494 | transform: translateY(0px); 495 | opacity: 1; 496 | } 497 | } 498 | 499 | .hero .arrows { 500 | position: absolute; 501 | top: 50%; 502 | transform: translateY(-50%); 503 | width: 100%; 504 | z-index: 10; 505 | opacity: 0; 506 | visibility: hidden; 507 | transition: all 500ms ease-out; 508 | } 509 | 510 | .hero:hover .arrows { 511 | opacity: 1; 512 | visibility: visible; 513 | } 514 | 515 | .arrows .swiper-prev, 516 | .arrows .swiper-next { 517 | position: absolute; 518 | padding: 0.5rem 0.7rem; 519 | background-color: var(--primary); 520 | border-radius: 5px; 521 | color: var(--white); 522 | cursor: pointer; 523 | } 524 | 525 | .arrows .swiper-prev { 526 | left: 20px; 527 | } 528 | 529 | .arrows .swiper-next { 530 | right: 20px; 531 | } 532 | 533 | @media (max-width: 567px) { 534 | .hero .row .content { 535 | left: 20px; 536 | } 537 | 538 | .hero .row .content h1 { 539 | font-size: 3rem; 540 | } 541 | .hero .row .content p { 542 | width: 80%; 543 | } 544 | } 545 | 546 | /* PROMOTION */ 547 | .section { 548 | padding: 10rem 0 5rem 0; 549 | overflow: hidden; 550 | } 551 | 552 | .section .title { 553 | text-align: center; 554 | margin-bottom: 5rem; 555 | } 556 | 557 | .section .title h2 { 558 | font-size: 3rem; 559 | font-weight: 400; 560 | margin-bottom: 1.5rem; 561 | } 562 | 563 | .section .title span { 564 | color: var(--grey2); 565 | } 566 | 567 | .promotion-layout { 568 | display: grid; 569 | grid-template-columns: repeat(3, 1fr); 570 | gap: 3rem; 571 | } 572 | 573 | .promotion-item { 574 | overflow: hidden; 575 | position: relative; 576 | z-index: 0; 577 | } 578 | 579 | .promotion-item img { 580 | object-fit: cover; 581 | height: 100%; 582 | width: 100%; 583 | transition: all 500ms ease-in-out; 584 | } 585 | 586 | .promotion-content { 587 | position: absolute; 588 | top: 50%; 589 | left: 50%; 590 | transform: translate(-50%, -50%); 591 | color: var(--white); 592 | text-align: center; 593 | z-index: 3; 594 | } 595 | 596 | .promotion-content h3 { 597 | background-color: rgba(0, 0, 0, 0.8); 598 | background-color: var(--primary); 599 | color: var(--white); 600 | border-radius: 5rem; 601 | padding: 0.7rem 1.4rem; 602 | font-size: 1.7rem; 603 | font-weight: inherit; 604 | margin-bottom: 1rem; 605 | transition: all 300ms ease-in-out; 606 | } 607 | 608 | .promotion-content a { 609 | transition: all 300ms ease-in-out; 610 | font-size: 1.4rem; 611 | } 612 | 613 | .promotion-content a:hover { 614 | color: var(--primary); 615 | } 616 | 617 | .promotion-item:hover .promotion-content h3 { 618 | background-color: var(--white); 619 | color: var(--black); 620 | } 621 | 622 | .promotion-item:hover img { 623 | transform: scale(1.2); 624 | } 625 | 626 | .promotion-item::after { 627 | content: ""; 628 | position: absolute; 629 | top: 0; 630 | left: 0; 631 | z-index: 1; 632 | width: 100%; 633 | height: 100%; 634 | background-color: rgba(0, 0, 0, 0.4); 635 | opacity: 0; 636 | visibility: hidden; 637 | transition: all 500ms ease-in-out; 638 | } 639 | 640 | .promotion-item:hover::after { 641 | visibility: visible; 642 | opacity: 1; 643 | } 644 | 645 | @media (max-width: 1200px) { 646 | .promotion-content h3 { 647 | background-color: rgba(0, 0, 0, 0.8); 648 | border-radius: 5rem; 649 | padding: 0.7rem 1.4rem; 650 | font-size: 1.6rem; 651 | } 652 | } 653 | 654 | @media (max-width: 996px) { 655 | .promotion-layout { 656 | grid-template-columns: repeat(2, 1fr); 657 | } 658 | } 659 | 660 | @media (max-width: 768px) { 661 | .promotion-layout { 662 | grid-template-columns: 1fr; 663 | } 664 | } 665 | 666 | /* PRODUCTS */ 667 | .section .product-layout { 668 | display: grid; 669 | grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 670 | gap: 3rem; 671 | max-width: 130rem; 672 | margin: 0 auto; 673 | padding: 0 1.6rem; 674 | } 675 | 676 | .product { 677 | overflow: hidden; 678 | } 679 | 680 | .product .img-container { 681 | position: relative; 682 | cursor: pointer; 683 | } 684 | 685 | .product .img-container img { 686 | object-fit: cover; 687 | height: 100%; 688 | width: 100%; 689 | } 690 | 691 | .product .bottom { 692 | padding: 1rem; 693 | text-align: center; 694 | } 695 | 696 | .product .bottom a { 697 | margin-bottom: 1rem; 698 | font-weight: inherit; 699 | font-size: 1.5rem; 700 | } 701 | 702 | .product .bottom a:hover { 703 | color: var(--primary); 704 | } 705 | 706 | .product .bottom span { 707 | color: var(--primary); 708 | font-size: 1.8rem; 709 | } 710 | 711 | .product .bottom .cancel { 712 | font-size: 1.4rem; 713 | color: var(--grey2); 714 | text-decoration: line-through; 715 | } 716 | 717 | .product .addCart { 718 | position: absolute; 719 | right: 0; 720 | bottom: 0.6rem; 721 | background-color: var(--white); 722 | border-radius: 50%; 723 | padding: 1.3rem 1.6rem; 724 | box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); 725 | transition: all 300ms ease-in-out; 726 | } 727 | 728 | .product:hover .addCart { 729 | border-radius: 1rem 0 0 0; 730 | } 731 | 732 | .product .addCart:hover { 733 | background-color: var(--primary); 734 | color: var(--white); 735 | } 736 | 737 | .product i { 738 | transition: all 300ms ease-in-out; 739 | } 740 | 741 | .product .side-icons { 742 | position: absolute; 743 | right: 0; 744 | top: 30%; 745 | transform: translate(80%, -50%); 746 | display: flex; 747 | flex-direction: column; 748 | padding: 1rem; 749 | transition: all 500ms ease-in-out; 750 | } 751 | 752 | .product .side-icons span { 753 | font-size: 1.4rem; 754 | background-color: var(--white); 755 | margin: 0.3rem; 756 | padding: 1rem 1.3rem; 757 | border-radius: 50%; 758 | transition: all 300ms ease-in-out; 759 | } 760 | 761 | .product .side-icons span:hover { 762 | background-color: var(--primary); 763 | color: var(--white); 764 | } 765 | 766 | .product:hover .side-icons { 767 | transform: translate(0%, -50%); 768 | } 769 | 770 | .featured { 771 | position: relative; 772 | } 773 | 774 | .featured .arrows { 775 | position: absolute; 776 | top: 35%; 777 | z-index: 10; 778 | width: 100px; 779 | right: 10%; 780 | } 781 | 782 | .featured .custom-next, 783 | .featured .custom-prev { 784 | position: absolute; 785 | padding: 0.7rem 1rem; 786 | background-color: var(--primary); 787 | border-radius: 5px; 788 | color: var(--white); 789 | cursor: pointer; 790 | } 791 | 792 | .featured .custom-prev { 793 | left: 10px; 794 | } 795 | 796 | .featured .custom-next { 797 | right: 10px; 798 | } 799 | 800 | @media (max-width: 996px) { 801 | .prodouct-layout { 802 | grid-template-columns: repeat(3, 1fr); 803 | } 804 | } 805 | 806 | @media (max-width: 768px) { 807 | .prodouct-layout { 808 | grid-template-columns: repeat(2, 1fr); 809 | } 810 | } 811 | 812 | @media (max-width: 567px) { 813 | .prodouct-layout { 814 | grid-template-columns: 1fr; 815 | } 816 | } 817 | 818 | /* ADVERTS */ 819 | .advert .advert-layout { 820 | display: grid; 821 | grid-template-columns: 1fr 1fr; 822 | gap: 3rem; 823 | } 824 | 825 | .advert-layout .item { 826 | position: relative; 827 | z-index: 0; 828 | width: 100%; 829 | overflow: hidden; 830 | } 831 | 832 | .advert-layout img { 833 | object-fit: cover; 834 | height: 100%; 835 | width: 100%; 836 | transition: all 300ms ease-in-out; 837 | } 838 | 839 | .advert-layout .content { 840 | position: absolute; 841 | top: 50%; 842 | transform: translateY(-50%); 843 | z-index: 1; 844 | } 845 | 846 | .advert-layout .left { 847 | right: 10%; 848 | } 849 | 850 | .advert-layout .right { 851 | left: 10%; 852 | } 853 | 854 | .advert-layout .content span { 855 | display: block; 856 | margin-bottom: 1rem; 857 | transition: all 300ms ease-in-out; 858 | } 859 | 860 | .advert-layout .content h3 { 861 | font-size: 3rem; 862 | font-weight: inherit; 863 | margin-bottom: 1rem; 864 | transition: all 300ms ease-in-out; 865 | } 866 | 867 | .advert-layout .content a { 868 | transition: all 300ms ease-in-out; 869 | } 870 | 871 | .advert-layout .content a:hover { 872 | color: var(--primary); 873 | } 874 | 875 | .advert-layout .item::after { 876 | content: ""; 877 | position: absolute; 878 | top: 0; 879 | left: 0; 880 | width: 100%; 881 | height: 100%; 882 | transition: all 300ms ease-in-out; 883 | } 884 | 885 | .advert-layout .item:hover::after { 886 | background-color: rgba(74, 223, 82, 0.4); 887 | } 888 | 889 | .advert-layout .item:hover .content { 890 | color: var(--white); 891 | } 892 | 893 | .advert-layout .item:hover .content a { 894 | color: var(--white); 895 | } 896 | 897 | .advert-layout .item:hover img { 898 | transform: scale(1.1); 899 | } 900 | 901 | @media (max-width: 996px) { 902 | .advert-layout .left { 903 | right: 5%; 904 | } 905 | 906 | .advert-layout .right { 907 | left: 5%; 908 | } 909 | } 910 | 911 | @media (max-width: 768px) { 912 | .advert .advert-layout { 913 | grid-template-columns: 1fr; 914 | } 915 | } 916 | 917 | @media (max-width: 567px) { 918 | .advert-layout .content span { 919 | font-size: 1.5rem; 920 | margin-bottom: 0.6rem; 921 | } 922 | 923 | .advert-layout .content h3 { 924 | font-size: 2rem; 925 | margin-bottom: 0.6rem; 926 | } 927 | 928 | .advert-layout .content a { 929 | transition: all 300ms ease-in-out; 930 | } 931 | } 932 | 933 | /* BRANDS */ 934 | .brands .swiper-container { 935 | height: 100%; 936 | width: 100%; 937 | } 938 | 939 | .brands .swiper-slide img { 940 | width: 100%; 941 | height: 100%; 942 | object-fit: contain; 943 | } 944 | 945 | /* FOOTER */ 946 | 947 | .footer { 948 | background-color: var(--black); 949 | padding: 6rem 1rem; 950 | line-height: 3rem; 951 | } 952 | 953 | .footer-center span { 954 | margin-right: 1rem; 955 | } 956 | 957 | .footer-container { 958 | display: grid; 959 | grid-template-columns: repeat(4, 1fr); 960 | color: var(--white); 961 | } 962 | 963 | .footer-center a:link, 964 | .footer-center a:visited { 965 | display: block; 966 | color: #f1f1f1; 967 | font-size: 1.4rem; 968 | transition: 0.6s; 969 | } 970 | 971 | .footer-center a:hover { 972 | color: var(--primary); 973 | } 974 | 975 | .footer-center div { 976 | color: #f1f1f1; 977 | font-size: 1.4rem; 978 | } 979 | 980 | .footer-center h3 { 981 | font-size: 1.8rem; 982 | font-weight: 400; 983 | margin-bottom: 1rem; 984 | } 985 | 986 | .footer .payment-methods { 987 | margin-top: 2rem; 988 | } 989 | 990 | @media (max-width: 998px) { 991 | .footer-container { 992 | grid-template-columns: repeat(2, 1fr); 993 | row-gap: 2rem; 994 | } 995 | } 996 | 997 | @media (max-width: 768px) { 998 | .footer-container { 999 | grid-template-columns: 1fr; 1000 | row-gap: 2rem; 1001 | } 1002 | } 1003 | 1004 | /* Cart Page */ 1005 | .cart { 1006 | margin: 20rem auto; 1007 | } 1008 | 1009 | table { 1010 | width: 100%; 1011 | border-collapse: collapse; 1012 | } 1013 | 1014 | .cart-info { 1015 | display: flex; 1016 | flex-wrap: wrap; 1017 | } 1018 | 1019 | .cart-info span { 1020 | color: var(--grey2); 1021 | } 1022 | 1023 | th { 1024 | text-align: left; 1025 | padding: 0.5rem; 1026 | color: var(--white); 1027 | background-color: var(--primary); 1028 | font-weight: normal; 1029 | } 1030 | 1031 | td { 1032 | padding: 1rem 0.5rem; 1033 | } 1034 | 1035 | td input { 1036 | width: 5rem; 1037 | height: 3rem; 1038 | padding: 0.5rem; 1039 | } 1040 | 1041 | td a { 1042 | color: var(--primary); 1043 | font-size: 1.4rem; 1044 | } 1045 | 1046 | td img { 1047 | width: 8rem; 1048 | height: 8rem; 1049 | margin-right: 1rem; 1050 | } 1051 | 1052 | .total-price { 1053 | display: flex; 1054 | justify-content: flex-end; 1055 | align-items: end; 1056 | flex-direction: column; 1057 | margin-top: 2rem; 1058 | } 1059 | 1060 | .total-price a { 1061 | display: inline-block; 1062 | background-color: var(--primary); 1063 | color: var(--white); 1064 | padding: 0.7rem 1.6rem; 1065 | font-weight: 700; 1066 | border-radius: 3rem; 1067 | } 1068 | 1069 | .total-price table { 1070 | border-top: 3px solid var(--primary); 1071 | width: 100%; 1072 | max-width: 35rem; 1073 | } 1074 | 1075 | td:last-child { 1076 | text-align: right; 1077 | } 1078 | 1079 | th:last-child { 1080 | text-align: right; 1081 | } 1082 | 1083 | @media (max-width: 567px) { 1084 | .cart-info p { 1085 | display: none; 1086 | } 1087 | } 1088 | 1089 | /* PRODUCT DETAILS */ 1090 | 1091 | .product-detail { 1092 | margin-top: 5rem; 1093 | } 1094 | 1095 | .product-detail .details { 1096 | display: grid; 1097 | grid-template-columns: 1fr 1.2fr; 1098 | gap: 7rem; 1099 | } 1100 | 1101 | .product-detail .left { 1102 | display: flex; 1103 | flex-direction: column; 1104 | } 1105 | 1106 | .product-detail .left .main { 1107 | text-align: center; 1108 | margin-bottom: 2rem; 1109 | height: 45rem; 1110 | padding: 3rem; 1111 | } 1112 | 1113 | .product-detail .left .main img { 1114 | object-fit: contain; 1115 | height: 100%; 1116 | width: 100%; 1117 | } 1118 | 1119 | .product-detail .thumbnails { 1120 | display: grid; 1121 | grid-template-columns: repeat(4, 1fr); 1122 | gap: 1rem; 1123 | width: 100%; 1124 | } 1125 | 1126 | .product-detail .thumbnail { 1127 | height: 10rem; 1128 | text-align: center; 1129 | } 1130 | 1131 | .product-detail .thumbnail img { 1132 | height: 100%; 1133 | object-fit: contain; 1134 | } 1135 | 1136 | .product-detail .right span { 1137 | display: inline-block; 1138 | font-size: 1.5rem; 1139 | margin-bottom: 1rem; 1140 | } 1141 | 1142 | .product-detail .right h1 { 1143 | font-size: 4rem; 1144 | line-height: 1.2; 1145 | margin-bottom: 2rem; 1146 | } 1147 | 1148 | .product-detail .right .price { 1149 | font-size: 600; 1150 | font-size: 2rem; 1151 | color: var(--primary); 1152 | margin-bottom: 2rem; 1153 | } 1154 | 1155 | .product-detail .right div { 1156 | display: inline-block; 1157 | position: relative; 1158 | z-index: 1; 1159 | } 1160 | 1161 | .product-detail .right select { 1162 | font-family: "Poppins", sans-serif; 1163 | width: 20rem; 1164 | padding: 0.7rem; 1165 | border: 1px solid var(--grey1); 1166 | appearance: none; 1167 | outline: none; 1168 | } 1169 | 1170 | .product-detail form { 1171 | margin-bottom: 2rem; 1172 | } 1173 | 1174 | .product-detail form span { 1175 | position: absolute; 1176 | top: 50%; 1177 | right: 1rem; 1178 | transform: translateY(-50%); 1179 | font-size: 2rem; 1180 | z-index: 0; 1181 | } 1182 | 1183 | .product-detail .form { 1184 | margin-bottom: 3rem; 1185 | } 1186 | 1187 | .product-detail .form input { 1188 | padding: 0.8rem; 1189 | text-align: center; 1190 | width: 3.5rem; 1191 | margin-right: 2rem; 1192 | } 1193 | 1194 | .product-detail .form .addCart { 1195 | background: var(--primary); 1196 | padding: 0.8rem 4rem; 1197 | color: var(--white); 1198 | border-radius: 3rem; 1199 | } 1200 | 1201 | .product-detail h3 { 1202 | text-transform: uppercase; 1203 | margin-bottom: 2rem; 1204 | } 1205 | 1206 | @media (max-width: 996px) { 1207 | .product-detail .left { 1208 | height: 45rem; 1209 | } 1210 | 1211 | .product-detail .details { 1212 | gap: 3rem; 1213 | } 1214 | 1215 | .product-detail .thumbnails { 1216 | gap: 0.5rem; 1217 | } 1218 | 1219 | .product-detail .thumbnail { 1220 | background-color: #f6f2f1; 1221 | text-align: center; 1222 | } 1223 | } 1224 | 1225 | @media (max-width: 650px) { 1226 | .product-detail .details { 1227 | grid-template-columns: 1fr; 1228 | } 1229 | 1230 | .product-detail .right { 1231 | margin-top: 10rem; 1232 | } 1233 | 1234 | .product-detail .left { 1235 | width: 100%; 1236 | height: 45rem; 1237 | } 1238 | 1239 | .product-detail .details { 1240 | gap: 3rem; 1241 | } 1242 | 1243 | .product-detail .thumbnail { 1244 | width: 6rem; 1245 | height: 6rem; 1246 | } 1247 | } 1248 | 1249 | /* PRODUCTS */ 1250 | 1251 | /* .products { 1252 | margin-top: 10rem; 1253 | } */ 1254 | 1255 | .products-layout { 1256 | display: grid; 1257 | grid-template-columns: 1.05fr 3fr; 1258 | gap: 0 1rem; 1259 | } 1260 | 1261 | .col-3-of-4 .product-layout { 1262 | grid-template-columns: repeat(3, 1fr); 1263 | } 1264 | 1265 | .col-3-of-4 { 1266 | text-align: center; 1267 | } 1268 | 1269 | @media (max-width: 996px) { 1270 | .col-3-of-4 .product-layout { 1271 | grid-template-columns: repeat(2, 1fr); 1272 | } 1273 | } 1274 | 1275 | .col-3-of-4 form { 1276 | display: flex; 1277 | align-items: center; 1278 | justify-content: end; 1279 | margin-bottom: 3rem; 1280 | } 1281 | 1282 | .col-3-of-4 form .item { 1283 | margin-right: 1rem; 1284 | } 1285 | 1286 | .col-3-of-4 form label { 1287 | color: var(--grey1); 1288 | } 1289 | 1290 | .col-3-of-4 form select { 1291 | font-family: "Open Sans", sans-serif; 1292 | padding: 1rem; 1293 | width: 10rem; 1294 | border: 1px solid #f2f2f2; 1295 | outline: none; 1296 | } 1297 | 1298 | .col-3-of-4 form a { 1299 | display: inline-block; 1300 | padding: 1rem 3rem; 1301 | border-radius: 4rem; 1302 | margin-right: 1rem; 1303 | background-color: var(--primary); 1304 | color: var(--white); 1305 | transition: all 300ms ease-in-out; 1306 | } 1307 | 1308 | .col-3-of-4 form a:hover { 1309 | background-color: var(--black); 1310 | } 1311 | 1312 | @media (max-width: 768px) { 1313 | .products-layout { 1314 | padding: 0 5rem; 1315 | } 1316 | 1317 | .col-3-of-4 form { 1318 | flex-direction: column; 1319 | align-items: end; 1320 | } 1321 | 1322 | .col-3-of-4 form a { 1323 | margin-right: 0; 1324 | } 1325 | 1326 | .col-3-of-4 form .item { 1327 | margin-right: 0; 1328 | margin-bottom: 1rem; 1329 | } 1330 | } 1331 | 1332 | @media (max-width: 567px) { 1333 | .col-3-of-4 .product-layout { 1334 | grid-template-columns: 1fr; 1335 | } 1336 | } 1337 | 1338 | .col-1-of-4 .block-title { 1339 | color: var(--grey1); 1340 | margin-bottom: 1.6rem; 1341 | } 1342 | 1343 | .col-1-of-4 h3 { 1344 | font-size: 2.7rem; 1345 | font-weight: inherit; 1346 | } 1347 | 1348 | .col-1-of-4 div { 1349 | margin-bottom: 8rem; 1350 | } 1351 | 1352 | .block-content li { 1353 | margin-bottom: 1rem; 1354 | } 1355 | 1356 | .block-content li label { 1357 | color: var(--grey2); 1358 | margin-left: 1rem; 1359 | } 1360 | 1361 | .block-content li label small { 1362 | font-size: 1rem; 1363 | } 1364 | 1365 | .block-content li input { 1366 | outline: none; 1367 | } 1368 | 1369 | .pagination { 1370 | display: flex; 1371 | justify-content: center; 1372 | align-items: center; 1373 | margin: 4rem 0; 1374 | } 1375 | 1376 | .pagination span { 1377 | display: flex; 1378 | align-items: center; 1379 | justify-content: center; 1380 | width: 3.5rem; 1381 | height: 3.5rem; 1382 | border-radius: 50%; 1383 | color: var(--black); 1384 | font-size: 1.3rem; 1385 | border: 1px solid var(--grey2); 1386 | margin-right: 0.5rem; 1387 | cursor: pointer; 1388 | } 1389 | 1390 | .pagination span.last { 1391 | width: 7rem; 1392 | border-radius: 3rem; 1393 | } 1394 | 1395 | .pagination span:hover { 1396 | border: 1px solid var(--primary); 1397 | background-color: var(--primary); 1398 | color: var(--white); 1399 | } 1400 | 1401 | @media (max-width: 768px) { 1402 | .products-layout { 1403 | grid-template-columns: 1fr; 1404 | gap: 4rem 0; 1405 | } 1406 | } 1407 | --------------------------------------------------------------------------------