29 |
30 | Halloween
31 | Week at DSU
32 |
35 |
Countdown to October 31st
36 |
41 |
46 |
47 |
48 |
49 |
66 |
67 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const navMenu = document.getElementById('nav-menu'),
2 | navToggle = document.getElementById('nav-toggle'),
3 | navClose = document.getElementById('nav-close')
4 |
5 | if(navToggle){
6 | navToggle.addEventListener('click', () =>{
7 | navMenu.classList.add('show-menu')
8 | })
9 | }
10 | if(navClose){
11 | navClose.addEventListener('click', () =>{
12 | navMenu.classList.remove('show-menu')
13 | })
14 | }
15 | const navLink = document.querySelectorAll('.nav__link')
16 | const linkAction = () =>{
17 | const navMenu = document.getElementById('nav-menu')
18 | navMenu.classList.remove('show-menu')
19 | }
20 | navLink.forEach(n => n.addEventListener('click', linkAction))
21 | const scrollHeader = () =>{
22 | const header = document.getElementById('header')
23 | this.scrollY >= 50 ? header.classList.add('scroll-header')
24 | : header.classList.remove('scroll-header')
25 | }
26 | window.addEventListener('scroll', scrollHeader)
27 | const sections = document.querySelectorAll('section[id]')
28 | const scrollActive = () =>{
29 | const scrollY = window.pageYOffset
30 | sections.forEach(current =>{
31 | const sectionHeight = current.offsetHeight,
32 | sectionTop = current.offsetTop - 58,
33 | sectionId = current.getAttribute('id'),
34 | sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
35 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
36 | sectionsClass.classList.add('active-link')
37 | }else{
38 | sectionsClass.classList.remove('active-link')
39 | }
40 | })
41 | }
42 | window.addEventListener('scroll', scrollActive)
43 | const scrollUp = () =>{
44 | const scrollUp = document.getElementById('scroll-up')
45 | this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
46 | : scrollUp.classList.remove('show-scroll')
47 | }
48 | window.addEventListener('scroll', scrollUp)
49 | const sr = ScrollReveal({
50 | origin: 'top',
51 | distance: '60px',
52 | duration: 1000,
53 | delay: 200,
54 | reset: true
55 | })
56 |
57 | sr.reveal(`.home__data, .footer__content, .footer__logo, .footer__description`)
58 | sr.reveal(`.home__tree-1`, {origin: 'left', delay:800})
59 | sr.reveal(`.home__tree-2`, {origin: 'right', delay:800})
60 | sr.reveal(`.home__img`, {delay: 800})
61 | sr.reveal(`.category__card, .items__card`, {interval: 100})
62 | sr.reveal(`.about__img, .about__data, .footer__tree-2`, {origin: 'left'})
63 | sr.reveal(`.party__images, .party__data, .footer__tree-1`, {origin: 'right'})
64 |
65 | let mouseX = 0;
66 | let mouseY = 0;
67 |
68 | let flashlight = document.getElementById("flashlight");
69 | const isTouchDevice = () => {
70 | try {
71 | document.createEvent("TouchEvent");
72 | return true;
73 | } catch (e) {
74 | return false;
75 | }
76 | };
77 |
78 | function getMousePosition(e) {
79 |
80 | mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
81 | mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
82 |
83 | flashlight.style.setProperty("--Xpos", mouseX + "px");
84 | flashlight.style.setProperty("--Ypos", mouseY + "px");
85 | }
86 |
87 | document.addEventListener("mousemove", getMousePosition);
88 | document.addEventListener("touchmove", getMousePosition);
89 |
--------------------------------------------------------------------------------
/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
DSU
13 |
14 |
15 |
16 |
45 |
🕑
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | Halloween
54 | Trick Or Treat
55 |
66 |
67 | This Halloween, enjoy trick-or-treating with your friends and
68 | spend a terrifying night under the full moon.
69 |
70 |
Venture
71 |
72 |
77 |
82 |
87 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | About the Night
98 |
99 | Halloween is celebrated every October 31 at night, walk around the
100 | city with your friends and trick or treat, enjoy this celebration
101 | under the full moon!
102 |
103 |
Know More
104 |
105 |
106 |
108 |
109 |
110 |
111 | Choose your
114 |
115 |
116 |
121 |
Pumpkins
122 |
123 | Light up horror pumpkins to scare at night!
124 |
125 |
126 |
127 |
128 |
133 |
Ghost
134 |
135 | Spooky ghosts to scare in the most haunted houses!
136 |
137 |
138 |
139 |
140 |
145 |
Witch Hat
146 |
147 | The most elegant witch hats you can wear and scare!
148 |
149 |
150 |
151 |
153 |
154 |
155 |
156 | Select your
159 |
160 |
161 | Candy Apple
167 | Rs.200
168 | Buy Now
169 |
170 |
171 | Witch Broom
173 | Rs.250
174 | Buy Now
175 |
176 |
177 | Pumpkin
179 | Rs.250
180 | Buy Now
181 |
182 |
183 | Spider
189 | Rs.500
190 | Buy Now
191 |
192 |
193 | Witch Hat
199 | Rs.950
200 | Buy Now
201 |
202 |
203 | Props
205 | Rs.950
206 | Buy Now
207 |
208 |
209 | Blinking lights
211 | Rs.950
212 | Buy Now
213 |
214 |
215 | Candle
217 | Rs.950
218 | Buy Now
219 |
220 |
222 |
223 |
251 |
252 |
254 |
255 |
256 |
257 |
258 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Creepster&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
2 | @import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
3 | :root {
4 | --header-height: 3.5rem;
5 | --first-color: rgb(144, 10, 0);
6 | --first-color-alt: rgb(165, 0, 0);
7 | --white-color: #fff;
8 | --text-color: white;
9 | --text-color-light: hsl(22, 4%, 55%);
10 | --body-color: hsl(22, 8%, 6%);
11 | --container-color: hsl(22, 8%, 7%);
12 | --body-font: "Playfair Display", serif;
13 | --second-font: "Creepster", system-ui;
14 | --biggest-font-size: 2rem;
15 | --h1-font-size: 1.5rem;
16 | --h2-font-size: 1.25rem;
17 | --h3-font-size: 1rem;
18 | --normal-font-size: .938rem;
19 | --small-font-size: .813rem;
20 | --smaller-font-size: .75rem;
21 | --font-medium: 500;
22 | --font-semi-bold: 600;
23 | --font-bold: 700;
24 | --z-tooltip: 10;
25 | --z-fixed: 100;
26 | }
27 | @media screen and (min-width: 1024px) {
28 | :root {
29 | --biggest-font-size: 3.5rem;
30 | --h1-font-size: 2.25rem;
31 | --h2-font-size: 1.5rem;
32 | --h3-font-size: 1.25rem;
33 | --normal-font-size: 1rem;
34 | --small-font-size: .875rem;
35 | --smaller-font-size: .813rem;
36 | }
37 | }
38 | * {
39 | box-sizing: border-box;
40 | padding: 0;
41 | margin: 0;
42 | }
43 |
44 | html {
45 | scroll-behavior: smooth;
46 | }
47 |
48 | body {
49 | font-family: var(--body-font);
50 | font-size: var(--normal-font-size);
51 | background-color: var(--body-color);
52 | color: var(--white-color);
53 | }
54 |
55 | ul {
56 | list-style: none;
57 | }
58 |
59 | a {
60 | text-decoration: none;
61 | }
62 |
63 | img {
64 | max-width: 100%;
65 | height: auto;
66 | }
67 |
68 | .floating-imgs {
69 | animation: floating-img 5s infinite ease-in-out;
70 | }
71 |
72 | .container {
73 | max-width: 1024px;
74 | margin-inline: 1.5rem;
75 | }
76 |
77 | .grid {
78 | display: grid;
79 | gap: 1.5rem;
80 | }
81 |
82 | .section {
83 | padding-block: 5rem 1.5rem;
84 | }
85 |
86 | .section__title {
87 | font-size: var(--h1-font-size);
88 | font-family: var(--second-font);
89 | font-weight: initial;
90 | line-height: 130%;
91 | color: var(--first-color);
92 | text-align: center;
93 | margin-bottom: 2.5rem;
94 | }
95 |
96 | .main {
97 | overflow: hidden;
98 | }
99 |
100 | .shape__bg {
101 | position: fixed;
102 | width: 100%;
103 | height: 100vh;
104 | object-fit: cover;
105 | mix-blend-mode: soft-light;
106 | opacity: .5;
107 | }
108 |
109 | .shape__small,
110 | .shape__big {
111 | position: absolute;
112 | background-color: var(--first-color);
113 | filter: blur(96px);
114 | z-index: -1;
115 | border-radius: 50%;
116 | }
117 |
118 | .shape__small {
119 | width: 150px;
120 | height: 150px;
121 | }
122 |
123 | .shape__big {
124 | width: 250px;
125 | height: 250px;
126 | opacity: .8;
127 | }
128 |
129 | .header{
130 | position: fixed;
131 | width: 100%;
132 | background: rgba(144, 10, 0, 0.4);
133 | top: 0;
134 | left: 0;
135 | z-index: var(--z-fixed);
136 | transition: background .3s, box-shadow .3s;
137 | }
138 |
139 | .count-down {
140 | position: fixed;
141 | background: rgba(144, 10, 0, 0.2);
142 | top: 20%;
143 | font-size: 20px;
144 | padding: 10px;
145 | border-radius: 50%;
146 | right: 2%;
147 | z-index: var(--z-fixed);
148 | }
149 |
150 |
151 | .nav{
152 | position: relative;
153 | height: var(--header-height);
154 | display: flex;
155 | justify-content: space-between;
156 | align-items: center;
157 | }
158 |
159 | .nav__logo,
160 | .nav__toggle,
161 | .nav__close{
162 | display: inline-flex;
163 | color: var(--white-color);
164 | }
165 |
166 | .nav__logo{
167 | align-items: center;
168 | column-gap: .5rem;
169 | font-weight: var(--font-medium);
170 | transition: color .3s;
171 | font-family: var(--second-font);
172 | }
173 |
174 | .nav__logo img{
175 | width: 20px;
176 | }
177 |
178 | .nav__logo:hover{
179 | color: var(--first-color);
180 | }
181 |
182 | .nav__toggle{
183 | font-size: 1.25rem;
184 | cursor: pointer;
185 | }
186 |
187 | @media(max-width: 767px){
188 |
189 | .mobile {
190 | display: none;
191 | }
192 |
193 | .nav__menu{
194 | position: fixed;
195 | top: -100%;
196 | left: 0;
197 | background-color: var(--body-color);
198 | width: 100%;
199 | box-shadow: 0 4px 8px hsla(22, 10%, 2%, .5);
200 | padding-block: 3.5rem 3rem;
201 | border-radius: 0 0 2rem 2rem;
202 | transition: top .4s;
203 | }
204 | }
205 | .nav__list{
206 | display: flex;
207 | flex-direction: column;
208 | text-align: center;
209 | row-gap: 1.5rem;
210 | }
211 |
212 | .nav__link{
213 | color: var(--white-color);
214 | font-family: var(--second-font);
215 | transition: color .4s;
216 | }
217 |
218 | .nav__link:hover{
219 | color: var(--first-color);
220 | }
221 |
222 | .nav__close{
223 | position: absolute;
224 | top: 1rem;
225 | right: 1.5rem;
226 | font-size: 1.5rem;
227 | cursor: pointer;
228 | }
229 |
230 | .nav__img{
231 | width: 180px;
232 | position: absolute;
233 | top: 15%;
234 | left: 0rem;
235 | }
236 |
237 | .show-menu{
238 | top: 0;
239 | }
240 |
241 | .login-section {
242 | background-color: rgba(144, 10, 0, 0.2);
243 | padding: 40px;
244 | border-radius: 20px;
245 | }
246 |
247 | .login-section > input {
248 | margin: 10px;
249 | }
250 |
251 | .login-section > button {
252 | background-color: var(--first-color-alt);
253 | color: var(--white-color);
254 | }
255 |
256 | .login-section > a:visited {
257 | color: var(--white-color);
258 | }
259 |
260 |
261 | .bg-header{
262 | background-color: var(--body-color);
263 | box-shadow: 0 4px 8px hsla(22, 10%, 2%, .4);
264 | }
265 |
266 | .active-link{
267 | color: var(--first-color);
268 | }
269 |
270 | .home{
271 | position: relative;
272 | }
273 |
274 | .home__container{
275 | padding-top: 3.5rem;
276 | }
277 |
278 | .home__data{
279 | text-align: center;
280 | }
281 |
282 | .home__title{
283 | position: relative;
284 | font-size: var(--biggest-font-size);
285 | line-height: 140%;
286 | width: max-content;
287 | margin: 0 auto .5rem;
288 | }
289 |
290 | .home__title-img-1,
291 | .home__title-img-2{
292 | width: 40px;
293 | position: absolute;
294 | }
295 |
296 | .home__title span{
297 | display: block;
298 | font-family: var(--second-font);
299 | font-weight: initial;
300 | color: var(--first-color);
301 | }
302 |
303 | .home__title .Deez{
304 | display: block;
305 | font-family: var(--second-font);
306 | font-weight: initial;
307 | color: var(--white-color);
308 | }
309 |
310 | .home__title-img-1{
311 | top: -1rem;
312 | left: -1.5rem;
313 | transform: rotate(-15deg);
314 | animation: animate-star-1 5s infinite ease-in-out;
315 | }
316 |
317 | .home__title-img-2{
318 | bottom: 2.75rem;
319 | right: -1.5rem;
320 | transform: rotate(15deg);
321 | animation: animate-star-2 5s infinite ease-in-out;
322 | }
323 |
324 | .home__description{
325 | margin: 2.5rem;
326 | font-family: var(--body-font);
327 | }
328 |
329 | .home__img{
330 | width: 300px;
331 | justify-self: center;
332 | margin-top: 1.5rem;
333 | }
334 |
335 | .home__tree-1,
336 | .home__tree-2{
337 | width: 200px;
338 | position: absolute;
339 | top: 18rem;
340 | }
341 |
342 | .home__tree-1{
343 | left: 0rem;
344 | }
345 |
346 | .home__tree-2{
347 | right: -2rem;
348 | height: auto;
349 | width: 100%;
350 | }
351 |
352 | @keyframes animate-star-1{
353 | 0%{
354 | transform: scale(.7) rotate(-15deg);
355 | opacity: .2;
356 | }
357 | 50%{
358 | transform: scale(1) rotate(-15deg);
359 | opacity: 1;
360 | }
361 | 100%{
362 | transform: scale(.7) rotate(-15deg);
363 | opacity: .2;
364 | }
365 | }
366 |
367 | @keyframes floating-img {
368 | 0% {
369 | transform: translatey(0px);
370 | }
371 | 50% {
372 | transform: translatey(-20px);
373 | }
374 | 100% {
375 | transform: translatey(0px);
376 | }
377 | }
378 |
379 | @keyframes animate-star-2{
380 | 0%{
381 | transform: scale(1) rotate(15deg);
382 | opacity: 1;
383 | }
384 | 50%{
385 | transform: scale(.7) rotate(15deg);
386 | opacity: .2;
387 | }
388 | 100%{
389 | transform: scale(1) rotate(15deg);
390 | opacity: 1;
391 | }
392 | }
393 |
394 | .home .shape__small{
395 | top: -3rem;
396 | left: -3rem;
397 | }
398 |
399 | .home .shape__big{
400 | bottom: 5rem;
401 | right: -10rem;
402 | }
403 |
404 | .button{
405 | display: inline-block;
406 | background-color: var(--white-color);
407 | padding: 1rem 1.5rem;
408 | color: var(--first-color);
409 | font-weight: var(--font-semi-bold);
410 | transition: background .3s, color .3s;
411 | font-family: var(--second-font);
412 | }
413 |
414 | .button:hover{
415 | background-color: var(--first-color);
416 | color: var(--white-color);
417 | font-family: var(--second-font);
418 | }
419 |
420 | .button > a:visited {
421 | color: var(--white-color);
422 | }
423 |
424 |
425 | .button-1{
426 | display: inline-block;
427 | background-color: var(--white-color);
428 | padding: 10px;
429 | color: var(--first-color);
430 | font-weight: var(--font-semi-bold);
431 | transition: background .3s, color .3s;
432 | font-family: var(--second-font);
433 | border-radius: 10px;
434 | margin: 10px;
435 | }
436 |
437 | .button-1:hover{
438 | background-color: var(--first-color);
439 | color: var(--white-color);
440 | font-family: var(--second-font);
441 | }
442 | .category{
443 | position: relative;
444 | }
445 |
446 | .category__container{
447 | padding-top: 4rem;
448 | grid-template-columns: 228px;
449 | justify-content: center;
450 | row-gap: 6rem;
451 | }
452 |
453 | .category__card{
454 | position: relative;
455 | background-color: var(--container-color);
456 | border-radius: 2rem;
457 | padding: 4.5rem 2.25rem 2rem;
458 | box-shadow: 0 4px 8px hsla(22, 10%, 2%, .3);
459 | text-align: center;
460 | transition: background .3s;
461 | }
462 |
463 | .category__img{
464 | width: 170px;
465 | position: absolute;
466 | inset: 0;
467 | margin: 0 auto;
468 | top: -3.5rem;
469 | transition: transform .3s;
470 | }
471 |
472 | .category__title{
473 | font-size: var(--h3-font-size);
474 | font-weight: var(--font-semi-bold);
475 | color: var(--first-color);
476 | margin-bottom: .5rem;
477 | }
478 |
479 | .category__description{
480 | font-family: var(--body-font);
481 | font-size: var(--small-font-size);
482 | }
483 |
484 | .category__star{
485 | width: 40px;
486 | position: absolute;
487 | top: 3.5rem;
488 | right: .5rem;
489 | transform: rotate(15deg);
490 | }
491 |
492 | .category__card:hover .category__img{
493 | transform: translateY(-.5rem);
494 | }
495 |
496 | .category .shape__small{
497 | top: 25rem;
498 | left: -4rem;
499 | }
500 |
501 | .about{
502 | position: relative;
503 | }
504 |
505 | .about__container{
506 | row-gap: 3.0rem;
507 | }
508 |
509 | .about__container .section__title{
510 | margin-bottom: 1rem;
511 | }
512 |
513 | .about__data{
514 | text-align: center;
515 | }
516 |
517 | .about__description{
518 | margin-bottom: 2rem;
519 | font-family: var(--body-font);
520 | }
521 |
522 | .about__img{
523 | width: 300px;
524 | justify-self: center;
525 | }
526 |
527 | .about .shape__small{
528 | top: 2rem;
529 | right: -3rem;
530 | }
531 |
532 | .about .shape__big{
533 | bottom: 0;
534 | left: -8rem;
535 | }
536 |
537 | .items{
538 | position: relative;
539 | }
540 |
541 | .items__container{
542 | padding-top: 2rem;
543 | grid-template-columns: repeat(2, 1fr);
544 | justify-content: center;
545 | gap: 4rem 1.5rem;
546 | }
547 |
548 | .items__card{
549 | position: relative;
550 | background-color: var(--container-color);
551 | border-radius: 1.5rem;
552 | padding: 4rem 1.25rem 1.25rem;
553 | box-shadow: 0 4px 8px hsla(22, 10%, 2%, .3);
554 | text-align: center;
555 | }
556 |
557 | .items__img{
558 | width: 100px;
559 | position: absolute;
560 | inset: 0;
561 | top: -2rem;
562 | margin: 0 auto;
563 | transition: transform .3s;
564 | }
565 |
566 | .items__name{
567 | font-size: var(--body-font);
568 | font-weight: var(--font-medium);
569 | margin-bottom: .25rem;
570 | }
571 |
572 | .items__price{
573 | display: block;
574 | font-weight: var(--font-semi-bold);
575 | font-family: var(--second-font);
576 | color: var(--first-color);
577 | margin-bottom: .5rem;
578 | }
579 |
580 | .items__button{
581 | display: inline-flex;
582 | background-color: var(--first-color);
583 | color: var(--white-color);
584 | padding: .25rem 1.5rem;
585 | border-radius: 4rem;
586 | cursor: pointer;
587 | transition: background .3s;
588 | font-family: var(--second-font);
589 | border: none;
590 | outline: none;
591 | }
592 |
593 | .items__button i {
594 | font-size: 1.25rem;
595 | }
596 |
597 | .items__button:hover{
598 | background-color: var(--first-color-alt);
599 | }
600 |
601 | .items__card:hover .items__img{
602 | transform: translateY(-.5rem);
603 | }
604 |
605 | .items .shape__big{
606 | bottom: -8rem;
607 | right: -8rem;
608 | }
609 |
610 | .party{
611 | position: relative;
612 | }
613 |
614 | .party__container{
615 | row-gap: 5rem;
616 | }
617 |
618 | .party__container .section__title{
619 | margin-bottom: 1rem;
620 | }
621 |
622 | .party__data{
623 | text-align: center;
624 | }
625 |
626 | .party__description{
627 | margin-bottom: 2rem;
628 | }
629 |
630 | .party__images{
631 | position: relative;
632 | justify-self: center;
633 | }
634 |
635 | .party__img{
636 | width: 250px;
637 | }
638 |
639 | .party__star-1,
640 | .party__star-2{
641 | width: 50px;
642 | position: absolute;
643 | transform: rotate(15deg);
644 | }
645 |
646 | .party__star-1{
647 | top: -3rem;
648 | left: -.5rem;
649 | animation: animate-star-1 5s infinite ease-in-out;
650 | }
651 |
652 | .party__star-2{
653 | right: -1.5rem;
654 | bottom: 2rem;
655 | animation: animate-star-2 5s infinite ease-in-out;
656 | }
657 |
658 | .footer{
659 | position: relative;
660 | overflow: hidden;
661 | }
662 |
663 | .footer__container{
664 | row-gap: 4rem;
665 | }
666 |
667 | .footer__logo{
668 | display: inline-flex;
669 | align-items: center;
670 | column-gap: .5rem;
671 | color: var(--first-color);
672 | font-weight: var(--font-medium);
673 | margin-bottom: 1.25rem;
674 | transition: color .3s;
675 | }
676 |
677 | .footer__logo img{
678 | width: 20px;
679 | }
680 |
681 | .footer__logo:hover{
682 | color: var(--first-color-alt);
683 | }
684 |
685 | .footer__description{
686 | font-size: var(--small-font-size);
687 | font-family: var(--body-font);
688 | }
689 |
690 | .footer__content,
691 | .footer__links{
692 | display: grid;
693 | }
694 |
695 | .footer__content{
696 | grid-template-columns: repeat(2, max-content);
697 | gap: 2.5rem 4.5rem;
698 | }
699 |
700 | .footer__title{
701 | font-size: var(--h3-font-size);
702 | font-weight: var(--font-semi-bold);
703 | margin-bottom: 1.5rem;
704 | }
705 |
706 | .footer__links{
707 | row-gap: .75rem;
708 | }
709 |
710 | .footer__link{
711 | color: var(--text-color);
712 | font-size: var(--small-font-size);
713 | transition: color .3s;
714 | }
715 |
716 | .footer__link:hover{
717 | color: var(--first-color);
718 | }
719 |
720 | .footer__social{
721 | display: flex;
722 | column-gap: 1.25rem;
723 | }
724 |
725 | .footer__social-link{
726 | color: var(--first-color);
727 | font-size: 1.25rem;
728 | transition: color .3s, transform .3s;
729 | }
730 |
731 | .footer__social-link:hover{
732 | color: var(--first-color-alt);
733 | transform: translateY(-.25rem);
734 | }
735 |
736 | .footer__tree-1,
737 | .footer__tree-2{
738 | width: 150px;
739 | position: absolute;
740 | }
741 |
742 | .footer__tree-1{
743 | top: 5rem;
744 | right: 2rem;
745 | }
746 |
747 | .footer__tree-2{
748 | left: -1.5rem;
749 | bottom: -.5rem;
750 | }
751 |
752 | .footer__copy{
753 | position: relative;
754 | display: block;
755 | margin-top: 8rem;
756 | font-size: var(--smaller-font-size);
757 | font-family: var(--body-font);
758 | text-align: center;
759 | color: var(--text-color-light);
760 | }
761 |
762 | .footer .shape__small{
763 | right: -7rem;
764 | top: 15rem;
765 | }
766 |
767 | .footer .shape__big{
768 | left: -8rem;
769 | bottom: -5rem;
770 | }
771 |
772 | ::-webkit-scrollbar{
773 | width: .6rem;
774 | border-radius: .5rem;
775 | background-color: hsl(22, 8%, 10%);
776 | }
777 |
778 | ::-webkit-scrollbar-thumb{
779 | border-radius: .5rem;
780 | background-color: hsl(22, 8%, 15%);
781 | }
782 |
783 | ::-webkit-scrollbar-thumb:hover{
784 | background-color: hsl(22, 8%, 25%);
785 | }
786 |
787 | .scrollup{
788 | position: fixed;
789 | right: 1rem;
790 | bottom: -50%;
791 | color: var(--first-color);
792 | font-size: 1.1rem;
793 | background-color: var(--container-color);
794 | box-shadow: 0 4px 8px hsla(22, 10%, 2%, .6);
795 | padding: .45rem;
796 | border-radius: .35rem;
797 | display: inline-flex;
798 | z-index: var(--z-tooltip);
799 | transition: bottom .3s, transform .3s;
800 | }
801 |
802 | .scrollup:hover{
803 | transform: translateY(-.25rem);
804 | }
805 |
806 | .show-scroll{
807 | bottom: 3rem;
808 | }
809 |
810 | @media (max-width: 340px){
811 | .container{
812 | margin-inline: 1rem;
813 | }
814 |
815 | .home__title{
816 | font-size: 1.5rem;
817 | }
818 |
819 | .home__tree-1{
820 | left: -4rem;
821 | }
822 |
823 | .home__tree-2{
824 | right: -4rem;
825 | }
826 |
827 | .items__container{
828 | grid-template-columns: 180px;
829 | }
830 |
831 | .party{
832 | width: 200px;
833 | }
834 |
835 | .footer__content{
836 | gap: 2.5rem;
837 | }
838 | .mobile {
839 | display: none;
840 | }
841 | }
842 |
843 | @media screen and (min-width: 576px){
844 | .home__container,
845 | .about__container,
846 | .party__container{
847 | grid-template-columns: .6fr;
848 | justify-content: center;
849 | }
850 |
851 | .home__tree-1,
852 | .home__tree-2{
853 | width: 200px;
854 | }
855 |
856 | .items__container{
857 | grid-template-columns: repeat(2, 200px);
858 | }
859 |
860 | .footer__content{
861 | grid-template-columns: repeat(3, max-content);
862 | }
863 | }
864 |
865 | @media screen and (min-width: 767px){
866 | .section{
867 | padding-block: 7rem 1.5rem;
868 | }
869 |
870 | .section__title{
871 | margin-bottom: 4rem;
872 | }
873 |
874 | .nav{
875 | height: calc(var(--header-height) + 1.5rem);
876 | }
877 |
878 | .nav__toggle,
879 | .nav__close,
880 | .nav__img{
881 | display: none;
882 | }
883 |
884 | .nav__list{
885 | flex-direction: row;
886 | column-gap: 4rem;
887 | }
888 |
889 | .category__container{
890 | grid-template-columns: repeat(2, 228px);
891 | column-gap: 4rem;
892 | }
893 |
894 | .footer__content{
895 | grid-template-columns: repeat(4, max-content);
896 | }
897 | }
898 |
899 | @media screen and (min-width: 1024px){
900 | .shape__small,
901 | .shape__big{
902 | filter: blur(132px);
903 | opacity: 0.5;
904 | }
905 |
906 | .shape__small{
907 | width: 350px;
908 | height: 350px;
909 | }
910 |
911 | .shape__big{
912 | width: 450px;
913 | height: 450px;
914 | }
915 |
916 | .home__title-img-1,
917 | .home__title-img-2{
918 | width: 60px;
919 | }
920 |
921 | .home__title-img-2{
922 | bottom: 5.75rem;
923 | }
924 | .home__description{
925 | padding: 0 7.5rem;
926 | }
927 |
928 | .home__tree-1,
929 | .home__tree-2{
930 | width: 300px;
931 | top: 14rem;
932 | }
933 |
934 | .home__img{
935 | width: 500px;
936 | }
937 |
938 | .category__container{
939 | grid-template-columns: repeat(3, 254px);
940 | }
941 |
942 | .category__card{
943 | padding: 6rem 2.5rem 2rem;
944 | }
945 |
946 | .category__img{
947 | width: 150px;
948 | }
949 |
950 | .category__star{
951 | right: 1rem;
952 | }
953 |
954 | .category .shape__small{
955 | top: 10rem;
956 | left: -12rem;
957 | }
958 |
959 | .about__img{
960 | order: -1;
961 | width: 500px;
962 | }
963 |
964 | .about__container{
965 | padding-top: 2rem;
966 | grid-template-columns: max-content .9fr;
967 | column-gap: 7rem;
968 | align-items: center;
969 | }
970 |
971 | .about .shape__big{
972 | bottom: -12rem;
973 | }
974 |
975 | .about__data,
976 | .party__data{
977 | text-align: initial;
978 | }
979 |
980 | .about__container .section__title,
981 | .party__container .section__title{
982 | text-align: initial;
983 | margin-bottom: 1.5rem;
984 | }
985 |
986 | .about__description,
987 | .party__container{
988 | margin-bottom: 2.5rem;
989 | font-family: var(--body-font);
990 | }
991 |
992 | .items__container{
993 | grid-template-columns: repeat(3, 200px);
994 | gap: 6rem 3.5rem;
995 | }
996 |
997 | .items__card{
998 | padding: 6rem 1rem 1.5rem;
999 | }
1000 |
1001 | .items__img{
1002 | width: 130px;
1003 | }
1004 |
1005 | .items__name{
1006 | font-size: var(--h3-font-size);
1007 | }
1008 |
1009 | .items__button i{
1010 | font-size: 1.5rem;
1011 | }
1012 |
1013 | .items .shape__big{
1014 | bottom: -12rem;
1015 | }
1016 |
1017 | .party__container{
1018 | padding-top: 5rem;
1019 | grid-template-columns: .7fr max-content;
1020 | column-gap: 8rem;
1021 | align-items: center;
1022 | }
1023 |
1024 | .party__img{
1025 | width: 400px;
1026 | }
1027 |
1028 | .party__star-1,
1029 | .party__star-2{
1030 | width: 100px;
1031 | }
1032 |
1033 | .party__star-1{
1034 | top: -5rem;
1035 | left: -5rem;
1036 | }
1037 |
1038 | .party__star-2{
1039 | top: -3rem;
1040 | left: 3rem;
1041 | }
1042 |
1043 | .footer__container{
1044 | grid-template-columns: repeat(2, max-content);
1045 | justify-content: space-between;
1046 | }
1047 |
1048 | .footer__logo{
1049 | font-size: var(--h3-font-size);
1050 | font-family: var(--body-font);
1051 | margin-bottom: 1.5rem;
1052 | }
1053 |
1054 | .footer__content{
1055 | column-gap: 5rem;
1056 | }
1057 |
1058 | .footer__link{
1059 | font-size: var(--normal-font-size);
1060 | }
1061 |
1062 | .footer__social{
1063 | column-gap: 1.5rem;
1064 | }
1065 |
1066 | .footer__social-link{
1067 | font-size: 1.5rem;
1068 | }
1069 |
1070 | .footer__copy{
1071 | margin: 10rem 0 4rem;
1072 | }
1073 |
1074 | .footer__tree-1,
1075 | .footer__tree-2{
1076 | width: 250px;
1077 | }
1078 |
1079 | .footer__tree-1{
1080 | top: initial;
1081 | bottom: 8rem;
1082 | right: 2rem;
1083 | }
1084 |
1085 | .footer__tree-2{
1086 | bottom: -1.5rem;
1087 | }
1088 |
1089 | .footer .shape__big{
1090 | bottom: -16rem;
1091 | }
1092 |
1093 | .scrollup{
1094 | right: 3rem;
1095 | }
1096 | }
1097 |
1098 | @media screen and (min-width: 1072px){
1099 | .container{
1100 | margin-inline: auto;
1101 | }
1102 | }
1103 |
1104 | @media screen and (min-width: 1248px) {
1105 | .home__tree-1,
1106 | .home__tree-2{
1107 | width: 450px;
1108 | }
1109 |
1110 | .home__img{
1111 | width: 600px;
1112 | margin-top: 3rem;
1113 | }
1114 |
1115 | .footer__tree-2{
1116 | left: 10%;
1117 | }
1118 | }
1119 | @media screen and (min-width: 2048px){
1120 |
1121 | .home{
1122 | position: relative;
1123 | max-width: 1400px;
1124 | overflow: hidden;
1125 | }
1126 |
1127 | .home__tree-1,
1128 | .home__tree-2{
1129 | top: 5rem;
1130 | }
1131 |
1132 | .footer__tree-1,
1133 | .footer__tree-2{
1134 | width: 300px;
1135 | }
1136 | }
1137 |
--------------------------------------------------------------------------------
/scrollreveal.js:
--------------------------------------------------------------------------------
1 | var ScrollReveal = function() {
2 | "use strict";
3 | var r = {
4 | delay: 0,
5 | distance: "0",
6 | duration: 600,
7 | easing: "cubic-bezier(0.5, 0, 0, 1)",
8 | interval: 0,
9 | opacity: 0,
10 | origin: "bottom",
11 | rotate: {
12 | x: 0,
13 | y: 0,
14 | z: 0
15 | },
16 | scale: 1,
17 | cleanup: !1,
18 | container: document.documentElement,
19 | desktop: !0,
20 | mobile: !0,
21 | reset: !1,
22 | useDelay: "always",
23 | viewFactor: 0,
24 | viewOffset: {
25 | top: 0,
26 | right: 0,
27 | bottom: 0,
28 | left: 0
29 | },
30 | afterReset: function() {},
31 | afterReveal: function() {},
32 | beforeReset: function() {},
33 | beforeReveal: function() {}
34 | };
35 | var n = {
36 | success: function() {
37 | document.documentElement.classList.add("sr"), document.body ? document.body.style.height = "100%" : document.addEventListener("DOMContentLoaded", function() {
38 | document.body.style.height = "100%"
39 | })
40 | },
41 | failure: function() {
42 | return document.documentElement.classList.remove("sr"), {
43 | clean: function() {},
44 | destroy: function() {},
45 | reveal: function() {},
46 | sync: function() {},
47 | get noop() {
48 | return !0
49 | }
50 | }
51 | }
52 | };
53 |
54 | function o(e) {
55 | return "object" == typeof window.Node ? e instanceof window.Node : null !== e && "object" == typeof e && "number" == typeof e.nodeType && "string" == typeof e.nodeName
56 | }
57 |
58 | function u(e, t) {
59 | if (void 0 === t && (t = document), e instanceof Array) return e.filter(o);
60 | if (o(e)) return [e];
61 | 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);
62 | var n, i;
63 | if ("string" == typeof e) try {
64 | var r = t.querySelectorAll(e);
65 | return Array.prototype.slice.call(r)
66 | } catch (e) {
67 | return []
68 | }
69 | return []
70 | }
71 |
72 | function s(e) {
73 | return null !== e && e instanceof Object && (e.constructor === Object || "[object Object]" === Object.prototype.toString.call(e))
74 | }
75 |
76 | function f(n, i) {
77 | if (s(n)) return Object.keys(n).forEach(function(e) {
78 | return i(n[e], e, n)
79 | });
80 | if (n instanceof Array) return n.forEach(function(e, t) {
81 | return i(e, t, n)
82 | });
83 | throw new TypeError("Expected either an array or object literal.")
84 | }
85 |
86 | function h(e) {
87 | for (var t = [], n = arguments.length - 1; 0 < n--;) t[n] = arguments[n + 1];
88 | if (this.constructor.debug && console) {
89 | var i = "%cScrollReveal: " + e;
90 | t.forEach(function(e) {
91 | return i += "\n — " + e
92 | }), console.log(i, "color: #ea654b;")
93 | }
94 | }
95 |
96 | function t() {
97 | var n = this,
98 | i = {
99 | active: [],
100 | stale: []
101 | },
102 | t = {
103 | active: [],
104 | stale: []
105 | },
106 | r = {
107 | active: [],
108 | stale: []
109 | };
110 | try {
111 | f(u("[data-sr-id]"), function(e) {
112 | var t = parseInt(e.getAttribute("data-sr-id"));
113 | i.active.push(t)
114 | })
115 | } catch (e) {
116 | throw e
117 | }
118 | f(this.store.elements, function(e) {
119 | -1 === i.active.indexOf(e.id) && i.stale.push(e.id)
120 | }), f(i.stale, function(e) {
121 | return delete n.store.elements[e]
122 | }), f(this.store.elements, function(e) {
123 | -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)
124 | }), f(this.store.containers, function(e) {
125 | -1 === r.active.indexOf(e.id) && r.stale.push(e.id)
126 | }), f(r.stale, function(e) {
127 | var t = n.store.containers[e].node;
128 | t.removeEventListener("scroll", n.delegate), t.removeEventListener("resize", n.delegate), delete n.store.containers[e]
129 | }), f(this.store.sequences, function(e) {
130 | -1 === t.active.indexOf(e.id) && t.stale.push(e.id)
131 | }), f(t.stale, function(e) {
132 | return delete n.store.sequences[e]
133 | })
134 | }
135 |
136 | function N(e) {
137 | if (e.constructor !== Array) throw new TypeError("Expected array.");
138 | if (16 === e.length) return e;
139 | if (6 !== e.length) throw new RangeError("Expected array with either 6 or 16 values.");
140 | var t = z();
141 | 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
142 | }
143 |
144 | function z() {
145 | for (var e = [], t = 0; t < 16; t++) t % 5 == 0 ? e.push(1) : e.push(0);
146 | return e
147 | }
148 |
149 | function F(e, t) {
150 | for (var n = N(e), i = N(t), r = [], o = 0; o < 4; o++)
151 | for (var s = [n[o], n[o + 4], n[o + 8], n[o + 12]], a = 0; a < 4; a++) {
152 | var c = 4 * a,
153 | l = [i[c], i[c + 1], i[c + 2], i[c + 3]],
154 | d = s[0] * l[0] + s[1] * l[1] + s[2] * l[2] + s[3] * l[3];
155 | r[o + c] = d
156 | }
157 | return r
158 | }
159 |
160 | function D(e, t) {
161 | var n = z();
162 | return n[0] = e, n[5] = "number" == typeof t ? t : e, n
163 | }
164 | var S = function() {
165 | var n = {},
166 | i = document.documentElement.style;
167 |
168 | function e(e, t) {
169 | if (void 0 === t && (t = i), e && "string" == typeof e) {
170 | if (n[e]) return n[e];
171 | if ("string" == typeof t[e]) return n[e] = e;
172 | if ("string" == typeof t["-webkit-" + e]) return n[e] = "-webkit-" + e;
173 | throw new RangeError('Unable to find "' + e + '" style property.')
174 | }
175 | throw new TypeError("Expected a string.")
176 | }
177 | return e.clearCache = function() {
178 | return n = {}
179 | }, e
180 | }();
181 |
182 | function p(e) {
183 | var t = window.getComputedStyle(e.node),
184 | n = t.position,
185 | i = e.config,
186 | r = {},
187 | o = (e.node.getAttribute("style") || "").match(/[\w-]+\s*:\s*[^;]+\s*/gi) || [];
188 | r.computed = o ? o.map(function(e) {
189 | return e.trim()
190 | }).join("; ") + ";" : "", r.generated = o.some(function(e) {
191 | return e.match(/visibility\s?:\s?visible/i)
192 | }) ? r.computed : o.concat(["visibility: visible"]).map(function(e) {
193 | return e.trim()
194 | }).join("; ") + ";";
195 | var s, a, c, l, d, u, f, h, p, m, y, v, g, b = parseFloat(t.opacity),
196 | w = isNaN(parseFloat(i.opacity)) ? parseFloat(t.opacity) : parseFloat(i.opacity),
197 | E = {
198 | computed: b !== w ? "opacity: " + b + ";" : "",
199 | generated: b !== w ? "opacity: " + w + ";" : ""
200 | },
201 | j = [];
202 | if (parseFloat(i.distance)) {
203 | var T = "top" === i.origin || "bottom" === i.origin ? "Y" : "X",
204 | k = i.distance;
205 | "top" !== i.origin && "left" !== i.origin || (k = /^-/.test(k) ? k.substr(1) : "-" + k);
206 | var O = k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),
207 | x = O[0];
208 | switch (O[1]) {
209 | case "em":
210 | k = parseInt(t.fontSize) * x;
211 | break;
212 | case "px":
213 | k = x;
214 | break;
215 | case "%":
216 | k = "Y" === T ? e.node.getBoundingClientRect().height * x / 100 : e.node.getBoundingClientRect().width * x / 100;
217 | break;
218 | default:
219 | throw new RangeError("Unrecognized or missing distance unit.")
220 | }
221 | "Y" === T ? j.push((c = k, (l = z())[13] = c, l)) : j.push((s = k, (a = z())[12] = s, a))
222 | }
223 | 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)));
224 | var R = {};
225 | if (j.length) {
226 | R.property = S("transform"), R.computed = {
227 | raw: t[R.property],
228 | matrix: function(e) {
229 | if ("string" == typeof e) {
230 | var t = e.match(/matrix(3d)?\(([^)]+)\)/);
231 | if (t) return N(t[2].split(", ").map(parseFloat))
232 | }
233 | return z()
234 | }(t[R.property])
235 | }, j.unshift(R.computed.matrix);
236 | var q = j.reduce(F);
237 | R.generated = {
238 | initial: R.property + ": matrix3d(" + q.join(", ") + ");",
239 | final: R.property + ": matrix3d(" + R.computed.matrix.join(", ") + ");"
240 | }
241 | } else R.generated = {
242 | initial: "",
243 | final: ""
244 | };
245 | var A = {};
246 | if (E.generated || R.generated.initial) {
247 | A.property = S("transition"), A.computed = t[A.property], A.fragments = [];
248 | var P = i.delay,
249 | L = i.duration,
250 | M = i.easing;
251 | E.generated && A.fragments.push({
252 | delayed: "opacity " + L / 1e3 + "s " + M + " " + P / 1e3 + "s",
253 | instant: "opacity " + L / 1e3 + "s " + M + " 0s"
254 | }), R.generated.initial && A.fragments.push({
255 | delayed: R.property + " " + L / 1e3 + "s " + M + " " + P / 1e3 + "s",
256 | instant: R.property + " " + L / 1e3 + "s " + M + " 0s"
257 | }), A.computed && !A.computed.match(/all 0s|none 0s/) && A.fragments.unshift({
258 | delayed: A.computed,
259 | instant: A.computed
260 | });
261 | var I = A.fragments.reduce(function(e, t, n) {
262 | return e.delayed += 0 === n ? t.delayed : ", " + t.delayed, e.instant += 0 === n ? t.instant : ", " + t.instant, e
263 | }, {
264 | delayed: "",
265 | instant: ""
266 | });
267 | A.generated = {
268 | delayed: A.property + ": " + I.delayed + ";",
269 | instant: A.property + ": " + I.instant + ";"
270 | }
271 | } else A.generated = {
272 | delayed: "",
273 | instant: ""
274 | };
275 | return {
276 | inline: r,
277 | opacity: E,
278 | position: n,
279 | transform: R,
280 | transition: A
281 | }
282 | }
283 |
284 | function m(r, e) {
285 | e.split(";").forEach(function(e) {
286 | var t = e.split(":"),
287 | n = t[0],
288 | i = t.slice(1);
289 | n && i && (r.style[n.trim()] = i.join(":"))
290 | })
291 | }
292 |
293 | function y(e) {
294 | var i, r = this;
295 | try {
296 | f(u(e), function(e) {
297 | var t = e.getAttribute("data-sr-id");
298 | if (null !== t) {
299 | i = !0;
300 | var n = r.store.elements[t];
301 | n.callbackTimer && window.clearTimeout(n.callbackTimer.clock), m(n.node, n.styles.inline.generated), e.removeAttribute("data-sr-id"), delete r.store.elements[t]
302 | }
303 | })
304 | } catch (e) {
305 | return h.call(this, "Clean failed.", e.message)
306 | }
307 | if (i) try {
308 | t.call(this)
309 | } catch (e) {
310 | return h.call(this, "Clean failed.", e.message)
311 | }
312 | }
313 |
314 | function v(n) {
315 | for (var e = [], t = arguments.length - 1; 0 < t--;) e[t] = arguments[t + 1];
316 | if (s(n)) return f(e, function(e) {
317 | f(e, function(e, t) {
318 | s(e) ? (n[t] && s(n[t]) || (n[t] = {}), v(n[t], e)) : n[t] = e
319 | })
320 | }), n;
321 | throw new TypeError("Target must be an object literal.")
322 | }
323 |
324 | function g(e) {
325 | return void 0 === e && (e = navigator.userAgent), /Android|iPhone|iPad|iPod/i.test(e)
326 | }
327 | var e, b = (e = 0, function() {
328 | return e++
329 | });
330 |
331 | function w() {
332 | var n = this;
333 | t.call(this), f(this.store.elements, function(e) {
334 | var t = [e.styles.inline.generated];
335 | 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) {
336 | return "" !== e
337 | }).join(" "))
338 | }), f(this.store.containers, function(e) {
339 | var t = e.node === document.documentElement ? window : e.node;
340 | t.addEventListener("scroll", n.delegate), t.addEventListener("resize", n.delegate)
341 | }), this.delegate(), this.initTimeout = null
342 | }
343 |
344 | function c(e, t) {
345 | void 0 === t && (t = {});
346 | var n = t.pristine || this.pristine,
347 | i = "always" === e.config.useDelay || "onload" === e.config.useDelay && n || "once" === e.config.useDelay && !e.seen,
348 | r = e.visible && !e.revealed,
349 | o = !e.visible && e.revealed && e.config.reset;
350 | return t.reveal || r ? function(e, t) {
351 | var n = [e.styles.inline.generated, e.styles.opacity.computed, e.styles.transform.generated.final];
352 | t ? n.push(e.styles.transition.generated.delayed) : n.push(e.styles.transition.generated.instant);
353 | e.revealed = e.seen = !0, m(e.node, n.filter(function(e) {
354 | return "" !== e
355 | }).join(" ")), a.call(this, e, t)
356 | }.call(this, e, i) : t.reset || o ? function(e) {
357 | var t = [e.styles.inline.generated, e.styles.opacity.generated, e.styles.transform.generated.initial, e.styles.transition.generated.instant];
358 | e.revealed = !1, m(e.node, t.filter(function(e) {
359 | return "" !== e
360 | }).join(" ")), a.call(this, e)
361 | }.call(this, e) : void 0
362 | }
363 |
364 | function a(e, t) {
365 | var n = this,
366 | i = t ? e.config.duration + e.config.delay : e.config.duration,
367 | r = e.revealed ? e.config.beforeReveal : e.config.beforeReset,
368 | o = e.revealed ? e.config.afterReveal : e.config.afterReset,
369 | s = 0;
370 | e.callbackTimer && (s = Date.now() - e.callbackTimer.start, window.clearTimeout(e.callbackTimer.clock)), r(e.node), e.callbackTimer = {
371 | start: Date.now(),
372 | clock: window.setTimeout(function() {
373 | o(e.node), e.callbackTimer = null, e.revealed && !e.config.reset && e.config.cleanup && y.call(n, e.node)
374 | }, i - s)
375 | }
376 | }
377 |
378 | function l(e, t) {
379 | if (void 0 === t && (t = this.pristine), !e.visible && e.revealed && e.config.reset) return c.call(this, e, {
380 | reset: !0
381 | });
382 | var n = this.store.sequences[e.sequence.id],
383 | i = e.sequence.index;
384 | if (n) {
385 | var r = new d(n, "visible", this.store),
386 | o = new d(n, "revealed", this.store);
387 | if (n.models = {
388 | visible: r,
389 | revealed: o
390 | }, !o.body.length) {
391 | var s = n.members[r.body[0]],
392 | a = this.store.elements[s];
393 | 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, {
394 | reveal: !0,
395 | pristine: t
396 | })
397 | }
398 | 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, {
399 | reveal: !0,
400 | pristine: t
401 | });
402 | 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, {
403 | reveal: !0,
404 | pristine: t
405 | })
406 | }
407 | }
408 |
409 | function E(e) {
410 | var t = Math.abs(e);
411 | if (isNaN(t)) throw new RangeError("Invalid sequence interval.");
412 | this.id = b(), this.interval = Math.max(t, 16), this.members = [], this.models = {}, this.blocked = {
413 | head: !1,
414 | foot: !1
415 | }
416 | }
417 |
418 | function d(e, i, r) {
419 | var o = this;
420 | this.head = [], this.body = [], this.foot = [], f(e.members, function(e, t) {
421 | var n = r.elements[e];
422 | n && n[i] && o.body.push(t)
423 | }), this.body.length && f(e.members, function(e, t) {
424 | var n = r.elements[e];
425 | n && !n[i] && (t < o.body[0] ? o.head.push(t) : o.foot.push(t))
426 | })
427 | }
428 |
429 | function j(e, t, n, i) {
430 | var r = this,
431 | o = ["head", null, "foot"][1 + n],
432 | s = e.members[t + n],
433 | a = this.store.elements[s];
434 | e.blocked[o] = !0, setTimeout(function() {
435 | e.blocked[o] = !1, a && l.call(r, a, i)
436 | }, e.interval)
437 | }
438 |
439 | function i(e, a, t) {
440 | var c = this;
441 | void 0 === a && (a = {}), void 0 === t && (t = !1);
442 | var l, d = [],
443 | n = a.interval || r.interval;
444 | try {
445 | n && (l = new E(n));
446 | var i = u(e);
447 | if (!i.length) throw new Error("Invalid reveal target.");
448 | f(i.reduce(function(e, t) {
449 | var n = {},
450 | i = t.getAttribute("data-sr-id");
451 | 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);
452 | var r = v({}, n.config || c.defaults, a);
453 | if (!r.mobile && g() || !r.desktop && !g()) return i && y.call(c, n), e;
454 | var o, s = u(r.container)[0];
455 | if (!s) throw new Error("Invalid container.");
456 | return s.contains(t) && (null === (o = function(t) {
457 | var e = [],
458 | n = arguments.length - 1;
459 | for (; 0 < n--;) e[n] = arguments[n + 1];
460 | var i = null;
461 | return f(e, function(e) {
462 | f(e, function(e) {
463 | null === i && e.node === t && (i = e.id)
464 | })
465 | }), i
466 | }(s, d, c.store.containers)) && (o = b(), d.push({
467 | id: o,
468 | node: s
469 | })), n.config = r, n.containerId = o, n.styles = p(n), l && (n.sequence = {
470 | id: l.id,
471 | index: l.members.length
472 | }, l.members.push(n.id)), e.push(n)), e
473 | }, []), function(e) {
474 | (c.store.elements[e.id] = e).node.setAttribute("data-sr-id", e.id)
475 | })
476 | } catch (e) {
477 | return h.call(this, "Reveal failed.", e.message)
478 | }
479 | f(d, function(e) {
480 | c.store.containers[e.id] = {
481 | id: e.id,
482 | node: e.node
483 | }
484 | }), l && (this.store.sequences[l.id] = l), !0 !== t && (this.store.history.push({
485 | target: e,
486 | options: a
487 | }), this.initTimeout && window.clearTimeout(this.initTimeout), this.initTimeout = window.setTimeout(w.bind(this), 0))
488 | }
489 | var T, k = Math.sign || function(e) {
490 | return (0 < e) - (e < 0) || +e
491 | },
492 | O = (T = Date.now(), function(e) {
493 | var t = Date.now();
494 | 16 < t - T ? e(T = t) : setTimeout(function() {
495 | return O(e)
496 | }, 0)
497 | }),
498 | x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || O;
499 |
500 | function R(e, t) {
501 | 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;);
502 | return {
503 | bounds: {
504 | top: r,
505 | right: o + i,
506 | bottom: r + n,
507 | left: o
508 | },
509 | height: n,
510 | width: i
511 | }
512 | }
513 |
514 | function q(e, t) {
515 | var i = this;
516 | void 0 === e && (e = {
517 | type: "init"
518 | }), void 0 === t && (t = this.store.elements), x(function() {
519 | var n = "init" === e.type || "resize" === e.type;
520 | f(i.store.containers, function(e) {
521 | n && (e.geometry = R.call(i, e, !0));
522 | var t = function(e) {
523 | var t, n;
524 | return n = e.node === document.documentElement ? (t = window.pageYOffset, window.pageXOffset) : (t = e.node.scrollTop, e.node.scrollLeft), {
525 | top: t,
526 | left: n
527 | }
528 | }.call(i, e);
529 | e.scroll && (e.direction = {
530 | x: k(t.left - e.scroll.left),
531 | y: k(t.top - e.scroll.top)
532 | }), e.scroll = t
533 | }), f(t, function(e) {
534 | (n || void 0 === e.geometry) && (e.geometry = R.call(i, e)), e.visible = function(e) {
535 | void 0 === e && (e = {});
536 | var t = this.store.containers[e.containerId];
537 | if (t) {
538 | var n = Math.max(0, Math.min(1, e.config.viewFactor)),
539 | i = e.config.viewOffset,
540 | r = e.geometry.bounds.top + e.geometry.height * n,
541 | o = e.geometry.bounds.right - e.geometry.width * n,
542 | s = e.geometry.bounds.bottom - e.geometry.height * n,
543 | a = e.geometry.bounds.left + e.geometry.width * n,
544 | c = t.geometry.bounds.top + t.scroll.top + i.top,
545 | l = t.geometry.bounds.right + t.scroll.left - i.right,
546 | d = t.geometry.bounds.bottom + t.scroll.top - i.bottom,
547 | u = t.geometry.bounds.left + t.scroll.left + i.left;
548 | return r < d && u < o && c < s && a < l || "fixed" === e.styles.position
549 | }
550 | }.call(i, e)
551 | }), f(t, function(e) {
552 | e.sequence ? l.call(i, e) : c.call(i, e)
553 | }), i.pristine = !1
554 | })
555 | }
556 | var A, P, L, M, I, C, W, Y, $ = "4.0.9";
557 |
558 | function H(e) {
559 | var t;
560 | if (void 0 === e && (e = {}), void 0 === this || Object.getPrototypeOf(this) !== H.prototype) return new H(e);
561 | if (!H.isSupported()) return h.call(this, "Instantiation failed.", "This browser is not supported."), n.failure();
562 | try {
563 | t = v({}, C || r, e)
564 | } catch (e) {
565 | return h.call(this, "Invalid configuration.", e.message), n.failure()
566 | }
567 | try {
568 | if (!u(t.container)[0]) throw new Error("Invalid container.")
569 | } catch (e) {
570 | return h.call(this, e.message), n.failure()
571 | }
572 | 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 = {
573 | containers: {},
574 | elements: {},
575 | history: [],
576 | sequences: {}
577 | }, this.pristine = !0, A = A || q.bind(this), P = P || function() {
578 | var n = this;
579 | f(this.store.elements, function(e) {
580 | m(e.node, e.styles.inline.generated), e.node.removeAttribute("data-sr-id")
581 | }), f(this.store.containers, function(e) {
582 | var t = e.node === document.documentElement ? window : e.node;
583 | t.removeEventListener("scroll", n.delegate), t.removeEventListener("resize", n.delegate)
584 | }), this.store = {
585 | containers: {},
586 | elements: {},
587 | history: [],
588 | sequences: {}
589 | }
590 | }.bind(this), L = L || i.bind(this), M = M || y.bind(this), I = I || function() {
591 | var t = this;
592 | f(this.store.history, function(e) {
593 | i.call(t, e.target, e.options, !0)
594 | }), w.call(this)
595 | }.bind(this), Object.defineProperty(this, "delegate", {
596 | get: function() {
597 | return A
598 | }
599 | }), Object.defineProperty(this, "destroy", {
600 | get: function() {
601 | return P
602 | }
603 | }), Object.defineProperty(this, "reveal", {
604 | get: function() {
605 | return L
606 | }
607 | }), Object.defineProperty(this, "clean", {
608 | get: function() {
609 | return M
610 | }
611 | }), Object.defineProperty(this, "sync", {
612 | get: function() {
613 | return I
614 | }
615 | }), Object.defineProperty(this, "defaults", {
616 | get: function() {
617 | return C
618 | }
619 | }), Object.defineProperty(this, "version", {
620 | get: function() {
621 | return $
622 | }
623 | }), Object.defineProperty(this, "noop", {
624 | get: function() {
625 | return !1
626 | }
627 | }), Y || (Y = this))
628 | }
629 | return H.isSupported = function() {
630 | return ("transform" in (t = document.documentElement.style) || "WebkitTransform" in t) && ("transition" in (e = document.documentElement.style) || "WebkitTransition" in e);
631 | var e, t
632 | }, Object.defineProperty(H, "debug", {
633 | get: function() {
634 | return W || !1
635 | },
636 | set: function(e) {
637 | return W = "boolean" == typeof e ? e : W
638 | }
639 | }), H(), H
640 | }();
--------------------------------------------------------------------------------
15 | 
16 | 
16 | 
82 | 
87 | 
106 | 
121 | 
133 | 
145 | 
166 | 
50 | 
33 | 
172 | 
178 | 
188 | 
198 | 
204 | 
210 | 
216 |