├── .vscode └── settings.json ├── README.md ├── cart.html ├── css └── styles.css ├── images ├── advert1.png ├── advert2.png ├── advert3.png ├── banner.png ├── brand1.png ├── brand2.png ├── favicon.ico ├── pic1.jpg ├── pic2.jpg ├── pic3.jpg ├── pic4.jpg ├── pic5.jpg ├── profile1.jpg ├── profile2.jpg ├── profile3.jpg └── test.jpg ├── index.html ├── js └── index.js ├── product-details.html └── product.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Ecommerce Website 2 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Your Cart 16 | 17 | 18 | 19 | 20 | 67 | 68 | 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 88 | 89 | 90 | 91 | 92 | 103 | 104 | 105 | 106 | 107 | 118 | 119 | 120 | 121 | 122 | 133 | 134 | 135 | 136 | 137 | 148 | 149 | 150 | 151 |
ProductQuantitySubtotal
78 |
79 | 80 |
81 |

Boy’s T-Shirt

82 | Price: $50.00 83 |
84 | remove 85 |
86 |
87 | 		$50.00
93 |
94 | 95 |
96 |

Boy’s T-Shirt

97 | Price: $90.00 98 |
99 | remove 100 |
101 |
102 | 		$90.00
108 |
109 | 110 |
111 |

Boy’s T-Shirt

112 | Price: $60.00 113 |
114 | remove 115 |
116 |
117 | 		$60.00
123 |
124 | 125 |
126 |

Boy’s T-Shirt

127 | Price: $60.00 128 |
129 | remove 130 |
131 |
132 | 		$60.00
138 |
139 | 140 |
141 |

Boy’s T-Shirt

