├── assets ├── .DS_Store ├── css │ ├── styles.css │ └── swiper-bundle.min.css ├── img │ ├── about-img.png │ ├── category1-img.png │ ├── category2-img.png │ ├── category3-img.png │ ├── discount-img.png │ ├── favicon.png │ ├── footer1-img.png │ ├── footer2-img.png │ ├── home1-img.png │ ├── home2-img.png │ ├── home3-img.png │ ├── logo.png │ ├── nav-img.png │ ├── new1-img.png │ ├── new2-img.png │ ├── new3-img.png │ ├── new4-img.png │ ├── new5-img.png │ ├── new6-img.png │ ├── trick-treat1-img.png │ ├── trick-treat2-img.png │ ├── trick-treat3-img.png │ ├── trick-treat4-img.png │ ├── trick-treat5-img.png │ └── trick-treat6-img.png ├── js │ ├── main.js │ ├── scrollreveal.min.js │ └── swiper-bundle.min.js └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _about.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _category.scss │ ├── _discount.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _home.scss │ ├── _new.scss │ ├── _newsletter.scss │ ├── _scroll.scss │ └── _trick.scss │ ├── config │ └── _variables.scss │ ├── layout │ └── _layout.scss │ ├── styles.scss │ └── theme │ └── _theme.scss ├── index.html └── preview.png /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/.DS_Store -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | --hue: 14; 10 | --first-color: hsl(var(--hue), 91%, 54%); 11 | --first-color-alt: hsl(var(--hue), 91%, 50%); 12 | --title-color: hsl(var(--hue), 4%, 100%); 13 | --text-color: hsl(var(--hue), 4%, 85%); 14 | --text-color-light: hsl(var(--hue), 4%, 55%); 15 | 16 | /*Green gradient*/ 17 | --body-color: linear-gradient(90deg, hsl(104, 28%, 40%) 0%, hsl(58, 28%, 40%) 100%); 18 | --container-color: linear-gradient(136deg, hsl(104, 28%, 35%) 0%, hsl(58, 28%, 35%) 100%); 19 | 20 | /*Red gradient*/ 21 | /* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%); 22 | --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */ 23 | 24 | /*Black solid*/ 25 | /* --body-color: hsl(30, 8%, 8%); 26 | --container-color: hsl(30, 8%, 10%); */ 27 | 28 | /*========== Font and typography ==========*/ 29 | --body-font: 'Poppins', sans-serif; 30 | --biggest-font-size: 2rem; 31 | --h1-font-size: 1.5rem; 32 | --h2-font-size: 1.25rem; 33 | --h3-font-size: 1rem; 34 | --normal-font-size: .938rem; 35 | --small-font-size: .813rem; 36 | --smaller-font-size: .75rem; 37 | 38 | /*========== Font weight ==========*/ 39 | --font-medium: 500; 40 | --font-semi-bold: 600; 41 | --font-black: 900; 42 | 43 | /*========== Margenes Bottom ==========*/ 44 | --mb-0-25: .25rem; 45 | --mb-0-5: .5rem; 46 | --mb-0-75: .75rem; 47 | --mb-1: 1rem; 48 | --mb-1-5: 1.5rem; 49 | --mb-2: 2rem; 50 | --mb-2-5: 2.5rem; 51 | 52 | /*========== z index ==========*/ 53 | --z-tooltip: 10; 54 | --z-fixed: 100; 55 | } 56 | 57 | /* Responsive typography */ 58 | @media screen and (min-width: 992px) { 59 | :root { 60 | --biggest-font-size: 4rem; 61 | --h1-font-size: 2.25rem; 62 | --h2-font-size: 1.5rem; 63 | --h3-font-size: 1.25rem; 64 | --normal-font-size: 1rem; 65 | --small-font-size: .875rem; 66 | --smaller-font-size: .813rem; 67 | } 68 | } 69 | 70 | /*=============== BASE ===============*/ 71 | *{ 72 | box-sizing: border-box; 73 | padding: 0; 74 | margin: 0; 75 | } 76 | 77 | html{ 78 | scroll-behavior: smooth; 79 | } 80 | 81 | body{ 82 | margin: var(--header-height) 0 0 0; 83 | font-family: var(--body-font); 84 | font-size: var(--normal-font-size); 85 | background: var(--body-color); 86 | color: var(--text-color); 87 | } 88 | 89 | h1,h2,h3,h4{ 90 | color: var(--title-color); 91 | font-weight: var(--font-semi-bold); 92 | } 93 | 94 | ul{ 95 | list-style: none; 96 | } 97 | 98 | a{ 99 | text-decoration: none; 100 | } 101 | 102 | img{ 103 | max-width: 100%; 104 | height: auto; 105 | } 106 | 107 | button, 108 | input{ 109 | border: none; 110 | outline: none; 111 | } 112 | 113 | button{ 114 | cursor: pointer; 115 | font-family: var(--body-font); 116 | font-size: var(--normal-font-size); 117 | } 118 | 119 | /*=============== REUSABLE CSS CLASSES ===============*/ 120 | .section{ 121 | padding: 4.5rem 0 2rem; 122 | } 123 | 124 | .section__title{ 125 | font-size: var(--h2-font-size); 126 | margin-bottom: var(--mb-2); 127 | text-align: center; 128 | } 129 | 130 | /*=============== LAYOUT ===============*/ 131 | .container{ 132 | max-width: 968px; 133 | margin-left: var(--mb-1-5); 134 | margin-right: var(--mb-1-5); 135 | } 136 | 137 | .grid{ 138 | display: grid; 139 | } 140 | 141 | .main{ 142 | overflow: hidden; /*For animation*/ 143 | } 144 | 145 | /*=============== HEADER ===============*/ 146 | .header{ 147 | width: 100%; 148 | background: var(--body-color); 149 | position: fixed; 150 | top: 0; 151 | left: 0; 152 | z-index: var(--z-fixed); 153 | } 154 | 155 | /*=============== NAV ===============*/ 156 | .nav{ 157 | height: var(--header-height); 158 | display: flex; 159 | justify-content: space-between; 160 | align-items: center; 161 | } 162 | 163 | .nav__logo{ 164 | display: flex; 165 | align-items: center; 166 | column-gap: .5rem; 167 | font-weight: var(--font-medium); 168 | } 169 | 170 | .nav__logo-img{ 171 | width: 1.25rem; 172 | } 173 | 174 | .nav__link, 175 | .nav__logo, 176 | .nav__toggle, 177 | .nav__close{ 178 | color: var(--title-color); 179 | } 180 | 181 | .nav__toggle{ 182 | font-size: 1.25rem; 183 | cursor: pointer; 184 | } 185 | 186 | @media screen and (max-width: 767px){ 187 | .nav__menu{ 188 | position: fixed; 189 | width: 100%; 190 | background: var(--container-color); 191 | top: -150%; 192 | left: 0; 193 | padding: 3.5rem 0; 194 | transition: .4s; 195 | z-index: var(--z-fixed); 196 | border-radius: 0 0 1.5rem 1.5rem; 197 | } 198 | } 199 | 200 | .nav__img{ 201 | width: 100px; 202 | position: absolute; 203 | top: 0; 204 | left: 0; 205 | } 206 | 207 | .nav__close{ 208 | font-size: 1.8rem; 209 | position: absolute; 210 | top: .5rem; 211 | right: .7rem; 212 | cursor: pointer; 213 | } 214 | 215 | .nav__list{ 216 | display: flex; 217 | flex-direction: column; 218 | align-items: center; 219 | row-gap: 1.5rem; 220 | } 221 | 222 | .nav__link{ 223 | text-transform: uppercase; 224 | font-weight: var(--font-black); 225 | transition: .4s; 226 | } 227 | 228 | .nav__link:hover{ 229 | color: var(--text-color); 230 | } 231 | 232 | /* Show menu */ 233 | .show-menu{ 234 | top: 0; 235 | } 236 | 237 | /* Change background header */ 238 | .scroll-header{ 239 | background: var(--container-color); 240 | } 241 | 242 | /* Active link */ 243 | .active-link{ 244 | position: relative; 245 | } 246 | 247 | .active-link::before{ 248 | content: ''; 249 | position: absolute; 250 | bottom: -.75rem; 251 | left: 45%; 252 | width: 5px; 253 | height: 5px; 254 | background-color: var(--title-color); 255 | border-radius: 50%; 256 | } 257 | 258 | /*=============== HOME ===============*/ 259 | .home__content{ 260 | row-gap: 1rem; 261 | } 262 | 263 | .home__group{ 264 | display: grid; 265 | position: relative; 266 | padding-top: 2rem; 267 | } 268 | 269 | .home__img{ 270 | height: 250px; 271 | justify-self: center; 272 | } 273 | 274 | .home__indicator{ 275 | width: 8px; 276 | height: 8px; 277 | background-color: var(--title-color); 278 | border-radius: 50%; 279 | position: absolute; 280 | top: 7rem; 281 | right: 2rem; 282 | } 283 | 284 | .home__indicator::after{ 285 | content: ''; 286 | position: absolute; 287 | width: 1px; 288 | height: 48px; 289 | background-color: var(--title-color); 290 | top: -3rem; 291 | right: 45%; 292 | } 293 | 294 | .home__details-img{ 295 | position: absolute; 296 | right: .5rem; 297 | } 298 | 299 | .home__details-title, 300 | .home__details-subtitle{ 301 | display: block; 302 | font-size: var(--small-font-size); 303 | text-align: right; 304 | } 305 | 306 | .home__subtitle{ 307 | font-size: var(--h3-font-size); 308 | text-transform: uppercase; 309 | margin-bottom: var(--mb-1); 310 | } 311 | 312 | .home__title{ 313 | font-size: var(--biggest-font-size); 314 | font-weight: var(--font-black); 315 | line-height: 109%; 316 | margin-bottom: var(--mb-1); 317 | } 318 | 319 | .home__description{ 320 | margin-bottom: var(--mb-1); 321 | } 322 | 323 | .home__buttons{ 324 | display: flex; 325 | justify-content: space-between; 326 | } 327 | 328 | /* Swiper Class */ 329 | .swiper-pagination{ 330 | position: initial; 331 | margin-top: var(--mb-1); 332 | } 333 | 334 | .swiper-pagination-bullet{ 335 | width: 5px; 336 | height: 5px; 337 | background-color: var(--title-color); 338 | opacity: 1; 339 | } 340 | 341 | .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ 342 | margin: 0 .5rem; 343 | } 344 | 345 | .swiper-pagination-bullet-active{ 346 | width: 1.5rem; 347 | height: 5px; 348 | border-radius: .5rem; 349 | } 350 | 351 | /*=============== BUTTONS ===============*/ 352 | .button{ 353 | display: inline-block; 354 | background-color: var(--first-color); 355 | color: var(--title-color); 356 | padding: 1rem 1.75rem; 357 | border-radius: .5rem; 358 | font-weight: var(--font-medium); 359 | transition: .3s; 360 | } 361 | 362 | .button:hover{ 363 | background-color: var(--first-color-alt); 364 | } 365 | 366 | .button__icon{ 367 | font-size: 1.25rem; 368 | } 369 | 370 | .button--ghost{ 371 | border: 2px solid; 372 | background-color: transparent; 373 | border-radius: 3rem; 374 | padding: .75rem 1.5rem; 375 | } 376 | 377 | .button--ghost:hover{ 378 | background: none; 379 | } 380 | 381 | .button--link{ 382 | color: var(--title-color); 383 | } 384 | 385 | .button--flex{ 386 | display: inline-flex; 387 | align-items: center; 388 | column-gap: .5rem; 389 | } 390 | 391 | /*=============== CATEGORY ===============*/ 392 | .category__container{ 393 | grid-template-columns: repeat(2, 1fr); 394 | gap: 1rem 2rem; 395 | } 396 | 397 | .category__data{ 398 | text-align: center; 399 | } 400 | 401 | .category__img{ 402 | width: 120px; 403 | margin-bottom: var(--mb-0-75); 404 | transition: .3s; 405 | } 406 | 407 | .category__title{ 408 | margin-bottom: var(--mb-0-25); 409 | } 410 | 411 | .category__data:hover .category__img{ 412 | transform: translateY(-.5rem); 413 | } 414 | 415 | /*=============== ABOUT ===============*/ 416 | .about__container{ 417 | row-gap: 2rem; 418 | } 419 | 420 | .about__data{ 421 | text-align: center; 422 | } 423 | 424 | .about__description{ 425 | margin-bottom: var(--mb-2); 426 | } 427 | 428 | .about__img{ 429 | width: 200px; 430 | justify-self: center; 431 | animation: floating 2s ease-in-out infinite; 432 | } 433 | 434 | /*=============== TRICK OR TREAT ===============*/ 435 | .trick__container{ 436 | grid-template-columns: repeat(2, 1fr); 437 | gap: 1.5rem; 438 | padding-top: 1rem; 439 | } 440 | 441 | .trick__content{ 442 | position: relative; 443 | background: var(--container-color); 444 | border-radius: 1rem; 445 | padding: 1.5rem 0 1rem 0; 446 | text-align: center; 447 | overflow: hidden; 448 | } 449 | 450 | .trick__img{ 451 | width: 90px; 452 | transition: .3s; 453 | } 454 | 455 | .trick__subtitle, 456 | .trick__price{ 457 | display: block; 458 | } 459 | 460 | .trick__subtitle{ 461 | font-size: var(--smaller-font-size); 462 | margin-bottom: var(--mb-0-5); 463 | } 464 | 465 | .trick__title, 466 | .trick__price{ 467 | color: var(--title-color); 468 | font-weight: var(--font-medium); 469 | font-size: var(--normal-font-size); 470 | } 471 | 472 | .trick__button{ 473 | display: inline-flex; 474 | padding: .5rem; 475 | border-radius: .25rem .25rem .75rem .25rem; 476 | position: absolute; 477 | right: -3rem; 478 | bottom: 0; 479 | } 480 | 481 | .trick__icon{ 482 | font-size: 1.25rem; 483 | color: var(--title-color); 484 | } 485 | 486 | .trick__content:hover .trick__img{ 487 | transform: translateY(-.5rem); 488 | } 489 | 490 | .trick__content:hover .trick__button{ 491 | right: 0; 492 | } 493 | 494 | /*=============== DISCOUNT ===============*/ 495 | .discount__container{ 496 | background: var(--container-color); 497 | border-radius: 1rem; 498 | padding: 2.5rem 0 1.5rem; 499 | row-gap: .75rem; 500 | } 501 | 502 | .discount__data{ 503 | text-align: center; 504 | } 505 | 506 | .discount__title{ 507 | font-size: var(--h2-font-size); 508 | margin-bottom: var(--mb-2); 509 | } 510 | 511 | .discount__img{ 512 | width: 200px; 513 | justify-self: center; 514 | } 515 | 516 | /*=============== NEW ARRIVALS ===============*/ 517 | .new__container{ 518 | padding-top: 1rem; 519 | } 520 | 521 | .new__img{ 522 | width: 120px; 523 | margin-bottom: var(--mb-0-5); 524 | transition: .3s; 525 | } 526 | 527 | .new__content{ 528 | position: relative; 529 | background: var(--container-color); 530 | width: 242px; 531 | padding: 2rem 0 1.5rem 0; 532 | border-radius: .75rem; 533 | text-align: center; 534 | overflow: hidden; 535 | } 536 | 537 | .new__tag{ 538 | position: absolute; 539 | top: 8%; 540 | left: 8%; 541 | background-color: var(--first-color); 542 | color: var(--title-color); 543 | font-size: var(--small-font-size); 544 | padding: .25rem .5rem; 545 | border-radius: .25rem; 546 | } 547 | 548 | .new__title{ 549 | font-size: var(--normal-font-size); 550 | font-weight: var(--font-medium); 551 | } 552 | 553 | .new__subtitle{ 554 | display: block; 555 | font-size: var(--small-font-size); 556 | margin-bottom: var(--mb-0-5); 557 | } 558 | 559 | .new__prices{ 560 | display: inline-flex; 561 | align-items: center; 562 | column-gap: .5rem; 563 | } 564 | 565 | .new__price{ 566 | font-weight: var(--font-medium); 567 | color: var(--title-color); 568 | } 569 | 570 | .new__discount{ 571 | color: var(--first-color); 572 | font-size: var(--smaller-font-size); 573 | text-decoration: line-through; 574 | font-weight: var(--font-medium); 575 | } 576 | 577 | .new__button{ 578 | display: inline-flex; 579 | padding: .5rem; 580 | border-radius: .25rem .25rem .75rem .25rem; 581 | position: absolute; 582 | bottom: 0; 583 | right: -3rem; 584 | } 585 | 586 | .new__icon{ 587 | font-size: 1.25rem; 588 | } 589 | 590 | .new__content:hover .new__img{ 591 | transform: translateY(-.5rem); 592 | } 593 | 594 | .new__content:hover .new__button{ 595 | right: 0; 596 | } 597 | 598 | /*=============== NEWSLETTER ===============*/ 599 | .newsletter__description{ 600 | text-align: center; 601 | margin-bottom: var(--mb-1-5); 602 | } 603 | 604 | .newsletter__form{ 605 | background: var(--container-color); 606 | padding: 1rem; 607 | display: flex; 608 | justify-content: space-between; 609 | border-radius: .75rem; 610 | } 611 | 612 | .newsletter__input{ 613 | width: 70%; 614 | padding: 0 .5rem; 615 | background: none; 616 | color: var(--title-color); 617 | } 618 | 619 | .newsletter__input::placeholder{ 620 | color: var(--text-color); 621 | } 622 | 623 | /*=============== FOOTER ===============*/ 624 | .footer{ 625 | position: relative; 626 | overflow: hidden; 627 | } 628 | 629 | .footer__img-one, 630 | .footer__img-two{ 631 | position: absolute; 632 | transition: .3s; 633 | } 634 | 635 | .footer__img-one{ 636 | width: 100px; 637 | top: 6rem; 638 | right: -2rem; 639 | } 640 | 641 | .footer__img-two{ 642 | width: 150px; 643 | bottom: 4rem; 644 | right: 4rem; 645 | } 646 | 647 | .footer__img-one:hover, 648 | .footer__img-two:hover{ 649 | transform: translateY(-.5rem); 650 | } 651 | 652 | .footer__container{ 653 | row-gap: 2rem; 654 | } 655 | 656 | .footer__logo{ 657 | display: flex; 658 | align-items: center; 659 | column-gap: .5rem; 660 | margin-bottom: var(--mb-1); 661 | font-weight: var(--font-medium); 662 | color: var(--title-color); 663 | } 664 | 665 | .footer__logo-img{ 666 | width: 20px; 667 | } 668 | 669 | .footer__description{ 670 | margin-bottom: var(--mb-2-5); 671 | } 672 | 673 | .footer__social{ 674 | display: flex; 675 | column-gap: .75rem; 676 | } 677 | 678 | .footer__social-link{ 679 | display: inline-flex; 680 | background: var(--container-color); 681 | padding: .25rem; 682 | border-radius: .25rem; 683 | color: var(--title-color); 684 | font-size: 1rem; 685 | } 686 | 687 | .footer__social-link:hover{ 688 | background: var(--body-color); 689 | } 690 | 691 | .footer__title{ 692 | font-size: var(--h3-font-size); 693 | margin-bottom: var(--mb-1); 694 | } 695 | 696 | .footer__links{ 697 | display: grid; 698 | row-gap: .35rem; 699 | } 700 | 701 | .footer__link{ 702 | font-size: var(--small-font-size); 703 | color: var(--text-color); 704 | transition: .3s; 705 | } 706 | 707 | .footer__link:hover{ 708 | color: var(--title-color); 709 | } 710 | 711 | .footer__copy{ 712 | display: block; 713 | text-align: center; 714 | font-size: var(--smaller-font-size); 715 | margin-top: 4.5rem; 716 | } 717 | 718 | /*=============== SCROLL UP ===============*/ 719 | .scrollup{ 720 | position: fixed; 721 | background: var(--container-color); 722 | right: 1rem; 723 | bottom: -20%; 724 | display: inline-flex; 725 | padding: .3rem; 726 | border-radius: .25rem; 727 | z-index: var(--z-tooltip); 728 | opacity: .8; 729 | transition: .4s; 730 | } 731 | 732 | .scrollup__icon{ 733 | font-size: 1.25rem; 734 | color: var(--title-color); 735 | } 736 | 737 | .scrollup:hover{ 738 | background: var(--container-color); 739 | opacity: 1; 740 | } 741 | 742 | /* Show Scroll Up*/ 743 | .show-scroll{ 744 | bottom: 3rem; 745 | } 746 | 747 | /*=============== SCROLL BAR ===============*/ 748 | ::-webkit-scrollbar{ 749 | width: 0.6rem; 750 | background: #413e3e; 751 | } 752 | 753 | ::-webkit-scrollbar-thumb{ 754 | background: #272525; 755 | border-radius: .5rem; 756 | } 757 | 758 | /*=============== BREAKPOINTS ===============*/ 759 | /* For small devices */ 760 | @media screen and (max-width: 320px){ 761 | .container{ 762 | margin-left: var(--mb-1); 763 | margin-right: var(--mb-1); 764 | } 765 | 766 | .home__img{ 767 | height: 200px; 768 | } 769 | .home__buttons{ 770 | flex-direction: column; 771 | width: max-content; 772 | row-gap: 1rem; 773 | } 774 | 775 | .category__container, 776 | .trick__container{ 777 | grid-template-columns: .8fr; 778 | justify-content: center; 779 | } 780 | } 781 | 782 | /* For medium devices */ 783 | @media screen and (min-width: 576px){ 784 | .about__container{ 785 | grid-template-columns: .8fr; 786 | justify-content: center; 787 | } 788 | 789 | .newsletter__container{ 790 | display: grid; 791 | grid-template-columns: .7fr; 792 | justify-content: center; 793 | } 794 | .newsletter__description{ 795 | padding: 0 3rem; 796 | } 797 | } 798 | 799 | @media screen and (min-width: 767px){ 800 | body{ 801 | margin: 0; 802 | } 803 | 804 | .section{ 805 | padding: 7rem 0 2rem; 806 | } 807 | 808 | .nav{ 809 | height: calc(var(--header-height) + 1.5rem); 810 | } 811 | .nav__img, 812 | .nav__close, 813 | .nav__toggle{ 814 | display: none; 815 | } 816 | .nav__list{ 817 | flex-direction: row; 818 | column-gap: 3rem; 819 | } 820 | .nav__link{ 821 | text-transform: initial; 822 | font-weight: initial; 823 | } 824 | 825 | .home__content{ 826 | padding: 8rem 0 2rem; 827 | grid-template-columns: repeat(2, 1fr); 828 | gap: 4rem; 829 | } 830 | .home__img{ 831 | height: 300px; 832 | } 833 | .swiper-pagination{ 834 | margin-top: var(--mb-2); 835 | } 836 | 837 | .category__container{ 838 | grid-template-columns: repeat(3, 200px); 839 | justify-content: center; 840 | } 841 | 842 | .about__container{ 843 | grid-template-columns: repeat(2, 1fr); 844 | align-items: center; 845 | } 846 | .about__title, 847 | .about__data{ 848 | text-align: initial; 849 | } 850 | .about__img{ 851 | width: 250px; 852 | } 853 | 854 | .trick__container{ 855 | grid-template-columns: repeat(3, 200px); 856 | justify-content: center; 857 | gap: 2rem; 858 | } 859 | 860 | .discount__container{ 861 | grid-template-columns: repeat(2, max-content); 862 | justify-content: center; 863 | align-items: center; 864 | column-gap: 3rem; 865 | padding: 3rem 0; 866 | border-radius: 3rem; 867 | } 868 | .discount__img{ 869 | width: 350px; 870 | order: -1; 871 | } 872 | .discount__data{ 873 | padding-right: 6rem; 874 | } 875 | 876 | .newsletter__container{ 877 | grid-template-columns: .5fr; 878 | } 879 | 880 | .footer__container{ 881 | grid-template-columns: repeat(4, 1fr); 882 | justify-items: center; 883 | column-gap: 1rem; 884 | } 885 | .footer__img-two{ 886 | right: initial; 887 | bottom: 0; 888 | left: 15%; 889 | } 890 | } 891 | 892 | /* For large devices */ 893 | @media screen and (min-width: 992px){ 894 | .container{ 895 | margin-left: auto; 896 | margin-right: auto; 897 | } 898 | 899 | .section__title{ 900 | font-size: var(--h1-font-size); 901 | margin-bottom: 3rem; 902 | } 903 | 904 | .home__content{ 905 | padding-top: 9rem; 906 | gap: 3rem; 907 | } 908 | .home__group{ 909 | padding-top: 0; 910 | } 911 | .home__img{ 912 | height: 400px; 913 | transform: translateY(-3rem); 914 | } 915 | .home__indicator{ 916 | top: initial; 917 | right: initial; 918 | bottom: 15%; 919 | left: 45%; 920 | } 921 | .home__indicator::after{ 922 | top: 0; 923 | height: 75px; 924 | } 925 | .home__details-img{ 926 | bottom: 0; 927 | right: 58%; 928 | } 929 | .home__title{ 930 | margin-bottom: var(--mb-1-5); 931 | } 932 | .home__description{ 933 | margin-bottom: var(--mb-2-5); 934 | padding-right: 2rem; 935 | } 936 | 937 | .category__container{ 938 | column-gap: 8rem; 939 | } 940 | .category__img{ 941 | width: 200px; 942 | } 943 | 944 | .about__container{ 945 | column-gap: 7rem; 946 | } 947 | .about__img{ 948 | width: 350px; 949 | } 950 | .about__description{ 951 | padding-right: 2rem; 952 | } 953 | 954 | .trick__container{ 955 | gap: 3.5rem; 956 | } 957 | .trick__content{ 958 | border-radius: 1.5rem; 959 | } 960 | .trick__img{ 961 | width: 110px; 962 | } 963 | .trick__title{ 964 | font-size: var(--h3-font-size); 965 | } 966 | 967 | .discount__container{ 968 | column-gap: 7rem; 969 | } 970 | 971 | .new__content{ 972 | width: 310px; 973 | border-radius: 1rem; 974 | padding: 2rem 0; 975 | } 976 | .new__img{ 977 | width: 150px; 978 | } 979 | .new__img, 980 | .new__subtitle{ 981 | margin-bottom: var(--mb-1); 982 | } 983 | .new__title{ 984 | font-size: var(--h3-font-size); 985 | } 986 | 987 | .footer__copy{ 988 | margin-top: 6rem; 989 | } 990 | } 991 | 992 | @media screen and (min-width: 1200px){ 993 | .home__img{ 994 | height: 420px; 995 | } 996 | .swiper-pagination{ 997 | margin-top: var(--mb-2-5); 998 | } 999 | .footer__img-one{ 1000 | width: 120px; 1001 | } 1002 | .footer__img-two{ 1003 | width: 180px; 1004 | top: 30%; 1005 | left: -3%; 1006 | } 1007 | } 1008 | 1009 | /*=============== KEYFRAMES ===============*/ 1010 | @keyframes floating { 1011 | 0% { transform: translate(0, 0px); } 1012 | 50% { transform: translate(0, 15px); } 1013 | 100% { transform: translate(0, -0px); } 1014 | } 1015 | -------------------------------------------------------------------------------- /assets/css/swiper-bundle.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 7.0.6 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * https://swiperjs.com 5 | * 6 | * Copyright 2014-2021 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: September 16, 2021 11 | */ 12 | 13 | @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} -------------------------------------------------------------------------------- /assets/img/about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/about-img.png -------------------------------------------------------------------------------- /assets/img/category1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/category1-img.png -------------------------------------------------------------------------------- /assets/img/category2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/category2-img.png -------------------------------------------------------------------------------- /assets/img/category3-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/category3-img.png -------------------------------------------------------------------------------- /assets/img/discount-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/discount-img.png -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/footer1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/footer1-img.png -------------------------------------------------------------------------------- /assets/img/footer2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/footer2-img.png -------------------------------------------------------------------------------- /assets/img/home1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/home1-img.png -------------------------------------------------------------------------------- /assets/img/home2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/home2-img.png -------------------------------------------------------------------------------- /assets/img/home3-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/home3-img.png -------------------------------------------------------------------------------- /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/nav-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/nav-img.png -------------------------------------------------------------------------------- /assets/img/new1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new1-img.png -------------------------------------------------------------------------------- /assets/img/new2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new2-img.png -------------------------------------------------------------------------------- /assets/img/new3-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new3-img.png -------------------------------------------------------------------------------- /assets/img/new4-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new4-img.png -------------------------------------------------------------------------------- /assets/img/new5-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new5-img.png -------------------------------------------------------------------------------- /assets/img/new6-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/new6-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat1-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat1-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat2-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat3-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat3-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat4-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat4-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat5-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat5-img.png -------------------------------------------------------------------------------- /assets/img/trick-treat6-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/assets/img/trick-treat6-img.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW MENU ===============*/ 2 | const navMenu = document.getElementById('nav-menu'), 3 | navToggle = document.getElementById('nav-toggle'), 4 | navClose = document.getElementById('nav-close') 5 | 6 | /*===== MENU SHOW =====*/ 7 | /* Validate if constant exists */ 8 | if(navToggle){ 9 | navToggle.addEventListener('click', () =>{ 10 | navMenu.classList.add('show-menu') 11 | }) 12 | } 13 | 14 | /*===== MENU HIDDEN =====*/ 15 | /* Validate if constant exists */ 16 | if(navClose){ 17 | navClose.addEventListener('click', () =>{ 18 | navMenu.classList.remove('show-menu') 19 | }) 20 | } 21 | 22 | /*=============== REMOVE MENU MOBILE ===============*/ 23 | const navLink = document.querySelectorAll('.nav__link') 24 | 25 | function linkAction(){ 26 | const navMenu = document.getElementById('nav-menu') 27 | // When we click on each nav__link, we remove the show-menu class 28 | navMenu.classList.remove('show-menu') 29 | } 30 | navLink.forEach(n => n.addEventListener('click', linkAction)) 31 | 32 | /*=============== HOME SWIPER ===============*/ 33 | let homeSwiper = new Swiper(".home-swiper", { 34 | spaceBetween: 30, 35 | loop: 'true', 36 | 37 | pagination: { 38 | el: ".swiper-pagination", 39 | clickable: true, 40 | }, 41 | }) 42 | 43 | /*=============== CHANGE BACKGROUND HEADER ===============*/ 44 | function scrollHeader(){ 45 | const header = document.getElementById('header') 46 | // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag 47 | if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') 48 | } 49 | window.addEventListener('scroll', scrollHeader) 50 | 51 | /*=============== NEW SWIPER ===============*/ 52 | let newSwiper = new Swiper(".new-swiper", { 53 | centeredSlides: true, 54 | slidesPerView: "auto", 55 | loop: 'true', 56 | spaceBetween: 16, 57 | }); 58 | 59 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 60 | const sections = document.querySelectorAll('section[id]') 61 | 62 | function scrollActive(){ 63 | const scrollY = window.pageYOffset 64 | 65 | sections.forEach(current =>{ 66 | const sectionHeight = current.offsetHeight, 67 | sectionTop = current.offsetTop - 58, 68 | sectionId = current.getAttribute('id') 69 | 70 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 71 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 72 | }else{ 73 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 74 | } 75 | }) 76 | } 77 | window.addEventListener('scroll', scrollActive) 78 | 79 | /*=============== SHOW SCROLL UP ===============*/ 80 | function scrollUp(){ 81 | const scrollUp = document.getElementById('scroll-up'); 82 | // When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class 83 | if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') 84 | } 85 | window.addEventListener('scroll', scrollUp) 86 | 87 | /*=============== SCROLL REVEAL ANIMATION ===============*/ 88 | const sr = ScrollReveal({ 89 | origin: 'top', 90 | distance: '60px', 91 | duration: 2500, 92 | delay: 400, 93 | // reset: true 94 | }) 95 | 96 | sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`) 97 | sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100}) 98 | sr.reveal(`.about__data, .discount__img`,{origin: 'left'}) 99 | sr.reveal(`.about__img, .discount__data`,{origin: 'right'}) 100 | -------------------------------------------------------------------------------- /assets/js/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.9 2 | 3 | Copyright 2021 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Responsive Halloween Website 20 | 21 | 22 | 23 | 64 | 65 |
66 | 67 |
68 |
69 |
70 | 71 |
72 |
73 |
74 | 75 |
76 | 77 |
78 |

The Labu “Reiza”

79 | The Living Pumpkin 80 |
81 |
82 | 83 |
84 |

#1 Top Scariest Ghost

85 |

UOOOO
TRICK OR
TREAT!!

86 |

Hi, I'm Reiza, people call me "El Labu". I am currently trying to learn 87 | something new, building my own bike with parts made only in Malaysia. 88 |

89 | 90 |
91 | Book Now 92 | Track Record 93 |
94 |
95 |
96 |
97 | 98 | 99 |
100 |
101 |
102 | 103 |
104 | 105 |
106 |

Adino & Grahami

107 | No words can describe them 108 |
109 |
110 | 111 |
112 |

#2 top Best duo

113 |

BRING BACK
MY COTTON
CANDY

114 |

Adino steals cotton candy from his brother and eats them all in one bite, 115 | a hungry beast. Grahami can no longer contain his anger towards Adino. 116 |

117 | 118 |
119 | Book Now 120 | Track Record 121 |
122 |
123 |
124 |
125 | 126 | 127 |
128 |
129 |
130 | 131 |
132 | 133 |
134 |

Captain Sem

135 | Veteran Spooky Ghost 136 |
137 |
138 | 139 |
140 |

#3 Top Scariest Ghost

141 |

RESPAWN
THE SPOOKY
SKULL

142 |

In search for cute little puppy, Captain Sem has come back from his tragic death. 143 | With his hogwarts certified power he promise to be a hero for all of ghostkind. 144 |

145 | 146 |
147 | Book Now 148 | Track Record 149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | 158 | 159 |
160 |

Favorite Scare
Category

161 | 162 |
163 |
164 | 165 |

Ghosts

166 |

Choose the ghosts, the scariest there are.

167 |
168 | 169 |
170 | 171 |

Pumpkins

172 |

You look at the scariest pumpkins there is.

173 |
174 | 175 |
176 | 177 |

Witch Hat

178 |

Pick the most stylish witch hats out there.

179 |
180 |
181 |
182 | 183 | 184 |
185 |
186 |
187 |

About Halloween
Night

188 |

Night of all the saints, or all the dead, is celebrated on October 31 and it is a 189 | very fun international celebration, this celebration comes from ancient origins, and is already 190 | celebrated by everyone. 191 |

192 | Know more 193 |
194 | 195 | 196 |
197 |
198 | 199 | 200 |
201 |

Trick Or Treat

202 | 203 |
204 |
205 | 206 |

Toffee

207 | Candy 208 | $11.99 209 | 212 |
213 | 214 |
215 | 216 |

Bone

217 | Accessory 218 | $8.99 219 | 222 |
223 | 224 |
225 | 226 |

Scarecrow

227 | Accessory 228 | $15.99 229 | 232 |
233 | 234 |
235 | 236 |

Candy Cane

237 | Candy 238 | $7.99 239 | 242 |
243 | 244 |
245 | 246 |

Pumpkin

247 | Candy 248 | $19.99 249 | 252 |
253 | 254 |
255 | 256 |

Ghost

257 | Accessory 258 | $17.99 259 | 262 |
263 |
264 |
265 | 266 | 267 |
268 |
269 |
270 |

50% Discount
On New Products

271 | Go to new 272 |
273 | 274 | 275 |
276 |
277 | 278 | 279 |
280 |

New Arrivals

281 | 282 |
283 |
284 |
285 |
286 |
New
287 | 288 |

Haunted House

289 | Accessory 290 | 291 |
292 | $14.99 293 | $29.99 294 |
295 | 296 | 299 |
300 | 301 |
302 |
New
303 | 304 |

Halloween Candle

305 | Accessory 306 | 307 |
308 | $11.99 309 | $21.99 310 |
311 | 312 | 315 |
316 | 317 |
318 |
New
319 | 320 |

Witch Hat

321 | Accessory 322 | 323 |
324 | $4.99 325 | $9.99 326 |
327 | 328 | 331 |
332 | 333 |
334 |
New
335 | 336 |

Rip

337 | Accessory 338 | 339 |
340 | $24.99 341 | $44.99 342 |
343 | 344 | 347 |
348 | 349 |
350 |
New
351 | 352 |

Terrifying Crystal Ball

353 | Accessory 354 | 355 |
356 | $5.99 357 | $12.99 358 |
359 | 360 | 363 |
364 | 365 |
366 |
New
367 | 368 |

Witch Broom

369 | Accessory 370 | 371 |
372 | $7.99 373 | $14.99 374 |
375 | 376 | 379 |
380 |
381 |
382 |
383 |
384 | 385 | 386 | 401 |
402 | 403 | 404 | 481 | 482 | 483 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softdev050/responsive-magni/c6512e5c2e924d352aab90dd90a9395e41752f18/preview.png --------------------------------------------------------------------------------