├── index.html ├── styles.css └── main.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Responsive Crypto Website 11 | 12 | 13 | 14 | 15 | 55 | 56 |
57 | 58 |
59 |
60 | 61 | 62 |
63 |

Discover the world of cryptos in just a few minutes

64 |

Sign up today and buy over 50 cryptocurrencies in 65 | a few minutes. Start with as little as $10.

66 | Register 67 |
68 |
69 |
70 | 71 | 72 |
73 |

74 | Discover crypto market trends 75 |

76 | 77 |
78 |
79 | 81 |

Bitcoin

82 |

They are the best after Codecoin.

83 |
84 | 85 |
86 | 88 |

Lithcoint

89 |

Give a chance.

90 |
s 91 | 92 |
93 | 94 | 95 | ethereum--v4 96 | 97 |

Codecoin

98 |

Of course, the best cryptocurrency coin of all 99 | time.

100 |
101 |
102 |
103 | 104 | 105 |
106 |
107 |
108 |

109 | You are new
on Umar's Crypto? 110 |

111 |

112 | No problem. We make buying and selling cryptocurrencies safe and secure. 113 | simple. 114 |

115 | Buy 116 |
117 | 118 | 120 |
121 |
122 | 123 | 124 |
125 |

Bought a cryptocurrency

126 | 127 |
128 |
129 | 131 | 132 | 133 |

$150

134 | Linger 135 | Buy Now 136 |
137 | 138 |
139 | 141 | 142 | 143 |

$220

144 | Lith 145 | Buy Now 146 |
147 | 148 |
149 | 151 | 152 | 153 |

$480.000

154 | Notcoin 155 | Buy Now 156 |
157 | 158 |
159 | 160 | ethereum--v4 161 | 162 | 163 | 164 |

$1.000.000

165 | Umar's 166 | Buy Now 167 |
168 | 169 |
170 | 172 | 173 | 174 |

$12

175 | Pawn 176 | Buy Now 177 |
178 |
179 |
180 | 181 | 182 | 183 |
184 |
185 |
186 |

Receive up to $4,000
reward for each friend
that you 187 | sponsor on Umar's Crypto!