142 | Price: $60.00 143 |
144 | remove 145 |
146 |
147 | 		$60.00
152 | 153 |
154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 |
Subtotal$200
Tax$50
Total$250
168 | Proceed To Checkout 169 | 170 |
171 | 172 |
173 | 174 | 175 | 176 | 177 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --black: #222; 4 | --pink: #f60091; 5 | --grey: #444; 6 | --grey2: #959595; 7 | --grey-alt: #d1e2e9; 8 | --yellow: #ffd800; 9 | --green: #59b210; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: inherit; 18 | } 19 | 20 | html { 21 | scroll-behavior: smooth; 22 | box-sizing: border-box; 23 | font-size: 62.5%; 24 | } 25 | 26 | body { 27 | font-family: "Poppins", sans-serif; 28 | font-size: 1.6rem; 29 | font-weight: 400; 30 | background-color: #fff; 31 | color: #243a6f; 32 | position: relative; 33 | z-index: 1; 34 | } 35 | 36 | h1, 37 | h2, 38 | h3, 39 | h4 { 40 | font-weight: 500; 41 | } 42 | 43 | a { 44 | color: inherit; 45 | text-decoration: none; 46 | } 47 | 48 | img { 49 | max-width: 100%; 50 | } 51 | 52 | li { 53 | list-style: none; 54 | } 55 | 56 | .container { 57 | max-width: 120rem; 58 | margin: 0 auto; 59 | } 60 | 61 | .container-md { 62 | max-width: 100rem; 63 | margin: 0 auto; 64 | } 65 | 66 | @media only screen and (max-width: 1200px) { 67 | .container { 68 | padding: 0 3rem; 69 | } 70 | 71 | .container-md { 72 | padding: 0 3rem; 73 | } 74 | } 75 | 76 | /* Header */ 77 | .header { 78 | position: relative; 79 | width: 100%; 80 | min-height: 100vh; 81 | background-color: var(--grey-alt); 82 | overflow: hidden; 83 | } 84 | 85 | .nav { 86 | padding: 1.6rem 0; 87 | } 88 | 89 | .nav.fix-nav { 90 | position: fixed; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | background-color: #243a6f; 95 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 96 | z-index: 999; 97 | } 98 | 99 | .nav.fix-nav .nav-link, 100 | .nav.fix-nav .logo, 101 | .nav.fix-nav .cart-icon, 102 | .nav.fix-nav .hamburger { 103 | color: #fff; 104 | } 105 | 106 | .navigation { 107 | display: flex; 108 | align-items: center; 109 | justify-content: space-between; 110 | } 111 | 112 | .logo h1 { 113 | font-size: 2.5rem; 114 | } 115 | 116 | .nav-list { 117 | display: flex; 118 | align-items: center; 119 | } 120 | 121 | .nav-item:not(:last-child) { 122 | margin-right: 0.5rem; 123 | } 124 | 125 | .nav-link:link, 126 | .nav-link:visited { 127 | padding: 0.8rem 1rem; 128 | transition: all 300ms ease-in-out; 129 | } 130 | 131 | .nav-link.icon { 132 | font-size: 3rem; 133 | } 134 | 135 | .top-nav { 136 | display: none; 137 | } 138 | 139 | .hamburger { 140 | display: none; 141 | } 142 | 143 | .cart-icon { 144 | display: none; 145 | } 146 | 147 | @media only screen and (max-width: 768px) { 148 | .menu { 149 | position: fixed; 150 | top: 0; 151 | left: -100%; 152 | width: 80%; 153 | max-width: 40rem; 154 | height: 100%; 155 | background-color: #fff; 156 | transition: all 500ms ease-in-out; 157 | z-index: 100; 158 | } 159 | 160 | .menu.show { 161 | left: 0; 162 | } 163 | 164 | .top-nav { 165 | display: flex; 166 | align-items: center; 167 | justify-content: space-between; 168 | background-color: #243a6f; 169 | padding: 1rem 1.6rem; 170 | } 171 | 172 | .top-nav .logo { 173 | color: #fff; 174 | } 175 | 176 | .top-nav .close { 177 | color: #fff; 178 | font-size: 3rem; 179 | padding: 1rem; 180 | cursor: pointer; 181 | } 182 | 183 | .cart-icon { 184 | display: block; 185 | font-size: 3rem; 186 | } 187 | 188 | .hamburger { 189 | display: block; 190 | font-size: 3rem; 191 | padding: 0.5rem; 192 | cursor: pointer; 193 | } 194 | 195 | .nav-link:link, 196 | .nav-link:visited { 197 | display: block; 198 | font-size: 1.7rem; 199 | padding: 1rem 0; 200 | } 201 | 202 | .nav.fix-nav .nav-link { 203 | color: #243a6f; 204 | } 205 | 206 | .nav-list { 207 | flex-direction: column; 208 | align-items: start; 209 | padding: 1rem 1.6rem; 210 | } 211 | 212 | body.show::before { 213 | content: ""; 214 | position: absolute; 215 | top: 0; 216 | left: 0; 217 | width: 100%; 218 | height: 100%; 219 | background-color: rgba(0, 0, 0, 0.8); 220 | z-index: 4; 221 | } 222 | 223 | .nav.show { 224 | background-color: rgba(0, 0, 0, 0.8); 225 | } 226 | 227 | .nav-link.icon { 228 | display: none; 229 | } 230 | } 231 | 232 | /* Hero */ 233 | .header .hero-img { 234 | position: absolute; 235 | bottom: -10%; 236 | right: -5%; 237 | height: 70rem; 238 | object-fit: contain; 239 | } 240 | 241 | .hero-content { 242 | position: absolute; 243 | top: 50%; 244 | transform: translate(25%, -50%); 245 | } 246 | 247 | .hero-content h2 { 248 | color: #b888ff; 249 | font-size: 3rem; 250 | font-weight: 700; 251 | margin-bottom: 1rem; 252 | } 253 | 254 | .hero-content .discount { 255 | color: #fbb419; 256 | } 257 | 258 | .hero-content h1 span { 259 | color: #253b70; 260 | font-size: 6rem; 261 | font-weight: 700; 262 | display: block; 263 | line-height: 1; 264 | text-shadow: 3px 3px 0 #f1f1f1, 4px 4px 0 #f1f1f1; 265 | } 266 | 267 | .btn { 268 | display: inline-block; 269 | background-color: #fc7c7c; 270 | padding: 1.2rem 4rem; 271 | color: #fff; 272 | font-weight: 600; 273 | text-transform: uppercase; 274 | margin-top: 3rem; 275 | } 276 | 277 | @media only screen and (max-width: 1200px) { 278 | .header .hero-img { 279 | right: -20%; 280 | } 281 | 282 | .hero-content { 283 | transform: translate(20%, -50%); 284 | } 285 | 286 | .hero-content h2 { 287 | font-size: 2rem; 288 | } 289 | 290 | .hero-content h1 span { 291 | font-size: 5rem; 292 | } 293 | } 294 | 295 | @media only screen and (max-width: 996px) { 296 | .header { 297 | min-height: 70vh; 298 | } 299 | 300 | .header .hero-img { 301 | height: 40rem; 302 | right: -10%; 303 | } 304 | } 305 | 306 | @media only screen and (max-width: 567px) { 307 | .header { 308 | min-height: 100vh; 309 | } 310 | 311 | .header .hero-img { 312 | height: 40rem; 313 | bottom: -15%; 314 | } 315 | 316 | .hero-content { 317 | top: 40%; 318 | transform: translate(15%, -50%); 319 | } 320 | 321 | .header .hero-img { 322 | right: 0%; 323 | } 324 | 325 | .hero-content h2 { 326 | font-size: 1.8rem; 327 | } 328 | 329 | .hero-content h1 span { 330 | font-size: 4rem; 331 | } 332 | 333 | .hero-content a { 334 | padding: 1rem 3rem; 335 | } 336 | } 337 | 338 | /* Adverts */ 339 | .section { 340 | padding: 10rem 0 5rem 0; 341 | } 342 | 343 | .advert-center { 344 | display: grid; 345 | grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); 346 | gap: 3rem; 347 | } 348 | 349 | .advert-box { 350 | position: relative; 351 | color: #fff; 352 | height: 27rem; 353 | border-radius: 1rem; 354 | padding: 1.6rem; 355 | overflow: hidden; 356 | z-index: 1; 357 | } 358 | 359 | .advert-box img { 360 | position: absolute; 361 | bottom: 0%; 362 | left: -20%; 363 | height: 100%; 364 | width: 35rem; 365 | z-index: -1; 366 | } 367 | 368 | .advert-box:nth-child(1) { 369 | background-color: #f5c5d1; 370 | } 371 | 372 | .advert-box:nth-child(2) { 373 | background-color: #a1d1df; 374 | } 375 | 376 | .advert-box:nth-child(3) { 377 | background-color: #e5bc00; 378 | } 379 | 380 | .advert-box .dotted { 381 | position: relative; 382 | height: 100%; 383 | border: 2px dashed #f1f1f1; 384 | border-radius: 1rem; 385 | } 386 | 387 | .advert-box .content { 388 | position: absolute; 389 | top: 50%; 390 | right: 5%; 391 | transform: translate(0, -50%); 392 | } 393 | 394 | .advert-box .content h2, 395 | .advert-box .content h4 { 396 | text-shadow: 5px 6px 0px rgba(37, 59, 112, 0.1); 397 | } 398 | 399 | .advert-box .content h2 { 400 | line-height: 1.2; 401 | font-size: 3rem; 402 | font-weight: 700; 403 | margin-bottom: 1rem; 404 | } 405 | 406 | .advert-box .content h4 { 407 | font-size: 1.5rem; 408 | text-transform: capitalize; 409 | } 410 | 411 | /* Featured Products */ 412 | 413 | .title { 414 | margin: 4rem 0 7rem 0; 415 | text-align: center; 416 | } 417 | 418 | .title h1 { 419 | font-size: 3rem; 420 | display: inline-block; 421 | position: relative; 422 | z-index: 0; 423 | } 424 | 425 | .title h1::after { 426 | content: ""; 427 | position: absolute; 428 | left: 50%; 429 | bottom: -20%; 430 | transform: translate(-50%, -50%); 431 | background-color: var(--pink); 432 | width: 50%; 433 | height: 0.4rem; 434 | z-index: 1; 435 | } 436 | 437 | /* Product */ 438 | .product-center { 439 | display: grid; 440 | grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 441 | gap: 7rem 3rem; 442 | } 443 | 444 | .product { 445 | height: 48rem; 446 | background-color: #fff; 447 | box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); 448 | border-radius: 1rem; 449 | text-align: center; 450 | transition: all 300ms ease-in-out; 451 | } 452 | 453 | .product:hover { 454 | box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25); 455 | } 456 | 457 | .product-header { 458 | position: relative; 459 | height: 35rem; 460 | background-color: #f6f2f1; 461 | transition: all 300ms ease-in-out; 462 | z-index: 0; 463 | } 464 | 465 | .product-header img { 466 | height: 100%; 467 | } 468 | 469 | .product-footer { 470 | padding: 2rem 1.6rem 1.6rem 1.6rem; 471 | } 472 | 473 | .product-footer h3 { 474 | font-size: 2.2rem; 475 | } 476 | 477 | .rating { 478 | color: #43b3d9; 479 | } 480 | 481 | .product-footer .price { 482 | color: #ff7c9c; 483 | font-size: 2rem; 484 | } 485 | 486 | .product:hover .product-header::after { 487 | content: ""; 488 | position: absolute; 489 | width: 100%; 490 | height: 100%; 491 | left: 0; 492 | top: 0; 493 | border-radius: 1rem 1rem 0 0; 494 | background-color: rgba(0, 0, 0, 0.5); 495 | transition: all 500ms ease-in-out; 496 | z-index: 1; 497 | } 498 | 499 | .product-header .icons { 500 | position: absolute; 501 | right: 5%; 502 | top: 50%; 503 | transform: translate(0, -50%) scale(0); 504 | z-index: 2; 505 | opacity: 0; 506 | transition: all 500ms ease-in-out; 507 | } 508 | 509 | .product-header .icons span { 510 | background-color: #fff; 511 | font-size: 2.5rem; 512 | display: block; 513 | border-radius: 50%; 514 | padding: 1.5rem 1.6rem; 515 | line-height: 2rem; 516 | cursor: pointer; 517 | transition: all 300ms ease-in-out; 518 | } 519 | 520 | .product-header .icons span i { 521 | transition: all 500ms ease-in-out; 522 | } 523 | 524 | .product-header .icons span:not(:last-child) { 525 | margin-bottom: 1rem; 526 | } 527 | 528 | .product-header .icons span:hover { 529 | background-color: #ff7c9c; 530 | color: #fff; 531 | } 532 | 533 | .product:hover .icons { 534 | opacity: 1; 535 | transform: translate(0, -50%) scale(1); 536 | } 537 | 538 | .product-header .icons a { 539 | display: block; 540 | margin-bottom: 1rem; 541 | } 542 | 543 | /* Exclusive Product */ 544 | .product-banner { 545 | display: grid; 546 | grid-template-columns: 1fr 1fr; 547 | height: 50rem; 548 | background-color: #243a6f; 549 | } 550 | 551 | .product-banner .left img { 552 | object-fit: cover; 553 | height: 100%; 554 | } 555 | 556 | .product-banner .right { 557 | align-self: center; 558 | text-align: center; 559 | padding: 1.6rem; 560 | } 561 | 562 | .product-banner .content h2 { 563 | color: #fbb419; 564 | font-size: 3rem; 565 | font-weight: 700; 566 | margin-bottom: 1rem; 567 | } 568 | 569 | .product-banner .content .discount { 570 | color: #b888ff; 571 | } 572 | 573 | .product-banner .content h1 span { 574 | color: #fff; 575 | font-size: 6rem; 576 | font-weight: 700; 577 | display: block; 578 | line-height: 1; 579 | } 580 | 581 | @media only screen and (max-width: 996px) { 582 | .product-banner .content h1 span { 583 | font-size: 5rem; 584 | } 585 | } 586 | 587 | @media only screen and (max-width: 768px) { 588 | .product-banner { 589 | grid-template-columns: 1fr; 590 | } 591 | 592 | .product-banner .left { 593 | display: none; 594 | } 595 | 596 | .product-banner .content h1 span { 597 | font-size: 4rem; 598 | } 599 | 600 | .product-banner .content h2 { 601 | font-size: 2rem; 602 | } 603 | 604 | .product-banner .content a { 605 | padding: 1rem 3rem; 606 | } 607 | } 608 | 609 | /* Testimonials */ 610 | .testimonial-center { 611 | display: grid; 612 | grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 613 | gap: 6rem; 614 | } 615 | 616 | .testimonial { 617 | position: relative; 618 | padding: 5rem; 619 | background-color: #fff; 620 | box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); 621 | transition: all 300ms ease-in-out; 622 | text-align: center; 623 | border-radius: 0.5rem; 624 | } 625 | 626 | .testimonial:hover { 627 | box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); 628 | transform: translateY(-1rem); 629 | } 630 | 631 | .testimonial span { 632 | position: absolute; 633 | top: 2%; 634 | left: 50%; 635 | font-size: 12rem; 636 | font-family: sans-serif; 637 | color: #ff7c9c; 638 | line-height: 1; 639 | transform: translate(-50%, 0); 640 | } 641 | 642 | .testimonial p { 643 | margin: 2rem 0 1rem 0; 644 | } 645 | 646 | .testimonial .rating { 647 | margin-bottom: 1rem; 648 | } 649 | 650 | .testimonial .img-cover { 651 | border-radius: 50%; 652 | width: 8rem; 653 | height: 8rem; 654 | overflow: hidden; 655 | margin: 0 auto; 656 | } 657 | 658 | .testimonial .img-cover img { 659 | height: 100%; 660 | object-fit: cover; 661 | } 662 | 663 | .testimonial h4 { 664 | margin-top: 1rem; 665 | } 666 | 667 | /* Brands */ 668 | .brands-center { 669 | display: grid; 670 | grid-template-columns: repeat(6, 1fr); 671 | gap: 3rem; 672 | } 673 | 674 | .brand { 675 | height: 8rem; 676 | width: 8rem; 677 | margin: 0 auto; 678 | } 679 | 680 | .brand img { 681 | object-fit: contain; 682 | } 683 | 684 | @media only screen and (max-width: 768px) { 685 | .brands-center { 686 | grid-template-columns: repeat(3, 1fr); 687 | } 688 | } 689 | 690 | /* ========= Footer ======== */ 691 | .footer { 692 | background-color: var(--black); 693 | padding: 6rem 1rem; 694 | line-height: 3rem; 695 | } 696 | 697 | .footer-center span { 698 | margin-right: 1rem; 699 | } 700 | 701 | .footer-container { 702 | display: grid; 703 | grid-template-columns: repeat(4, 1fr); 704 | color: var(--white); 705 | } 706 | 707 | .footer-center a:link, 708 | .footer-center a:visited { 709 | display: block; 710 | color: #f1f1f1; 711 | font-size: 1.4rem; 712 | transition: 0.6s; 713 | } 714 | 715 | .footer-center a:hover { 716 | color: var(--pink); 717 | } 718 | 719 | .footer-center div { 720 | color: #f1f1f1; 721 | font-size: 1.4rem; 722 | } 723 | 724 | .footer-center h3 { 725 | font-size: 1.8rem; 726 | font-weight: 400; 727 | margin-bottom: 1rem; 728 | } 729 | 730 | @media only screen and (max-width: 998px) { 731 | .footer-container { 732 | grid-template-columns: repeat(2, 1fr); 733 | row-gap: 2rem; 734 | } 735 | } 736 | 737 | @media only screen and (max-width: 768px) { 738 | .footer-container { 739 | grid-template-columns: 1fr; 740 | row-gap: 2rem; 741 | } 742 | } 743 | 744 | /* All Products */ 745 | .section .top { 746 | display: flex; 747 | align-items: center; 748 | justify-content: space-between; 749 | margin-bottom: 4rem; 750 | } 751 | 752 | .all-products .top select { 753 | font-family: "Poppins", sans-serif; 754 | width: 20rem; 755 | padding: 1rem; 756 | border: 1px solid #ccc; 757 | appearance: none; 758 | outline: none; 759 | } 760 | 761 | form { 762 | position: relative; 763 | z-index: 1; 764 | } 765 | 766 | form span { 767 | position: absolute; 768 | top: 50%; 769 | right: 1rem; 770 | transform: translateY(-50%); 771 | font-size: 2rem; 772 | z-index: 0; 773 | } 774 | 775 | @media only screen and (max-width: 768px) { 776 | .all-products .top select { 777 | width: 15rem; 778 | } 779 | } 780 | 781 | /* Pagination */ 782 | .pagination { 783 | padding: 3rem 0 5rem 0; 784 | } 785 | 786 | .pagination span { 787 | display: inline-block; 788 | padding: 1rem 1.5rem; 789 | border: 1px solid #243a6f; 790 | font-size: 1.8rem; 791 | margin-bottom: 2rem; 792 | cursor: pointer; 793 | transition: all 300ms ease-in-out; 794 | } 795 | 796 | .pagination span:hover { 797 | border: 1px solid #243a6f; 798 | background-color: #243a6f; 799 | color: #fff; 800 | } 801 | 802 | /* Detail */ 803 | .product-detail .details { 804 | display: grid; 805 | grid-template-columns: 1fr 1.2fr; 806 | gap: 7rem; 807 | } 808 | 809 | .product-detail .left { 810 | display: flex; 811 | flex-direction: column; 812 | } 813 | 814 | .product-detail .left .main { 815 | text-align: center; 816 | background-color: #f6f2f1; 817 | margin-bottom: 2rem; 818 | height: 45rem; 819 | padding: 3rem; 820 | } 821 | 822 | .product-detail .left .main img { 823 | object-fit: contain; 824 | height: 100%; 825 | } 826 | 827 | .product-detail .thumbnails { 828 | display: grid; 829 | grid-template-columns: repeat(4, 1fr); 830 | gap: 1rem; 831 | } 832 | 833 | .product-detail .thumbnail { 834 | width: 10rem; 835 | height: 10rem; 836 | background-color: #f6f2f1; 837 | text-align: center; 838 | } 839 | 840 | .product-detail .thumbnail img { 841 | height: 100%; 842 | object-fit: contain; 843 | } 844 | 845 | .product-detail .right span { 846 | display: inline-block; 847 | font-size: 1.5rem; 848 | margin-bottom: 1rem; 849 | } 850 | 851 | .product-detail .right h1 { 852 | font-size: 4rem; 853 | line-height: 1.2; 854 | margin-bottom: 2rem; 855 | } 856 | 857 | .product-detail .right .price { 858 | font-size: 600; 859 | font-size: 2rem; 860 | color: #ff7c9c; 861 | margin-bottom: 2rem; 862 | } 863 | 864 | .product-detail .right div { 865 | display: inline-block; 866 | position: relative; 867 | z-index: 1; 868 | } 869 | 870 | .product-detail .right select { 871 | font-family: "Poppins", sans-serif; 872 | width: 20rem; 873 | padding: 0.7rem; 874 | border: 1px solid #ccc; 875 | appearance: none; 876 | outline: none; 877 | } 878 | 879 | .product-detail form { 880 | margin-bottom: 2rem; 881 | } 882 | 883 | .product-detail form span { 884 | position: absolute; 885 | top: 50%; 886 | right: 1rem; 887 | transform: translateY(-50%); 888 | font-size: 2rem; 889 | z-index: 0; 890 | } 891 | 892 | .product-detail .form { 893 | margin-bottom: 3rem; 894 | } 895 | 896 | .product-detail .form input { 897 | padding: 0.8rem; 898 | text-align: center; 899 | width: 3.5rem; 900 | margin-right: 2rem; 901 | } 902 | 903 | .product-detail .form .addCart { 904 | background: #ff7c9c; 905 | padding: 0.8rem 4rem; 906 | color: #fff; 907 | border-radius: 3rem; 908 | } 909 | 910 | .product-detail h3 { 911 | text-transform: uppercase; 912 | margin-bottom: 2rem; 913 | } 914 | 915 | @media only screen and (max-width: 996px) { 916 | .product-detail .left { 917 | width: 30rem; 918 | height: 45rem; 919 | } 920 | 921 | .product-detail .details { 922 | gap: 3rem; 923 | } 924 | 925 | .product-detail .thumbnails { 926 | width: 30rem; 927 | gap: 0.5rem; 928 | } 929 | 930 | .product-detail .thumbnail { 931 | width: auto; 932 | height: 10rem; 933 | background-color: #f6f2f1; 934 | text-align: center; 935 | padding: 0.5rem; 936 | } 937 | } 938 | 939 | @media only screen and (max-width: 650px) { 940 | .product-detail .details { 941 | grid-template-columns: 1fr; 942 | } 943 | 944 | .product-detail .right { 945 | margin-top: 10rem; 946 | } 947 | 948 | .product-detail .left { 949 | width: 100%; 950 | height: 45rem; 951 | } 952 | 953 | .product-detail .details { 954 | gap: 3rem; 955 | } 956 | 957 | .product-detail .thumbnails { 958 | width: 100%; 959 | gap: 0.5rem; 960 | } 961 | } 962 | 963 | /* Cart Items */ 964 | .cart { 965 | margin: 10rem auto; 966 | } 967 | 968 | table { 969 | width: 100%; 970 | border-collapse: collapse; 971 | } 972 | 973 | .cart-info { 974 | display: flex; 975 | flex-wrap: wrap; 976 | } 977 | 978 | th { 979 | text-align: left; 980 | padding: 0.5rem; 981 | color: #fff; 982 | background-color: #fc7c7c; 983 | font-weight: normal; 984 | } 985 | 986 | td { 987 | padding: 1rem 0.5rem; 988 | } 989 | 990 | td input { 991 | width: 5rem; 992 | height: 3rem; 993 | padding: 0.5rem; 994 | } 995 | 996 | td a { 997 | color: orangered; 998 | font-size: 1.4rem; 999 | } 1000 | 1001 | td img { 1002 | width: 8rem; 1003 | height: 8rem; 1004 | margin-right: 1rem; 1005 | } 1006 | 1007 | .total-price { 1008 | display: flex; 1009 | justify-content: flex-end; 1010 | align-items: end; 1011 | flex-direction: column; 1012 | margin-top: 2rem; 1013 | } 1014 | 1015 | .total-price table { 1016 | border-top: 3px solid #fc7c7c; 1017 | width: 100%; 1018 | max-width: 35rem; 1019 | } 1020 | 1021 | td:last-child { 1022 | text-align: right; 1023 | } 1024 | 1025 | th:last-child { 1026 | text-align: right; 1027 | } 1028 | 1029 | @media only screen and (max-width: 567px) { 1030 | .cart-info p { 1031 | display: none; 1032 | } 1033 | } 1034 | -------------------------------------------------------------------------------- /images/advert1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/advert1.png -------------------------------------------------------------------------------- /images/advert2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/advert2.png -------------------------------------------------------------------------------- /images/advert3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/advert3.png -------------------------------------------------------------------------------- /images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/banner.png -------------------------------------------------------------------------------- /images/brand1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/brand1.png -------------------------------------------------------------------------------- /images/brand2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/brand2.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/favicon.ico -------------------------------------------------------------------------------- /images/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/pic1.jpg -------------------------------------------------------------------------------- /images/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/pic2.jpg -------------------------------------------------------------------------------- /images/pic3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/pic3.jpg -------------------------------------------------------------------------------- /images/pic4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/pic4.jpg -------------------------------------------------------------------------------- /images/pic5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/pic5.jpg -------------------------------------------------------------------------------- /images/profile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/profile1.jpg -------------------------------------------------------------------------------- /images/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/profile2.jpg -------------------------------------------------------------------------------- /images/profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/profile3.jpg -------------------------------------------------------------------------------- /images/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce-website-4/2d406cb25cd45c080216ffac0c614e1e08c7d19d/images/test.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Codevo - Ecommerce Website 15 | 16 | 17 | 18 | 19 |
20 | 21 | 68 | 69 | 70 | 71 | 72 |
73 |

70% SALE OFF

74 |

75 | Summer Vibes 76 | mode on 77 |

78 | shop now 79 |
80 |
81 | 82 | 83 |
84 | 126 | 127 | 128 |
129 |
130 |

Featured Products

131 |
132 | 133 |
134 |
135 |
136 | 137 |
    138 | 139 | 140 | 141 |
142 |
143 |
144 | 145 |

Boy’s T-Shirt

146 | 147 |
148 | 149 | 150 | 151 | 152 | 153 |
154 |

$50

155 |
156 |
157 |
158 |
159 | 160 |
    161 | 162 | 163 | 164 |
165 |
166 |
167 |

Boy’s T-Shirt

 168 |
169 | 170 | 171 | 172 | 173 | 174 |
175 |

$50

176 |
177 |
178 |
179 |
180 | 181 |
    182 | 183 | 184 | 185 |
186 |
187 |
188 |

Boy’s T-Shirt

 189 |
190 | 191 | 192 | 193 | 194 | 195 |
196 |

$50

197 |
198 |
199 |
200 |
201 | 202 | 203 |
    204 | 205 | 206 | 207 |
208 |
209 |
210 |

Boy’s T-Shirt

 211 |
212 | 213 | 214 | 215 | 216 | 217 |
218 |

$50

219 |
220 |
221 |
222 |
223 | 224 | 225 |
226 |
227 |