188 | 189 | 190 |
191 |
192 |
193 |
194 | 195 | 196 | 257 | 258 | 261 | 262 | 263 | 264 | 265 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --first-color-alt: #200f45; 11 | --first-color: #703de1; 12 | --title-color: hsl(355, 4%, 15%); 13 | --text-color: hsl(355, 4%, 35%); 14 | --text-color-light: hsl(355, 4%, 55%); 15 | --body-color: #fff; 16 | --container-color: #fff; 17 | 18 | /*========== Font and typography ==========*/ 19 | /*.5rem = 8px | 1rem = 16px ...*/ 20 | --body-font: 'Poppins', sans-serif; 21 | 22 | --biggest-font-size: 1.5rem; 23 | --h1-font-size: 1.5rem; 24 | --h2-font-size: 1.25rem; 25 | --h3-font-size: 1rem; 26 | --normal-font-size: .938rem; 27 | --small-font-size: .813rem; 28 | --smaller-font-size: .75rem; 29 | 30 | /*========== Font weight ==========*/ 31 | --font-medium: 500; 32 | --font-semi-bold: 600; 33 | 34 | /*========== Margenes Bottom ==========*/ 35 | /*.5rem = 8px | 1rem = 16px ...*/ 36 | --mb-0-25: .25rem; 37 | --mb-0-5: .5rem; 38 | --mb-1: 1rem; 39 | --mb-1-5: 1.5rem; 40 | --mb-2: 2rem; 41 | --mb-2-5: 2.5rem; 42 | 43 | /*========== z index ==========*/ 44 | --z-tooltip: 10; 45 | --z-fixed: 100; 46 | } 47 | 48 | /* Responsive typography */ 49 | @media screen and (min-width: 968px) { 50 | :root { 51 | --biggest-font-size: 2.5rem; 52 | --h1-font-size: 2.25rem; 53 | --h2-font-size: 1.5rem; 54 | --h3-font-size: 1.25rem; 55 | --normal-font-size: 1rem; 56 | --small-font-size: .875rem; 57 | --smaller-font-size: .813rem; 58 | } 59 | } 60 | 61 | /*=============== BASE ===============*/ 62 | * { 63 | box-sizing: border-box; 64 | padding: 0; 65 | margin: 0; 66 | } 67 | 68 | html { 69 | scroll-behavior: smooth; 70 | } 71 | 72 | body, 73 | button, 74 | input { 75 | font-family: var(--body-font); 76 | font-size: var(--normal-font-size); 77 | } 78 | 79 | body { 80 | margin: var(--header-height) 0 0 0; 81 | background-color: var(--body-color); 82 | color: var(--text-color); 83 | transition: .4s; 84 | /*For animation dark mode*/ 85 | } 86 | 87 | h1, 88 | h2, 89 | h3, 90 | h4 { 91 | color: var(--title-color); 92 | font-weight: var(--font-semi-bold); 93 | } 94 | 95 | ul { 96 | list-style: none; 97 | } 98 | 99 | a { 100 | text-decoration: none; 101 | } 102 | 103 | img { 104 | max-width: 100%; 105 | height: auto; 106 | } 107 | 108 | button { 109 | cursor: pointer; 110 | border: none; 111 | outline: none; 112 | } 113 | 114 | /*=============== THEME ===============*/ 115 | .nav__btns { 116 | display: flex; 117 | align-items: center; 118 | column-gap: 1rem; 119 | } 120 | 121 | .change-theme { 122 | color: var(--title-color); 123 | font-size: 1.25rem; 124 | cursor: pointer; 125 | } 126 | 127 | /*========== Variables Dark theme ==========*/ 128 | body.dark-theme { 129 | --title-color: hsl(355, 4%, 95%); 130 | --text-color: hsl(355, 4%, 75%); 131 | --body-color: hsl(355, 20%, 12%); 132 | --container-color: hsl(355, 16%, 16%); 133 | } 134 | 135 | /*========== 136 | Color changes in some parts of 137 | the website, in dark theme 138 | ==========*/ 139 | .dark-theme .scroll-header, 140 | .dark-theme .nav__menu { 141 | box-shadow: 0 2px 4px hsla(0, 0%, 4%, .3); 142 | } 143 | 144 | .dark-theme .message__container { 145 | background-color: var(--container-color); 146 | } 147 | 148 | .dark-theme .message__input { 149 | background-color: var(--body-color); 150 | } 151 | 152 | .dark-theme .message__button { 153 | background-color: var(--first-color); 154 | } 155 | 156 | .dark-theme .message__button:hover { 157 | background-color: var(--first-color-alt); 158 | } 159 | 160 | .dark-theme::-webkit-scrollbar { 161 | background: hsl(355, 8%, 30%); 162 | } 163 | 164 | /*=============== REUSABLE CSS CLASSES ===============*/ 165 | .container { 166 | max-width: 968px; 167 | margin-left: var(--mb-1-5); 168 | margin-right: var(--mb-1-5); 169 | } 170 | 171 | .grid { 172 | display: grid; 173 | } 174 | 175 | .main { 176 | overflow: hidden; 177 | } 178 | 179 | .section { 180 | padding: 4.5rem 0 1rem; 181 | } 182 | 183 | .section__title { 184 | font-size: var(--h2-font-size); 185 | margin-bottom: var(--mb-2-5); 186 | text-align: center; 187 | } 188 | 189 | /*=============== HEADER ===============*/ 190 | .header { 191 | width: 100%; 192 | background-color: var(--body-color); 193 | position: fixed; 194 | top: 0; 195 | left: 0; 196 | z-index: var(--z-fixed); 197 | transition: .4s; 198 | /*For animation dark mode*/ 199 | } 200 | 201 | /*=============== NAV ===============*/ 202 | .nav { 203 | height: var(--header-height); 204 | display: flex; 205 | justify-content: space-between; 206 | align-items: center; 207 | } 208 | 209 | .nav__logo, 210 | .nav__close, 211 | .nav__toggle { 212 | color: var(--title-color); 213 | } 214 | 215 | .nav__logo { 216 | display: flex; 217 | align-items: center; 218 | column-gap: .25rem; 219 | font-weight: var(--font-medium); 220 | } 221 | 222 | .nav__logo-img { 223 | width: 1.5rem; 224 | } 225 | 226 | .nav__toggle { 227 | display: inline-flex; 228 | font-size: 1.25rem; 229 | cursor: pointer; 230 | } 231 | 232 | @media screen and (max-width: 767px) { 233 | .nav__menu { 234 | position: fixed; 235 | background-color: var(--body-color); 236 | top: -100%; 237 | left: 0; 238 | width: 100%; 239 | padding: 4rem 0; 240 | border-radius: 0 0 1.5rem 1.5rem; 241 | box-shadow: 0 1px 4px hsla(0, 4%, 15%, .1); 242 | transition: .4s; 243 | } 244 | } 245 | 246 | .nav__img { 247 | width: 100px; 248 | position: absolute; 249 | top: 0; 250 | left: 0; 251 | transform: rotate(-15deg); 252 | } 253 | 254 | .nav__list { 255 | display: flex; 256 | flex-direction: column; 257 | align-items: center; 258 | row-gap: 1.5rem; 259 | } 260 | 261 | .nav__link { 262 | color: var(--title-color); 263 | font-weight: var(--font-medium); 264 | transition: .3s; 265 | } 266 | 267 | .nav__link:hover { 268 | color: var(--first-color); 269 | } 270 | 271 | .nav__close { 272 | font-size: 2rem; 273 | position: absolute; 274 | top: .5rem; 275 | right: 1rem; 276 | cursor: pointer; 277 | } 278 | 279 | /* Show menu */ 280 | .show-menu { 281 | top: 0; 282 | } 283 | 284 | /* Change background header */ 285 | .scroll-header { 286 | box-shadow: 0 1px 4px hsla(0, 4%, 15%, .1); 287 | } 288 | 289 | /* Active link */ 290 | .active-link { 291 | color: var(--first-color); 292 | } 293 | 294 | /*=============== HOME ===============*/ 295 | .home__container { 296 | padding-top: 1.5rem; 297 | row-gap: 1.5rem; 298 | } 299 | 300 | .home__img { 301 | width: 320px; 302 | justify-self: center; 303 | } 304 | 305 | .home__data { 306 | text-align: center; 307 | } 308 | 309 | .home__title { 310 | font-size: var(--biggest-font-size); 311 | line-height: 140%; 312 | margin-bottom: var(--mb-0-5); 313 | } 314 | 315 | .home__description { 316 | font-size: var(--small-font-size); 317 | padding: 0 2rem; 318 | margin-bottom: var(--mb-2-5); 319 | } 320 | 321 | /*=============== BUTTONS ===============*/ 322 | .button { 323 | display: inline-block; 324 | background-color: var(--first-color); 325 | color: #fff; 326 | padding: 1.15rem 2.75rem; 327 | font-weight: var(--font-medium); 328 | border-radius: 3rem; 329 | transition: .3s; 330 | } 331 | 332 | .button:hover { 333 | background-color: var(--first-color-alt); 334 | } 335 | 336 | .button1 { 337 | display: inline-block; 338 | background-color: var(--first-color); 339 | color: #fff; 340 | padding: 1rem 2.20rem; 341 | margin-top: 0.6rem; 342 | font-weight: var(--font-medium); 343 | border-radius: 4rem; 344 | transition: .3s; 345 | text-align: center; 346 | } 347 | 348 | .button1:hover { 349 | background-color: var(--first-color-alt); 350 | } 351 | 352 | /*=============== GIVING ===============*/ 353 | .giving__container { 354 | grid-template-columns: repeat(2, 1fr); 355 | gap: 2.5rem 1.5rem; 356 | } 357 | 358 | .giving__content { 359 | text-align: center; 360 | } 361 | 362 | .giving__img { 363 | width: 100px; 364 | transition: .3s; 365 | } 366 | 367 | .giving__title { 368 | font-size: var(--h3-font-size); 369 | margin-bottom: var(--mb-0-25); 370 | } 371 | 372 | .giving__description { 373 | font-size: var(--small-font-size); 374 | } 375 | 376 | .giving__img:hover { 377 | transform: translateY(-.25rem); 378 | } 379 | 380 | /*=============== CELEBRATE ===============*/ 381 | .celebrate__container { 382 | row-gap: 1rem; 383 | } 384 | 385 | .celebrate__data { 386 | text-align: center; 387 | } 388 | 389 | .celebrate__title { 390 | margin-bottom: var(--mb-1-5); 391 | } 392 | 393 | .celebrate__description { 394 | margin-bottom: var(--mb-2-5); 395 | } 396 | 397 | .celebrate__img { 398 | width: 280px; 399 | justify-self: center; 400 | } 401 | 402 | /*=============== GIFT ===============*/ 403 | .gift__container { 404 | grid-template-columns: repeat(2, 1fr); 405 | gap: 1.5rem; 406 | } 407 | 408 | .gift__card { 409 | display: grid; 410 | position: relative; 411 | background-color: var(--container-color); 412 | box-shadow: 0 4px 16px hsla(355, 25%, 15%, .1); 413 | padding: 1.5rem 1rem 1rem; 414 | border-radius: .75rem; 415 | } 416 | 417 | .gift__img { 418 | width: 100px; 419 | justify-self: center; 420 | margin-bottom: var(--mb-0-25); 421 | transition: .3s; 422 | } 423 | 424 | .gift__icon { 425 | font-size: 1.25rem; 426 | color: var(--first-color); 427 | position: absolute; 428 | top: 1rem; 429 | right: 1rem; 430 | cursor: pointer; 431 | } 432 | 433 | .gift__price { 434 | font-size: var(--h3-font-size); 435 | } 436 | 437 | .gift__title { 438 | font-size: var(--smaller-font-size); 439 | font-weight: var(--font-medium); 440 | } 441 | 442 | .gift__card:hover .gift__img { 443 | transform: translateY(-.25rem); 444 | } 445 | 446 | /*=============== NEW ===============*/ 447 | .new__card { 448 | position: relative; 449 | width: 230px; 450 | background-color: var(--container-color); 451 | box-shadow: 0 4px 16px hsla(355, 25%, 15%, .1); 452 | padding: 1rem 1rem 1.5rem; 453 | border-radius: .75rem; 454 | text-align: center; 455 | margin-bottom: 4rem; 456 | overflow: hidden; 457 | } 458 | 459 | .new__overlay { 460 | width: 250px; 461 | height: 250px; 462 | background-color: var(--first-color); 463 | border-radius: 50%; 464 | position: absolute; 465 | top: -5rem; 466 | left: -.65rem; 467 | z-index: 0; 468 | } 469 | 470 | .new__img { 471 | position: relative; 472 | width: 150px; 473 | margin-bottom: var(--mb-2); 474 | transition: .3s; 475 | } 476 | 477 | .new__price { 478 | font-size: var(--h2-font-size); 479 | } 480 | 481 | .new__title { 482 | font-weight: var(--font-medium); 483 | } 484 | 485 | .new__button { 486 | display: flex; 487 | padding: .5rem; 488 | border-radius: .25rem .25rem .75rem .25rem; 489 | position: absolute; 490 | right: 0; 491 | bottom: 0; 492 | } 493 | 494 | .new__icon { 495 | font-size: 1.25rem; 496 | } 497 | 498 | .new__card:hover .new__img { 499 | transform: translateY(-.5rem); 500 | } 501 | 502 | /*Class Swiper*/ 503 | .swiper-pagination-bullet { 504 | background-color: var(--text-color); 505 | } 506 | 507 | .swiper-pagination-bullet-active { 508 | background-color: var(--first-color); 509 | } 510 | 511 | /*=============== MESSAGE ===============*/ 512 | .message__container { 513 | row-gap: 3rem; 514 | background-color: var(--first-color); 515 | padding: 2.5rem 1.5rem 2.5rem; 516 | border-radius: 1.25rem; 517 | } 518 | 519 | .message__form { 520 | text-align: center; 521 | } 522 | 523 | .message__title { 524 | color: #fff; 525 | 526 | margin-bottom: var(--mb-1-5); 527 | } 528 | 529 | .message__input { 530 | width: 100%; 531 | background: #fff; 532 | color: var(--text-color); 533 | padding: 1rem 1.5rem; 534 | border-radius: 3rem; 535 | border: none; 536 | outline: none; 537 | margin-bottom: var(--mb-1); 538 | 539 | } 540 | 541 | .message__button { 542 | background-color: var(--title-color); 543 | width: 100%; 544 | 545 | } 546 | 547 | .message__button:hover { 548 | background-color: var(--title-color); 549 | } 550 | 551 | 552 | 553 | /*=============== FOOTER ===============*/ 554 | .footer { 555 | overflow: hidden; 556 | } 557 | 558 | .footer__container { 559 | position: relative; 560 | row-gap: 2rem; 561 | } 562 | 563 | .footer__logo { 564 | display: flex; 565 | align-items: center; 566 | column-gap: .25rem; 567 | color: var(--title-color); 568 | font-weight: var(--font-medium); 569 | } 570 | 571 | .footer__logo-img { 572 | width: 1.5rem; 573 | } 574 | 575 | .footer__description { 576 | font-size: var(--small-font-size); 577 | } 578 | 579 | .footer__logo, 580 | .footer__title { 581 | margin-bottom: var(--mb-1); 582 | } 583 | 584 | .footer__title { 585 | font-size: var(--h3-font-size); 586 | } 587 | 588 | .footer__links, 589 | .footer__aviables { 590 | display: flex; 591 | flex-direction: column; 592 | row-gap: .75rem; 593 | } 594 | 595 | .footer__link { 596 | color: var(--text-color); 597 | transition: .3s; 598 | } 599 | 600 | .footer__link:hover { 601 | color: var(--title-color); 602 | } 603 | 604 | .footer__aviable-img { 605 | width: 100px; 606 | cursor: pointer; 607 | } 608 | 609 | .footer__copy { 610 | display: block; 611 | margin: 3.5rem 0 1rem 0; 612 | text-align: center; 613 | font-size: var(--smaller-font-size); 614 | color: var(--text-color-light); 615 | } 616 | 617 | .footer__img1, 618 | .footer__img2 { 619 | position: absolute; 620 | width: 100px; 621 | } 622 | 623 | .footer__img1 { 624 | top: 25%; 625 | right: 2rem; 626 | } 627 | 628 | .footer__img2 { 629 | top: 75%; 630 | right: -4rem; 631 | } 632 | 633 | /*=============== SCROLL UP ===============*/ 634 | .scrollup { 635 | position: fixed; 636 | right: 1rem; 637 | bottom: -30%; 638 | background-color: var(--container-color); 639 | box-shadow: 0 4px 12px hsla(0, 0%, 20%, .1); 640 | display: inline-flex; 641 | padding: .35rem; 642 | border-radius: .25rem; 643 | z-index: var(--z-tooltip); 644 | opacity: .8; 645 | transition: .4s; 646 | } 647 | 648 | .scrollup:hover { 649 | opacity: 1; 650 | } 651 | 652 | .scrollup__icon { 653 | font-size: 1.25rem; 654 | color: var(--first-color); 655 | } 656 | 657 | /* Show Scroll Up*/ 658 | .show-scroll { 659 | bottom: 3rem; 660 | } 661 | 662 | /*=============== SCROLL BAR ===============*/ 663 | ::-webkit-scrollbar { 664 | width: .6rem; 665 | background: #200f45; 666 | ; 667 | border-radius: 1rem; 668 | } 669 | 670 | ::-webkit-scrollbar-thumb { 671 | background: #703de1; 672 | border-radius: 1rem; 673 | } 674 | 675 | /*=============== BREAKPOINTS ===============*/ 676 | /* For small devices */ 677 | @media screen and (max-width: 320px) { 678 | .container { 679 | margin-left: var(--mb-1); 680 | margin-right: var(--mb-1); 681 | } 682 | 683 | .giving__container { 684 | gap: 1rem; 685 | } 686 | 687 | .gift__container { 688 | grid-template-columns: 150px; 689 | justify-content: center; 690 | } 691 | } 692 | 693 | /* For medium devices */ 694 | @media screen and (min-width: 576px) { 695 | .home__description { 696 | padding: 0 8rem; 697 | } 698 | 699 | .giving__container { 700 | grid-template-columns: repeat(2, 142px); 701 | justify-content: center; 702 | gap: 2.5rem 3.5rem; 703 | } 704 | 705 | .celebrate__description { 706 | padding: 0 4rem; 707 | } 708 | 709 | .gift__container { 710 | grid-template-columns: repeat(2, 180px); 711 | justify-content: center; 712 | gap: 2rem; 713 | } 714 | 715 | .message__input, 716 | .message__button { 717 | width: 60%; 718 | } 719 | 720 | .footer__container { 721 | grid-template-columns: repeat(2, 1fr); 722 | } 723 | } 724 | 725 | @media screen and (min-width: 767px) { 726 | body { 727 | margin: 0; 728 | } 729 | 730 | .section { 731 | padding: 6.5rem 0 2rem; 732 | } 733 | 734 | .nav { 735 | height: calc(var(--header-height) + 1.5rem); 736 | column-gap: 3rem; 737 | } 738 | 739 | .nav__toggle, 740 | .nav__close, 741 | .nav__img { 742 | display: none; 743 | } 744 | 745 | .nav__menu { 746 | margin-left: auto; 747 | } 748 | 749 | .nav__list { 750 | flex-direction: row; 751 | column-gap: 3rem; 752 | } 753 | 754 | .dark-theme .nav__menu { 755 | box-shadow: none; 756 | } 757 | 758 | .home__container, 759 | .celebrate__container, 760 | .message__container { 761 | grid-template-columns: repeat(2, 1fr); 762 | align-items: center; 763 | } 764 | 765 | .home__container { 766 | padding-top: 8rem; 767 | } 768 | 769 | .home__data { 770 | text-align: initial; 771 | } 772 | 773 | .home__description { 774 | padding: 0; 775 | } 776 | 777 | .giving__container { 778 | grid-template-columns: repeat(3, 142px); 779 | column-gap: 5rem; 780 | } 781 | 782 | .celebrate__data, 783 | .celebrate__title { 784 | text-align: initial; 785 | } 786 | 787 | .celebrate__description { 788 | padding: 0; 789 | } 790 | 791 | .gift__container { 792 | grid-template-columns: repeat(3, 200px); 793 | gap: 2.5rem; 794 | } 795 | 796 | .footer__container { 797 | grid-template-columns: repeat(3, 1fr); 798 | } 799 | } 800 | 801 | /* For large devices */ 802 | @media screen and (min-width: 992px) { 803 | .container { 804 | margin-left: auto; 805 | margin-right: auto; 806 | } 807 | 808 | .home__container { 809 | column-gap: 1rem; 810 | } 811 | 812 | .home__img { 813 | width: 500px; 814 | } 815 | 816 | .home__description { 817 | padding-right: 8rem; 818 | } 819 | 820 | .giving__container { 821 | column-gap: 8rem; 822 | padding-top: 2rem; 823 | } 824 | 825 | .giving__img { 826 | width: 120px; 827 | } 828 | 829 | .celebrate__img { 830 | width: 450px; 831 | } 832 | 833 | .celebrate__description { 834 | padding-right: 7rem; 835 | } 836 | 837 | .gift__container { 838 | padding-top: 2rem; 839 | } 840 | 841 | .gift__card { 842 | padding: 2rem 1.5rem 1.5rem; 843 | } 844 | 845 | .gift__img { 846 | width: 120px; 847 | margin-bottom: var(--mb-1); 848 | } 849 | 850 | .gift__title { 851 | font-size: var(--small-font-size); 852 | } 853 | 854 | .new__container { 855 | padding-top: 2rem; 856 | } 857 | 858 | .new__card { 859 | margin-bottom: 5rem; 860 | } 861 | 862 | .new__price { 863 | font-size: var(--h3-font-size); 864 | } 865 | 866 | .message__container { 867 | padding: 3.5rem 0; 868 | grid-template-columns: repeat(2, max-content); 869 | column-gap: 4rem; 870 | justify-content: center; 871 | } 872 | 873 | .message__form { 874 | text-align: initial; 875 | } 876 | 877 | .message__title { 878 | font-size: var(--h1-font-size); 879 | } 880 | 881 | .message__input { 882 | display: block; 883 | width: 280px; 884 | } 885 | 886 | .message__button { 887 | width: initial; 888 | } 889 | 890 | .message__img { 891 | width: 320px; 892 | } 893 | 894 | .footer__container { 895 | grid-template-columns: repeat(4, max-content); 896 | justify-content: space-between; 897 | } 898 | 899 | .footer__copy { 900 | margin-top: 7rem; 901 | } 902 | 903 | .footer__img1, 904 | .footer__img2 { 905 | width: 120px; 906 | } 907 | 908 | .footer__img1 { 909 | top: 100%; 910 | left: 0; 911 | } 912 | 913 | .footer__img2 { 914 | top: 40%; 915 | right: -7rem; 916 | } 917 | 918 | .scrollup { 919 | right: 3rem; 920 | } 921 | } -------------------------------------------------------------------------------- /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 | /*=============== CHANGE BACKGROUND HEADER ===============*/ 33 | function scrollHeader() { 34 | const header = document.getElementById('header') 35 | // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag 36 | if (this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') 37 | } 38 | window.addEventListener('scroll', scrollHeader) 39 | 40 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 41 | const sections = document.querySelectorAll('section[id]') 42 | 43 | function scrollActive() { 44 | const scrollY = window.pageYOffset 45 | 46 | sections.forEach(current => { 47 | const sectionHeight = current.offsetHeight, 48 | sectionTop = current.offsetTop - 58, 49 | sectionId = current.getAttribute('id') 50 | 51 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 52 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 53 | } else { 54 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 55 | } 56 | }) 57 | } 58 | window.addEventListener('scroll', scrollActive) 59 | 60 | /*=============== SHOW SCROLL UP ===============*/ 61 | function scrollUp() { 62 | const scrollUp = document.getElementById('scroll-up'); 63 | // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scroll-top class 64 | if (this.scrollY >= 350) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') 65 | } 66 | window.addEventListener('scroll', scrollUp) 67 | 68 | /*=============== DARK LIGHT THEME ===============*/ 69 | const themeButton = document.getElementById('theme-button') 70 | const darkTheme = 'dark-theme' 71 | const iconTheme = 'bx-sun' 72 | 73 | // Previously selected topic (if user selected) 74 | const selectedTheme = localStorage.getItem('selected-theme') 75 | const selectedIcon = localStorage.getItem('selected-icon') 76 | 77 | // We obtain the current theme that the interface has by validating the dark-theme class 78 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' 79 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun' 80 | 81 | // We validate if the user previously chose a topic 82 | if (selectedTheme) { 83 | // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark 84 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) 85 | themeButton.classList[selectedIcon === 'bx bx-moon' ? 'add' : 'remove'](iconTheme) 86 | } 87 | 88 | // Activate / deactivate the theme manually with the button 89 | themeButton.addEventListener('click', () => { 90 | // Add or remove the dark / icon theme 91 | document.body.classList.toggle(darkTheme) 92 | themeButton.classList.toggle(iconTheme) 93 | // We save the theme and the current icon that the user chose 94 | localStorage.setItem('selected-theme', getCurrentTheme()) 95 | localStorage.setItem('selected-icon', getCurrentIcon()) 96 | }) 97 | 98 | /*=============== SCROLL REVEAL ANIMATION ===============*/ 99 | const sr = ScrollReveal({ 100 | origin: 'top', 101 | distance: '60px', 102 | duration: 2500, 103 | delay: 400, 104 | // reset: true 105 | }) 106 | 107 | sr.reveal(`.home__img, .new__container, .footer__container`) 108 | sr.reveal(`.home__data`, { delay: 500 }) 109 | sr.reveal(`.giving__content, .gift__card`, { interval: 100 }) 110 | sr.reveal(`.celebrate__data, .message__form, .footer__img1`, { origin: 'left' }) 111 | sr.reveal(`.celebrate__img, .message__img, .footer__img2`, { origin: 'right' }) 112 | 113 | 114 | 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 < n--;)t[n] = arguments[n + 1]; if (this.constructor.debug && console) { var i = "%cScrollReveal: " + e; t.forEach(function (e) { return i += "\n — " + e }), console.log(i, "color: #ea654b;") } } function t() { var n = this, i = { active: [], stale: [] }, t = { active: [], stale: [] }, r = { active: [], stale: [] }; try { f(u("[data-sr-id]"), function (e) { var t = parseInt(e.getAttribute("data-sr-id")); i.active.push(t) }) } catch (e) { throw e } f(this.store.elements, function (e) { -1 === i.active.indexOf(e.id) && i.stale.push(e.id) }), f(i.stale, function (e) { return delete n.store.elements[e] }), f(this.store.elements, function (e) { -1 === r.active.indexOf(e.containerId) && r.active.push(e.containerId), e.hasOwnProperty("sequence") && -1 === t.active.indexOf(e.sequence.id) && t.active.push(e.sequence.id) }), f(this.store.containers, function (e) { -1 === r.active.indexOf(e.id) && r.stale.push(e.id) }), f(r.stale, function (e) { var t = n.store.containers[e].node; t.removeEventListener("scroll", n.delegate), t.removeEventListener("resize", n.delegate), delete n.store.containers[e] }), f(this.store.sequences, function (e) { -1 === t.active.indexOf(e.id) && t.stale.push(e.id) }), f(t.stale, function (e) { return delete n.store.sequences[e] }) } function N(e) { if (e.constructor !== Array) throw new TypeError("Expected array."); if (16 === e.length) return e; if (6 !== e.length) throw new RangeError("Expected array with either 6 or 16 values."); var t = z(); return t[0] = e[0], t[1] = e[1], t[4] = e[2], t[5] = e[3], t[12] = e[4], t[13] = e[5], t } function z() { for (var e = [], t = 0; t < 16; t++)t % 5 == 0 ? e.push(1) : e.push(0); return e } function F(e, t) { for (var n = N(e), i = N(t), r = [], o = 0; o < 4; o++)for (var s = [n[o], n[o + 4], n[o + 8], n[o + 12]], a = 0; a < 4; a++) { var c = 4 * a, l = [i[c], i[c + 1], i[c + 2], i[c + 3]], d = s[0] * l[0] + s[1] * l[1] + s[2] * l[2] + s[3] * l[3]; r[o + c] = d } return r } function D(e, t) { var n = z(); return n[0] = e, n[5] = "number" == typeof t ? t : e, n } var S = function () { var n = {}, i = document.documentElement.style; function e(e, t) { if (void 0 === t && (t = i), e && "string" == typeof e) { if (n[e]) return n[e]; if ("string" == typeof t[e]) return n[e] = e; if ("string" == typeof t["-webkit-" + e]) return n[e] = "-webkit-" + e; throw new RangeError('Unable to find "' + e + '" style property.') } throw new TypeError("Expected a string.") } return e.clearCache = function () { return n = {} }, e }(); function p(e) { var t = window.getComputedStyle(e.node), n = t.position, i = e.config, r = {}, o = (e.node.getAttribute("style") || "").match(/[\w-]+\s*:\s*[^;]+\s*/gi) || []; r.computed = o ? o.map(function (e) { return e.trim() }).join("; ") + ";" : "", r.generated = o.some(function (e) { return e.match(/visibility\s?:\s?visible/i) }) ? r.computed : o.concat(["visibility: visible"]).map(function (e) { return e.trim() }).join("; ") + ";"; var s, a, c, l, d, u, f, h, p, m, y, v, g, b = parseFloat(t.opacity), w = isNaN(parseFloat(i.opacity)) ? parseFloat(t.opacity) : parseFloat(i.opacity), E = { computed: b !== w ? "opacity: " + b + ";" : "", generated: b !== w ? "opacity: " + w + ";" : "" }, j = []; if (parseFloat(i.distance)) { var T = "top" === i.origin || "bottom" === i.origin ? "Y" : "X", k = i.distance; "top" !== i.origin && "left" !== i.origin || (k = /^-/.test(k) ? k.substr(1) : "-" + k); var O = k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g), x = O[0]; switch (O[1]) { case "em": k = parseInt(t.fontSize) * x; break; case "px": k = x; break; case "%": k = "Y" === T ? e.node.getBoundingClientRect().height * x / 100 : e.node.getBoundingClientRect().width * x / 100; break; default: throw new RangeError("Unrecognized or missing distance unit.") }"Y" === T ? j.push((c = k, (l = z())[13] = c, l)) : j.push((s = k, (a = z())[12] = s, a)) } i.rotate.x && j.push((d = i.rotate.x, u = Math.PI / 180 * d, (f = z())[5] = f[10] = Math.cos(u), f[6] = f[9] = Math.sin(u), f[9] *= -1, f)), i.rotate.y && j.push((h = i.rotate.y, p = Math.PI / 180 * h, (m = z())[0] = m[10] = Math.cos(p), m[2] = m[8] = Math.sin(p), m[2] *= -1, m)), i.rotate.z && j.push((y = i.rotate.z, v = Math.PI / 180 * y, (g = z())[0] = g[5] = Math.cos(v), g[1] = g[4] = Math.sin(v), g[4] *= -1, g)), 1 !== i.scale && (0 === i.scale ? j.push(D(2e-4)) : j.push(D(i.scale))); var R = {}; if (j.length) { R.property = S("transform"), R.computed = { raw: t[R.property], matrix: function (e) { if ("string" == typeof e) { var t = e.match(/matrix(3d)?\(([^)]+)\)/); if (t) return N(t[2].split(", ").map(parseFloat)) } return z() }(t[R.property]) }, j.unshift(R.computed.matrix); var q = j.reduce(F); R.generated = { initial: R.property + ": matrix3d(" + q.join(", ") + ");", final: R.property + ": matrix3d(" + R.computed.matrix.join(", ") + ");" } } else R.generated = { initial: "", final: "" }; var A = {}; if (E.generated || R.generated.initial) { A.property = S("transition"), A.computed = t[A.property], A.fragments = []; var P = i.delay, L = i.duration, M = i.easing; E.generated && A.fragments.push({ delayed: "opacity " + L / 1e3 + "s " + M + " " + P / 1e3 + "s", instant: "opacity " + L / 1e3 + "s " + M + " 0s" }), R.generated.initial && A.fragments.push({ delayed: R.property + " " + L / 1e3 + "s " + M + " " + P / 1e3 + "s", instant: R.property + " " + L / 1e3 + "s " + M + " 0s" }), A.computed && !A.computed.match(/all 0s|none 0s/) && A.fragments.unshift({ delayed: A.computed, instant: A.computed }); var I = A.fragments.reduce(function (e, t, n) { return e.delayed += 0 === n ? t.delayed : ", " + t.delayed, e.instant += 0 === n ? t.instant : ", " + t.instant, e }, { delayed: "", instant: "" }); A.generated = { delayed: A.property + ": " + I.delayed + ";", instant: A.property + ": " + I.instant + ";" } } else A.generated = { delayed: "", instant: "" }; return { inline: r, opacity: E, position: n, transform: R, transition: A } } function m(r, e) { e.split(";").forEach(function (e) { var t = e.split(":"), n = t[0], i = t.slice(1); n && i && (r.style[n.trim()] = i.join(":")) }) } function y(e) { var i, r = this; try { f(u(e), function (e) { var t = e.getAttribute("data-sr-id"); if (null !== t) { i = !0; var n = r.store.elements[t]; n.callbackTimer && window.clearTimeout(n.callbackTimer.clock), m(n.node, n.styles.inline.generated), e.removeAttribute("data-sr-id"), delete r.store.elements[t] } }) } catch (e) { return h.call(this, "Clean failed.", e.message) } if (i) try { t.call(this) } catch (e) { return h.call(this, "Clean failed.", e.message) } } function v(n) { for (var e = [], t = arguments.length - 1; 0 < t--;)e[t] = arguments[t + 1]; if (s(n)) return f(e, function (e) { f(e, function (e, t) { s(e) ? (n[t] && s(n[t]) || (n[t] = {}), v(n[t], e)) : n[t] = e }) }), n; throw new TypeError("Target must be an object literal.") } function g(e) { return void 0 === e && (e = navigator.userAgent), /Android|iPhone|iPad|iPod/i.test(e) } var e, b = (e = 0, function () { return e++ }); function w() { var n = this; t.call(this), f(this.store.elements, function (e) { var t = [e.styles.inline.generated]; e.visible ? (t.push(e.styles.opacity.computed), t.push(e.styles.transform.generated.final), e.revealed = !0) : (t.push(e.styles.opacity.generated), t.push(e.styles.transform.generated.initial), e.revealed = !1), m(e.node, t.filter(function (e) { return "" !== e }).join(" ")) }), f(this.store.containers, function (e) { var t = e.node === document.documentElement ? window : e.node; t.addEventListener("scroll", n.delegate), t.addEventListener("resize", n.delegate) }), this.delegate(), this.initTimeout = null } function c(e, t) { void 0 === t && (t = {}); var n = t.pristine || this.pristine, i = "always" === e.config.useDelay || "onload" === e.config.useDelay && n || "once" === e.config.useDelay && !e.seen, r = e.visible && !e.revealed, o = !e.visible && e.revealed && e.config.reset; return t.reveal || r ? function (e, t) { var n = [e.styles.inline.generated, e.styles.opacity.computed, e.styles.transform.generated.final]; t ? n.push(e.styles.transition.generated.delayed) : n.push(e.styles.transition.generated.instant); e.revealed = e.seen = !0, m(e.node, n.filter(function (e) { return "" !== e }).join(" ")), a.call(this, e, t) }.call(this, e, i) : t.reset || o ? function (e) { var t = [e.styles.inline.generated, e.styles.opacity.generated, e.styles.transform.generated.initial, e.styles.transition.generated.instant]; e.revealed = !1, m(e.node, t.filter(function (e) { return "" !== e }).join(" ")), a.call(this, e) }.call(this, e) : void 0 } function a(e, t) { var n = this, i = t ? e.config.duration + e.config.delay : e.config.duration, r = e.revealed ? e.config.beforeReveal : e.config.beforeReset, o = e.revealed ? e.config.afterReveal : e.config.afterReset, s = 0; e.callbackTimer && (s = Date.now() - e.callbackTimer.start, window.clearTimeout(e.callbackTimer.clock)), r(e.node), e.callbackTimer = { start: Date.now(), clock: window.setTimeout(function () { o(e.node), e.callbackTimer = null, e.revealed && !e.config.reset && e.config.cleanup && y.call(n, e.node) }, i - s) } } function l(e, t) { if (void 0 === t && (t = this.pristine), !e.visible && e.revealed && e.config.reset) return c.call(this, e, { reset: !0 }); var n = this.store.sequences[e.sequence.id], i = e.sequence.index; if (n) { var r = new d(n, "visible", this.store), o = new d(n, "revealed", this.store); if (n.models = { visible: r, revealed: o }, !o.body.length) { var s = n.members[r.body[0]], a = this.store.elements[s]; if (a) return j.call(this, n, r.body[0], -1, t), j.call(this, n, r.body[0], 1, t), c.call(this, a, { reveal: !0, pristine: t }) } if (!n.blocked.head && i === [].concat(o.head).pop() && i >= [].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 < o.body[0] ? o.head.push(t) : o.foot.push(t)) }) } function j(e, t, n, i) { var r = this, o = ["head", null, "foot"][1 + n], s = e.members[t + n], a = this.store.elements[s]; e.blocked[o] = !0, setTimeout(function () { e.blocked[o] = !1, a && l.call(r, a, i) }, e.interval) } function i(e, a, t) { var c = this; void 0 === a && (a = {}), void 0 === t && (t = !1); var l, d = [], n = a.interval || r.interval; try { n && (l = new E(n)); var i = u(e); if (!i.length) throw new Error("Invalid reveal target."); f(i.reduce(function (e, t) { var n = {}, i = t.getAttribute("data-sr-id"); i ? (v(n, c.store.elements[i]), m(n.node, n.styles.inline.computed)) : (n.id = b(), n.node = t, n.seen = !1, n.revealed = !1, n.visible = !1); var r = v({}, n.config || c.defaults, a); if (!r.mobile && g() || !r.desktop && !g()) return i && y.call(c, n), e; var o, s = u(r.container)[0]; if (!s) throw new Error("Invalid container."); return s.contains(t) && (null === (o = function (t) { var e = [], n = arguments.length - 1; for (; 0 < n--;)e[n] = arguments[n + 1]; var i = null; return f(e, function (e) { f(e, function (e) { null === i && e.node === t && (i = e.id) }) }), i }(s, d, c.store.containers)) && (o = b(), d.push({ id: o, node: s })), n.config = r, n.containerId = o, n.styles = p(n), l && (n.sequence = { id: l.id, index: l.members.length }, l.members.push(n.id)), e.push(n)), e }, []), function (e) { (c.store.elements[e.id] = e).node.setAttribute("data-sr-id", e.id) }) } catch (e) { return h.call(this, "Reveal failed.", e.message) } f(d, function (e) { c.store.containers[e.id] = { id: e.id, node: e.node } }), l && (this.store.sequences[l.id] = l), !0 !== t && (this.store.history.push({ target: e, options: a }), this.initTimeout && window.clearTimeout(this.initTimeout), this.initTimeout = window.setTimeout(w.bind(this), 0)) } var T, k = Math.sign || function (e) { return (0 < e) - (e < 0) || +e }, O = (T = Date.now(), function (e) { var t = Date.now(); 16 < t - T ? e(T = t) : setTimeout(function () { return O(e) }, 0) }), x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || O; function R(e, t) { for (var n = t ? e.node.clientHeight : e.node.offsetHeight, i = t ? e.node.clientWidth : e.node.offsetWidth, r = 0, o = 0, s = e.node; isNaN(s.offsetTop) || (r += s.offsetTop), isNaN(s.offsetLeft) || (o += s.offsetLeft), s = s.offsetParent;); return { bounds: { top: r, right: o + i, bottom: r + n, left: o }, height: n, width: i } } function q(e, t) { var i = this; void 0 === e && (e = { type: "init" }), void 0 === t && (t = this.store.elements), x(function () { var n = "init" === e.type || "resize" === e.type; f(i.store.containers, function (e) { n && (e.geometry = R.call(i, e, !0)); var t = function (e) { var t, n; return n = e.node === document.documentElement ? (t = window.pageYOffset, window.pageXOffset) : (t = e.node.scrollTop, e.node.scrollLeft), { top: t, left: n } }.call(i, e); e.scroll && (e.direction = { x: k(t.left - e.scroll.left), y: k(t.top - e.scroll.top) }), e.scroll = t }), f(t, function (e) { (n || void 0 === e.geometry) && (e.geometry = R.call(i, e)), e.visible = function (e) { void 0 === e && (e = {}); var t = this.store.containers[e.containerId]; if (t) { var n = Math.max(0, Math.min(1, e.config.viewFactor)), i = e.config.viewOffset, r = e.geometry.bounds.top + e.geometry.height * n, o = e.geometry.bounds.right - e.geometry.width * n, s = e.geometry.bounds.bottom - e.geometry.height * n, a = e.geometry.bounds.left + e.geometry.width * n, c = t.geometry.bounds.top + t.scroll.top + i.top, l = t.geometry.bounds.right + t.scroll.left - i.right, d = t.geometry.bounds.bottom + t.scroll.top - i.bottom, u = t.geometry.bounds.left + t.scroll.left + i.left; return r < d && u < o && c < s && a < l || "fixed" === e.styles.position } }.call(i, e) }), f(t, function (e) { e.sequence ? l.call(i, e) : c.call(i, e) }), i.pristine = !1 }) } var A, P, L, M, I, C, W, Y, $ = "4.0.9"; function H(e) { var t; if (void 0 === e && (e = {}), void 0 === this || Object.getPrototypeOf(this) !== H.prototype) return new H(e); if (!H.isSupported()) return h.call(this, "Instantiation failed.", "This browser is not supported."), n.failure(); try { t = v({}, C || r, e) } catch (e) { return h.call(this, "Invalid configuration.", e.message), n.failure() } try { if (!u(t.container)[0]) throw new Error("Invalid container.") } catch (e) { return h.call(this, e.message), n.failure() } return !(C = t).mobile && g() || !C.desktop && !g() ? (h.call(this, "This device is disabled.", "desktop: " + C.desktop, "mobile: " + C.mobile), n.failure()) : (n.success(), this.store = { containers: {}, elements: {}, history: [], sequences: {} }, this.pristine = !0, A = A || q.bind(this), P = P || function () { var n = this; f(this.store.elements, function (e) { m(e.node, e.styles.inline.generated), e.node.removeAttribute("data-sr-id") }), f(this.store.containers, function (e) { var t = e.node === document.documentElement ? window : e.node; t.removeEventListener("scroll", n.delegate), t.removeEventListener("resize", n.delegate) }), this.store = { containers: {}, elements: {}, history: [], sequences: {} } }.bind(this), L = L || i.bind(this), M = M || y.bind(this), I = I || function () { var t = this; f(this.store.history, function (e) { i.call(t, e.target, e.options, !0) }), w.call(this) }.bind(this), Object.defineProperty(this, "delegate", { get: function () { return A } }), Object.defineProperty(this, "destroy", { get: function () { return P } }), Object.defineProperty(this, "reveal", { get: function () { return L } }), Object.defineProperty(this, "clean", { get: function () { return M } }), Object.defineProperty(this, "sync", { get: function () { return I } }), Object.defineProperty(this, "defaults", { get: function () { return C } }), Object.defineProperty(this, "version", { get: function () { return $ } }), Object.defineProperty(this, "noop", { get: function () { return !1 } }), Y || (Y = this)) } return H.isSupported = function () { return ("transform" in (t = document.documentElement.style) || "WebkitTransform" in t) && ("transition" in (e = document.documentElement.style) || "WebkitTransition" in e); var e, t }, Object.defineProperty(H, "debug", { get: function () { return W || !1 }, set: function (e) { return W = "boolean" == typeof e ? e : W } }), H(), H }(); 115 | --------------------------------------------------------------------------------