Latest Products

228 |
229 | 230 |
231 |
232 |
233 | 234 | 235 |
    236 | 237 | 238 | 239 |
240 |
241 |
242 |

Boy’s T-Shirt

 243 |
244 | 245 | 246 | 247 | 248 | 249 |
250 |

$50

251 |
252 |
253 |
254 |
255 | 256 | 257 |
    258 | 259 | 260 | 261 |
262 |
263 |
264 |

Boy’s T-Shirt

 265 |
266 | 267 | 268 | 269 | 270 | 271 |
272 |

$50

273 |
274 |
275 |
276 |
277 | 278 | 279 |
    280 | 281 | 282 | 283 |
284 |
285 |
286 |

Boy’s T-Shirt

 287 |
288 | 289 | 290 | 291 | 292 | 293 |
294 |

$50

295 |
296 |
297 |
298 |
299 | 300 | 301 |
    302 | 303 | 304 | 305 |
306 |
307 |
308 |

Boy’s T-Shirt

 309 |
310 | 311 | 312 | 313 | 314 | 315 |
316 |

$50

317 |
318 |
319 |
320 |
321 | 322 | 323 |
    324 | 325 | 326 | 327 |
328 |
329 |
330 |

Boy’s T-Shirt

 331 |
332 | 333 | 334 | 335 | 336 | 337 |
338 |

$50

339 |
340 |
341 |
342 |
343 | 344 | 345 |
    346 | 347 | 348 | 349 |
350 |
351 |
352 |

Boy’s T-Shirt

 353 |
354 | 355 | 356 | 357 | 358 | 359 |
360 |

$50

361 |
362 |
363 |
364 |
365 | 366 | 367 |
    368 | 369 | 370 | 371 |
372 |
373 |
374 |

Boy’s T-Shirt

 375 |
376 | 377 | 378 | 379 | 380 | 381 |
382 |

$50

383 |
384 |
385 |
386 |
387 | 388 | 389 |
    390 | 391 | 392 | 393 |
394 |
395 |
396 |

Boy’s T-Shirt

 397 |
398 | 399 | 400 | 401 | 402 | 403 |
404 |

$50

405 |
406 |
407 |
408 |
409 | 410 | 411 |
412 |
413 |
414 | 415 |
416 |
417 |
418 |

70% SALE OFF

419 |

420 | Collect Your 421 | Kids Collection 422 |

423 | shop now 424 |
425 |
426 |
427 |
428 | 429 | 430 |
431 |
432 |
433 | “ 434 |

435 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, 436 | fugiat labore. Veritatis et omnis consequatur. 437 |

438 |
439 | 440 | 441 | 442 | 443 | 444 |
445 |
446 | 447 |
448 |

Will Smith

449 |
450 |
451 | “ 452 |

453 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, 454 | fugiat labore. Veritatis et omnis consequatur. 455 |

456 |
457 | 458 | 459 | 460 | 461 | 462 |
463 |
464 | 465 |
466 |

Will Smith

467 |
468 |
469 | “ 470 |

471 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, 472 | fugiat labore. Veritatis et omnis consequatur. 473 |

474 |
475 | 476 | 477 | 478 | 479 | 480 |
481 |
482 | 483 |
484 |

Will Smith

485 |
486 |
487 |
488 | 489 | 490 |
491 |
492 |
493 | 494 |
495 |
496 | 497 |
498 |
499 | 500 |
501 |
502 | 503 |
504 |
505 | 506 |
507 |
508 | 509 |
510 |
511 |
512 |
513 | 514 | 515 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector(".menu"); 2 | const navOpen = document.querySelector(".hamburger"); 3 | const navClose = document.querySelector(".close"); 4 | 5 | const navLeft = menu.getBoundingClientRect().left; 6 | navOpen.addEventListener("click", () => { 7 | if (navLeft < 0) { 8 | menu.classList.add("show"); 9 | document.body.classList.add("show"); 10 | navBar.classList.add("show"); 11 | } 12 | }); 13 | 14 | navClose.addEventListener("click", () => { 15 | if (navLeft < 0) { 16 | menu.classList.remove("show"); 17 | document.body.classList.remove("show"); 18 | navBar.classList.remove("show"); 19 | } 20 | }); 21 | 22 | // Fixed Nav 23 | const navBar = document.querySelector(".nav"); 24 | const navHeight = navBar.getBoundingClientRect().height; 25 | window.addEventListener("scroll", () => { 26 | const scrollHeight = window.pageYOffset; 27 | if (scrollHeight > navHeight) { 28 | navBar.classList.add("fix-nav"); 29 | } else { 30 | navBar.classList.remove("fix-nav"); 31 | } 32 | }); 33 | 34 | // Scroll To 35 | const links = [...document.querySelectorAll(".scroll-link")]; 36 | links.map(link => { 37 | if (!link) return; 38 | link.addEventListener("click", e => { 39 | e.preventDefault(); 40 | 41 | const id = e.target.getAttribute("href").slice(1); 42 | 43 | const element = document.getElementById(id); 44 | const fixNav = navBar.classList.contains("fix-nav"); 45 | let position = element.offsetTop - navHeight; 46 | 47 | window.scrollTo({ 48 | top: position, 49 | left: 0, 50 | }); 51 | 52 | navBar.classList.remove("show"); 53 | menu.classList.remove("show"); 54 | document.body.classList.remove("show"); 55 | }); 56 | }); 57 | 58 | gsap.from(".logo", { opacity: 0, duration: 1, delay: 0.5, y: -10 }); 59 | gsap.from(".hamburger", { opacity: 0, duration: 1, delay: 1, x: 20 }); 60 | gsap.from(".hero-img", { opacity: 0, duration: 1, delay: 1.5, x: -200 }); 61 | gsap.from(".hero-content h2", { opacity: 0, duration: 1, delay: 2, y: -50 }); 62 | gsap.from(".hero-content h1", { opacity: 0, duration: 1, delay: 2.5, y: -45 }); 63 | gsap.from(".hero-content a", { opacity: 0, duration: 1, delay: 3.5, y: 50 }); 64 | -------------------------------------------------------------------------------- /product-details.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Boy’s T-Shirt - Codevo 18 | 19 | 20 | 21 | 22 | 69 | 70 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 | Home/T-shirt 94 |

Boy’s T-Shirt By Handsome

95 |
$50
96 |
97 |
98 | 105 | 106 |
107 |
108 | 109 |
110 | 111 | Add To Cart 112 |
113 |

Product Detail

114 |

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

116 |
117 |
118 |
119 | 120 | 121 |
122 |
123 |

Related Products

124 | View more 125 |
126 | 127 |
128 |
129 |
130 | 131 |
    132 | 133 | 134 | 135 |
136 |
137 |
138 |

Boy’s T-Shirt

 139 |
140 | 141 | 142 | 143 | 144 | 145 |
146 |

$50

147 |
148 |
149 |
150 |
151 | 152 | 153 |
    154 | 155 | 156 | 157 |
158 |
159 |
160 |

Boy’s T-Shirt

 161 |
162 | 163 | 164 | 165 | 166 | 167 |
168 |

$50

169 |
170 |
171 |
172 |
173 | 174 | 175 |
    176 | 177 | 178 | 179 |
180 |
181 |
182 |

Boy’s T-Shirt

 183 |
184 | 185 | 186 | 187 | 188 | 189 |
190 |

$50

191 |
192 |
193 |
194 |
195 | 196 | 197 |
    198 | 199 | 200 | 201 |
202 |
203 |
204 |

Boy’s T-Shirt

 205 |
206 | 207 | 208 | 209 | 210 | 211 |
212 |

$50

213 |
214 |
215 |
216 |
217 | 218 | 219 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | -------------------------------------------------------------------------------- /product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Boy’s T-Shirt 16 | 17 | 18 | 19 | 20 | 67 | 68 | 69 |
70 |
71 |

All Products

72 |
73 | 80 | 81 |
82 |
83 | 84 |
85 |
86 |
87 | 88 | 94 |
95 |
96 | 97 |

Boy’s T-Shirt

98 | 99 |
100 | 101 | 102 | 103 | 104 | 105 |
106 |

$50

107 |
108 |
109 |
110 |
111 | 112 | 113 |
    114 | 115 | 116 | 117 |
118 |
119 |
120 |

Boy’s T-Shirt

121 |
122 | 123 | 124 | 125 | 126 | 127 |
128 |

$50

129 |
130 |
131 |
132 |
133 | 134 | 135 |
    136 | 137 | 138 | 139 |
140 |
141 |
142 |

Boy’s T-Shirt

143 |
144 | 145 | 146 | 147 | 148 | 149 |
150 |

$50

151 |
152 |
153 |
154 |
155 | 156 | 157 |
    158 | 159 | 160 | 161 |
162 |
163 |
164 |

Boy’s T-Shirt

165 |
166 | 167 | 168 | 169 | 170 | 171 |
172 |

$50

173 |
174 |
175 |
176 |
177 | 178 | 179 |
    180 | 181 | 182 | 183 |
184 |
185 |
186 |

Boy’s T-Shirt

187 |
188 | 189 | 190 | 191 | 192 | 193 |
194 |

$50

195 |
196 |
197 |
198 |
199 | 200 | 201 |
    202 | 203 | 204 | 205 |
206 |
207 |
208 |

Boy’s T-Shirt

209 |
210 | 211 | 212 | 213 | 214 | 215 |
216 |

$50

217 |
218 |
219 |
220 |
221 | 222 | 223 |
    224 | 225 | 226 | 227 |
228 |
229 |
230 |

Boy’s T-Shirt

231 |
232 | 233 | 234 | 235 | 236 | 237 |
238 |

$50

239 |
240 |
241 |
242 |
243 | 244 | 245 |
    246 | 247 | 248 | 249 |
250 |
251 |
252 |

Boy’s T-Shirt

253 |
254 | 255 | 256 | 257 | 258 | 259 |
260 |

$50

261 |
262 |
263 |
264 |
265 | 266 |
267 |
268 | 1 269 | 2 270 | 3 271 | 4 272 | 273 |
274 |
275 | 276 | 277 | 278 | 279 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | --------------------------------------------------------------------------------