From b4c1b5258f5d550886f62edc369e4341d3396f69 Mon Sep 17 00:00:00 2001 From: lobinhodev Date: Wed, 16 Feb 2022 12:10:47 -0300 Subject: [PATCH 01/12] Adicionando Dark Mode --- index.html | 567 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 390 insertions(+), 177 deletions(-) diff --git a/index.html b/index.html index d0fc434..3bcff0c 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,27 @@ - + - - + + - + - + - - + + - - + + Responsive Halloween Website @@ -23,14 +30,20 @@ @@ -71,25 +83,52 @@
- +
- +
-

The Labu “Reiza”

- The Living Pumpkin +

+ The Labu “Reiza” +

+ The Living Pumpkin
- +
-

#1 Top Scariest Ghost

-

UOOOO
TRICK OR
TREAT!!

-

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

+ #1 Top Scariest Ghost +

+

+ UOOOO
+ TRICK OR
+ TREAT!! +

+

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

Book Now - Track Record + Track Record +
@@ -99,25 +138,52 @@

UOOOO
TRICK OR
TREAT!!

- +
- +
-

Adino & Grahami

- No words can describe them +

+ Adino & Grahami +

+ No words can describe them
- +
-

#2 top Best duo

-

BRING BACK
MY COTTON
CANDY

-

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

+ #2 top Best duo +

+

+ BRING BACK
+ MY COTTON
+ CANDY +

+

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

Book Now - Track Record + Track Record +
@@ -127,25 +193,53 @@

BRING BACK
MY COTTON
CANDY

- +
- +
-

Captain Sem

- Veteran Spooky Ghost +

+ Captain Sem +

+ Veteran Spooky Ghost
- +
-

#3 Top Scariest Ghost

-

RESPAWN
THE SPOOKY
SKULL

-

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

+ #3 Top Scariest Ghost +

+

+ RESPAWN
+ THE SPOOKY
+ SKULL +

+

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

Book Now - Track Record + Track Record +
@@ -154,28 +248,49 @@

RESPAWN
THE SPOOKY
SKULL

- +
-

Favorite Scare
Category

+

+ Favorite Scare
+ Category +

- +

Ghosts

-

Choose the ghosts, the scariest there are.

+

+ Choose the ghosts, the scariest there are. +

- +

Pumpkins

-

You look at the scariest pumpkins there is.

+

+ You look at the scariest pumpkins there is. +

- +

Witch Hat

-

Pick the most stylish witch hats out there.

+

+ Pick the most stylish witch hats out there. +

@@ -184,15 +299,25 @@

Witch Hat

-

About Halloween
Night

-

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

+ About Halloween
+ Night +

+

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

Know more
- +
@@ -202,76 +327,107 @@

Trick Or Treat

- +

Toffee

Candy $11.99
- +

Bone

Accessory $8.99
- +

Scarecrow

Accessory $15.99
- +

Candy Cane

Candy $7.99
- +

Pumpkin

Candy $19.99
- +

Ghost

Accessory $17.99
- +
-

50% Discount
On New Products

+

+ 50% Discount
+ On New Products +

Go to new
- +
@@ -284,97 +440,123 @@

New Arrivals

New
- +

Haunted House

Accessory - +
$14.99 $29.99
- +
New
- +

Halloween Candle

Accessory - +
$11.99 $21.99
- +
New
- +

Witch Hat

Accessory - +
$4.99 $9.99
- +
New
- +

Rip

Accessory - +
$24.99 $44.99
- +
New
- -

Terrifying Crystal Ball

+ +

+ Terrifying Crystal Ball +

Accessory - +
$5.99 $12.99
- +
New
- +

Witch Broom

Accessory - +
$7.99 $14.99
@@ -391,106 +573,137 @@

Our Newsletter

- + + + - - - - + - \ No newline at end of file + From c93fa2d6f83e207f909511f8d8659dbf58fdb2f8 Mon Sep 17 00:00:00 2001 From: lobinhodev Date: Wed, 16 Feb 2022 12:10:59 -0300 Subject: [PATCH 02/12] Adicionando Dark Mode --- assets/css/styles.css | 1708 +++++++++++++++++++++++------------------ assets/js/main.js | 176 +++-- index.html | 59 +- 3 files changed, 1114 insertions(+), 829 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index fc30031..1875313 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,1006 +1,1222 @@ -/*=============== GOOGLE FONTS ===============*/ +/* =============== Google Fonts =============== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap'); -/*=============== VARIABLES CSS ===============*/ -:root { - --header-height: 3.5rem; - - /*========== Colors ==========*/ - --hue: 14; - --first-color: hsl(var(--hue), 91%, 54%); - --first-color-alt: hsl(var(--hue), 91%, 50%); - --title-color: hsl(var(--hue), 4%, 100%); - --text-color: hsl(var(--hue), 4%, 85%); - --text-color-light: hsl(var(--hue), 4%, 55%); - - /*Green gradient*/ - --body-color: linear-gradient(90deg, hsl(104, 28%, 40%) 0%, hsl(58, 28%, 40%) 100%); - --container-color: linear-gradient(136deg, hsl(104, 28%, 35%) 0%, hsl(58, 28%, 35%) 100%); - - /*Red gradient*/ - /* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%); - --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */ +/* =============== Font Awesome =============== */ +@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'); - /*Black solid*/ - /* --body-color: hsl(30, 8%, 8%); - --container-color: hsl(30, 8%, 10%); */ - - /*========== Font and typography ==========*/ - --body-font: 'Poppins', sans-serif; - --biggest-font-size: 2rem; - --h1-font-size: 1.5rem; - --h2-font-size: 1.25rem; - --h3-font-size: 1rem; - --normal-font-size: .938rem; - --small-font-size: .813rem; - --smaller-font-size: .75rem; - - /*========== Font weight ==========*/ - --font-medium: 500; - --font-semi-bold: 600; - --font-black: 900; - - /*========== Margenes Bottom ==========*/ - --mb-0-25: .25rem; - --mb-0-5: .5rem; - --mb-0-75: .75rem; - --mb-1: 1rem; - --mb-1-5: 1.5rem; - --mb-2: 2rem; - --mb-2-5: 2.5rem; - - /*========== z index ==========*/ - --z-tooltip: 10; - --z-fixed: 100; -} - -/* Responsive typography */ -@media screen and (min-width: 992px) { - :root { - --biggest-font-size: 4rem; - --h1-font-size: 2.25rem; - --h2-font-size: 1.5rem; - --h3-font-size: 1.25rem; - --normal-font-size: 1rem; - --small-font-size: .875rem; - --smaller-font-size: .813rem; - } +/* =============== Base =============== */ +* { + box-sizing: border-box; + padding: 0; + margin: 0; } -/*=============== BASE ===============*/ -*{ - box-sizing: border-box; - padding: 0; - margin: 0; +html { + scroll-behavior: smooth; } -html{ - scroll-behavior: smooth; +body { + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background: var(--body-color); + color: var(--text-color); } -body{ - margin: var(--header-height) 0 0 0; - font-family: var(--body-font); - font-size: var(--normal-font-size); - background: var(--body-color); - color: var(--text-color); +h1, +h2, +h3, +h4 { + color: var(--title-color); + font-weight: var(--font-semi-bold); } -h1,h2,h3,h4{ - color: var(--title-color); - font-weight: var(--font-semi-bold); +ul { + list-style: none; } -ul{ - list-style: none; +a { + text-decoration: none; } -a{ - text-decoration: none; +img { + max-width: 100%; + height: auto; } -img{ - max-width: 100%; - height: auto; +button, +input { + border: none; + outline: none; } -button, -input{ - border: none; - outline: none; +button { + cursor: pointer; + font-family: var(--body-font); + font-size: var(--normal-font-size); } -button{ - cursor: pointer; - font-family: var(--body-font); - font-size: var(--normal-font-size); +/* =============== VARIABLES CSS =============== */ +:root { + /* ========= Header ========== */ + --header-height: 3.5rem; + + /* ========= Color ========== */ + --hue: 14; + --first-color: hsl(var(--hue), 91%, 54%); + --first-color-alt: hsl(var(--hue), 91%, 50%); + --title-color: hsl(var(--hue), 4%, 100%); + --text-color: hsl(var(--hue), 4%, 85%); + --text-color-light: hsl(var(--hue), 4%, 55%); + + /*Orange-Violet gradient*/ + --body-color: linear-gradient( + 90deg, + hsl(259, 57%, 16%) 0%, + hsl(14, 79%, 58%) 100% + ); + --container-color: linear-gradient( + 136deg, + hsl(259, 57%, 16%) 0%, + hsl(14, 79%, 58%) 100% + ); + + /*Red gradient*/ + /* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%); + --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */ + + /*Black solid*/ + /* --body-color: hsl(30, 8%, 8%); + --container-color: hsl(30, 8%, 10%); */ + + /* --body-color: linear-gradient( + 90deg, + hsl(104, 28%, 40%) 0%, + hsl(58, 28%, 40%) 100% + ); + --container-color: linear-gradient( + 136deg, + hsl(104, 28%, 35%) 0%, + hsl(58, 28%, 35%) 100% + ); */ + + /*========== Font and typography ==========*/ + --body-font: 'Poppins', sans-serif; + --biggest-font-size: 2rem; + --h1-font-size: 1.5rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1rem; + --normal-font-size: 0.938rem; + --small-font-size: 0.813rem; + --smaller-font-size: 0.75rem; + + /*========== Font weight ==========*/ + --font-medium: 500; + --font-semi-bold: 600; + --font-black: 900; + + /*========== Margenes Bottom ==========*/ + --mb-0-25: 0.25rem; + --mb-0-5: 0.5rem; + --mb-0-75: 0.75rem; + --mb-1: 1rem; + --mb-1-5: 1.5rem; + --mb-2: 2rem; + --mb-2-5: 2.5rem; + + /* ========== Transition ========== */ + --transition-general: all 0.2s linear; + --transition-items: all 0.4s linear; + + /* ========== z index ========== */ + --z-tooltip: 10; + --z-fixed: 100; +} + +/*=============== Responsive typography ===============*/ + +/*========== Media typography ==========*/ +@media screen and (min-width: 992px) { + :root { + --biggest-font-size: 4rem; + --h1-font-size: 2.25rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: 0.875rem; + --smaller-font-size: 0.813rem; + } +} + +/*========== Media Dark - Light ==========*/ +/* @media (prefers-color-scheme: light) { + :root { + color-scheme: light; + } +} */ + +/* @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --hue: 14; + --first-color: hsl(var(--hue), 91%, 54%); + --first-color-alt: hsl(var(--hue), 91%, 50%); + --title-color: hsl(var(--hue), 4%, 100%); + --text-color: hsl(var(--hue), 4%, 85%); + --text-color-light: hsl(var(--hue), 4%, 55%); + + --body-color: hsl(30, 8%, 8%); + --container-color: hsl(30, 8%, 10%); + } +} */ + +body.active { + --bg-color: #171717; + --body-color: #171717; + --card-color: #2f2c2c; + --growth-color: #5d20cf; + --wrapper-color: #2e1f3f; + --button-color: #8a52f3; + --button-dark-color: #58329e; + --toggle-color: #68ff04; + --text-color: #fff; + --text-span-color: #9257ff; + --text-color-light: #c3b6ee; + --body-color: hsl(30, 8%, 8%); + --container-color: hsl(30, 8%, 10%); +} + +/* =============== Components =============== */ +.button { + display: inline-block; + background-color: var(--first-color); + color: var(--title-color); + padding: 1rem 1.75rem; + border-radius: 0.5rem; + font-weight: var(--font-medium); + transition: 0.3s; +} + +.button:hover { + filter: brightness(1.5); +} + +.button__icon { + font-size: 1.25rem; +} + +.button--ghost { + border: 2px solid; + background-color: transparent; + border-radius: 3rem; + padding: 0.75rem 1.5rem; +} + +.button--ghost:hover { + background: none; +} + +.button--link { + color: var(--title-color); +} + +.button--flex { + display: inline-flex; + align-items: center; + column-gap: 0.5rem; } /*=============== REUSABLE CSS CLASSES ===============*/ -.section{ - padding: 4.5rem 0 2rem; +.section { + padding: 4.5rem 0 2rem; } -.section__title{ - font-size: var(--h2-font-size); - margin-bottom: var(--mb-2); - text-align: center; +.section__title { + font-size: var(--h2-font-size); + margin-bottom: var(--mb-2); + text-align: center; } /*=============== LAYOUT ===============*/ -.container{ - max-width: 968px; - margin-left: var(--mb-1-5); - margin-right: var(--mb-1-5); +.container { + max-width: 968px; + margin-left: var(--mb-1-5); + margin-right: var(--mb-1-5); } -.grid{ - display: grid; +.grid { + display: grid; } -.main{ - overflow: hidden; /*For animation*/ +.main { + overflow: hidden; /*For animation*/ } /*=============== HEADER ===============*/ -.header{ - width: 100%; - background: var(--body-color); - position: fixed; - top: 0; - left: 0; - z-index: var(--z-fixed); +.l-header { + width: 100%; + background: var(--body-color); + position: fixed; + top: 0; + left: 0; + padding: 0.5rem; + z-index: var(--z-fixed); } /*=============== NAV ===============*/ -.nav{ - height: var(--header-height); - display: flex; - justify-content: space-between; - align-items: center; +.l-nav { + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; } -.nav__logo{ - display: flex; - align-items: center; - column-gap: .5rem; - font-weight: var(--font-medium); +.nav__logo { + display: flex; + align-items: center; + column-gap: 0.5rem; + font-weight: var(--font-medium); } -.nav__logo-img{ - width: 1.25rem; +.nav__logo-img { + width: 1.25rem; } .nav__link, .nav__logo, .nav__toggle, -.nav__close{ - color: var(--title-color); +.nav__close { + color: var(--title-color); } -.nav__toggle{ - font-size: 1.25rem; - cursor: pointer; +/* ========= Icons ========= */ +.nav__toggle, +.nav__close, +#theme-btn { + font-size: 1.5rem; + cursor: pointer; + position: absolute; + transition: var(--transition-general); + color: var(--toggle-color); } -@media screen and (max-width: 767px){ - .nav__menu{ - position: fixed; - width: 100%; - background: var(--container-color); - top: -150%; - left: 0; - padding: 3.5rem 0; - transition: .4s; - z-index: var(--z-fixed); - border-radius: 0 0 1.5rem 1.5rem; - } +.nav__toggle:hover, +.nav__close:hover, +#theme-btn:hover, +#theme-btn.fa-sun:hover { + filter: brightness(1.2); + transform: scale(1.2); } -.nav__img{ - width: 100px; - position: absolute; - top: 0; - left: 0; +.nav__toggle { + top: 1.5rem; + right: 1rem; } -.nav__close{ - font-size: 1.8rem; - position: absolute; - top: .5rem; - right: .7rem; - cursor: pointer; +.nav__close { + font-size: 2rem; + top: 1rem; + right: 1rem; } -.nav__list{ - display: flex; - flex-direction: column; - align-items: center; - row-gap: 1.5rem; +#theme-btn { + top: 1.5rem; + right: 3.5rem; } -.nav__link{ - text-transform: uppercase; - font-weight: var(--font-black); - transition: .4s; +.nav__toggle, +#theme-btn.fa-sun { + transform: rotate(180deg); } -.nav__link:hover{ - color: var(--text-color); +@media screen and (max-width: 767px) { + .nav__menu { + position: fixed; + width: 100%; + background: var(--container-color); + top: -150%; + left: 0; + padding: 3.5rem 0; + transition: 0.4s; + z-index: var(--z-fixed); + border-radius: 0 0 1.5rem 1.5rem; + } +} + +.nav__img { + width: 120px; + position: absolute; + top: -10px; + left: 0; + animation: spiderMove 1s infinite alternate-reverse; +} + +@keyframes spiderMove { + to { + transform: translateY(0); + } + from { + transform: translateY(10px); + } +} + +.nav__list { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1.5rem; +} + +.nav__link { + text-transform: uppercase; + font-weight: var(--font-black); + transition: all 0.2s linear; +} + +.nav__link:hover { + color: var(--text-color); } /* Show menu */ -.show-menu{ - top: 0; +.show-menu { + top: 0; } /* Change background header */ -.scroll-header{ - background: var(--container-color); +.scroll-header { + background: var(--container-color); + box-shadow: 10px 10px 100px #68ff04; } /* Active link */ -.active-link{ - position: relative; +.active-link { + position: relative; + width: 0; } -.active-link::before{ - content: ''; - position: absolute; - bottom: -.75rem; - left: 45%; - width: 5px; - height: 5px; - background-color: var(--title-color); - border-radius: 50%; -} +.active-link::before { + content: ''; + position: absolute; + bottom: -0.75rem; + left: 0; + /* left: 45%; */ + width: 50%; + height: 5px; + background-color: var(--title-color); + transition: width 0.2s; /* segredo para fazer crescer */ -/*=============== HOME ===============*/ -.home__content{ - row-gap: 1rem; + /* border-radius: 50%; */ } -.home__group{ - display: grid; - position: relative; - padding-top: 2rem; +.active-link:hover::after, +.active-link:hover::before { + width: 100%; } -.home__img{ - height: 250px; - justify-self: center; +/* Scroll indicator */ +.scroll-indicator { + position: absolute; + top: 99%; + left: 0; + height: 0.3rem; + background: #68ff04; + /* z-index: 222; */ } -.home__indicator{ - width: 8px; - height: 8px; - background-color: var(--title-color); - border-radius: 50%; - position: absolute; - top: 7rem; - right: 2rem; +/*=============== HOME ===============*/ +.home__content { + row-gap: 1rem; } -.home__indicator::after{ - content: ''; - position: absolute; - width: 1px; - height: 48px; - background-color: var(--title-color); - top: -3rem; - right: 45%; +.home__group { + display: grid; + position: relative; + padding-top: 2rem; } -.home__details-img{ - position: absolute; - right: .5rem; +.home__img { + height: 250px; + justify-self: center; } -.home__details-title, -.home__details-subtitle{ - display: block; - font-size: var(--small-font-size); - text-align: right; +.home__indicator { + width: 8px; + height: 8px; + background-color: var(--title-color); + border-radius: 50%; + position: absolute; + top: 7rem; + right: 2rem; } -.home__subtitle{ - font-size: var(--h3-font-size); - text-transform: uppercase; - margin-bottom: var(--mb-1); +.home__indicator::after { + content: ''; + position: absolute; + width: 1px; + height: 48px; + background-color: var(--title-color); + top: -3rem; + right: 45%; } -.home__title{ - font-size: var(--biggest-font-size); - font-weight: var(--font-black); - line-height: 109%; - margin-bottom: var(--mb-1); +.home__details-img { + position: absolute; + right: 0.5rem; } -.home__description{ - margin-bottom: var(--mb-1); +.home__details-title, +.home__details-subtitle { + display: block; + font-size: var(--small-font-size); + text-align: right; } -.home__buttons{ - display: flex; - justify-content: space-between; +.home__subtitle { + font-size: var(--h3-font-size); + text-transform: uppercase; + margin-bottom: var(--mb-1); } -/* Swiper Class */ -.swiper-pagination{ - position: initial; - margin-top: var(--mb-1); +.home__title { + font-size: var(--biggest-font-size); + font-weight: var(--font-black); + line-height: 109%; + margin-bottom: var(--mb-1); } -.swiper-pagination-bullet{ - width: 5px; - height: 5px; - background-color: var(--title-color); - opacity: 1; +.home__description { + margin-bottom: var(--mb-1); } -.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ - margin: 0 .5rem; -} +.home__buttons { + display: flex; + justify-content: space-between; +} -.swiper-pagination-bullet-active{ - width: 1.5rem; - height: 5px; - border-radius: .5rem; +/* Swiper Class */ +.swiper, +.swiper-wrapper { + position: relative; + max-width: 100%; } -/*=============== BUTTONS ===============*/ -.button{ - display: inline-block; - background-color: var(--first-color); - color: var(--title-color); - padding: 1rem 1.75rem; - border-radius: .5rem; - font-weight: var(--font-medium); - transition: .3s; +.swiper-slide { + height: auto; + padding: 4rem 1rem; + position: absolute; } -.button:hover{ - background-color: var(--first-color-alt); +.swiper-pagination { + position: initial; + margin-top: var(--mb-1); + width: 3rem; + height: 3rem; } -.button__icon{ - font-size: 1.25rem; +.swiper-pagination-bullet { + width: 5px; + height: 5px; + position: relative; + top: 1rem; + background-color: var(--title-color) !important; + opacity: 1; } -.button--ghost{ - border: 2px solid; - background-color: transparent; - border-radius: 3rem; - padding: .75rem 1.5rem; +.new .swiper-pagination { + width: 3px; + height: 3px; + top: 13rem; } -.button--ghost:hover{ - background: none; +.swiper-pagination-horizontal.swiper-pagination-bullets + .swiper-pagination-bullet { + margin: 0 0.5rem; } -.button--link{ - color: var(--title-color); +.swiper-pagination-bullet-active { + width: 1.5rem; + height: 5px; + border-radius: 0.5rem; } -.button--flex{ - display: inline-flex; - align-items: center; - column-gap: .5rem; +.swiper-button-prev, +.swiper-button-next { + color: var(--title-color) !important; } /*=============== CATEGORY ===============*/ -.category__container{ - grid-template-columns: repeat(2, 1fr); - gap: 1rem 2rem; +.category__container { + grid-template-columns: repeat(2, 1fr); + gap: 1rem 2rem; } -.category__data{ - text-align: center; +.category__data { + text-align: center; } -.category__img{ - width: 120px; - margin-bottom: var(--mb-0-75); - transition: .3s; +.category__img { + width: 120px; + margin-bottom: var(--mb-0-75); + transition: 0.3s; } -.category__title{ - margin-bottom: var(--mb-0-25); +.category__title { + margin-bottom: var(--mb-0-25); } -.category__data:hover .category__img{ - transform: translateY(-.5rem); +.category__data:hover .category__img { + transform: translateY(-0.5rem); } /*=============== ABOUT ===============*/ -.about__container{ - row-gap: 2rem; +.about__container { + row-gap: 2rem; } -.about__data{ - text-align: center; +.about__data { + text-align: center; } -.about__description{ - margin-bottom: var(--mb-2); +.about__description { + margin-bottom: var(--mb-2); } -.about__img{ - width: 200px; - justify-self: center; +.about__img { + width: 200px; + justify-self: center; } /*=============== TRICK OR TREAT ===============*/ -.trick__container{ - grid-template-columns: repeat(2, 1fr); - gap: 1.5rem; - padding-top: 1rem; +.trick__container { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + padding-top: 1rem; } -.trick__content{ - position: relative; - background: var(--container-color); - border-radius: 1rem; - padding: 1.5rem 0 1rem 0; - text-align: center; - overflow: hidden; +.trick__content { + position: relative; + background: var(--container-color); + border-radius: 1rem; + padding: 1.5rem 0 1rem 0; + text-align: center; + overflow: hidden; } -.trick__img{ - width: 90px; - transition: .3s; +.trick__img { + width: 90px; + transition: 0.3s; } .trick__subtitle, -.trick__price{ - display: block; +.trick__price { + display: block; } -.trick__subtitle{ - font-size: var(--smaller-font-size); - margin-bottom: var(--mb-0-5); +.trick__subtitle { + font-size: var(--smaller-font-size); + margin-bottom: var(--mb-0-5); } .trick__title, -.trick__price{ - color: var(--title-color); - font-weight: var(--font-medium); - font-size: var(--normal-font-size); -} - -.trick__button{ - display: inline-flex; - padding: .5rem; - border-radius: .25rem .25rem .75rem .25rem; - position: absolute; - right: -3rem; - bottom: 0; +.trick__price { + color: var(--title-color); + font-weight: var(--font-medium); + font-size: var(--normal-font-size); +} + +.trick__button { + display: inline-flex; + padding: 0.5rem; + border-radius: 0.25rem 0.25rem 0.75rem 0.25rem; + position: absolute; + right: -3rem; + bottom: 0; } -.trick__icon{ - font-size: 1.25rem; - color: var(--title-color); +.trick__icon { + font-size: 1.25rem; + color: var(--title-color); } -.trick__content:hover .trick__img{ - transform: translateY(-.5rem); +.trick__content:hover .trick__img { + transform: translateY(-0.5rem); } -.trick__content:hover .trick__button{ - right: 0; +.trick__content:hover .trick__button { + right: 0; } /*=============== DISCOUNT ===============*/ -.discount__container{ - background: var(--container-color); - border-radius: 1rem; - padding: 2.5rem 0 1.5rem; - row-gap: .75rem; +.discount__container { + background: var(--container-color); + border-radius: 1rem; + padding: 2.5rem 0 1.5rem; + row-gap: 0.75rem; } -.discount__data{ - text-align: center; +.discount__data { + text-align: center; } -.discount__title{ - font-size: var(--h2-font-size); - margin-bottom: var(--mb-2); +.discount__title { + font-size: var(--h2-font-size); + margin-bottom: var(--mb-2); } -.discount__img{ - width: 200px; - justify-self: center; +.discount__img { + width: 200px; + justify-self: center; } /*=============== NEW ARRIVALS ===============*/ -.new__container{ - padding-top: 1rem; +.new__container { + padding-top: 1rem; } -.new__img{ - width: 120px; - margin-bottom: var(--mb-0-5); - transition: .3s; +.new__img { + width: 120px; + margin-bottom: var(--mb-0-5); + transition: 0.3s; } -.new__content{ - position: relative; - background: var(--container-color); - width: 242px; - padding: 2rem 0 1.5rem 0; - border-radius: .75rem; - text-align: center; - overflow: hidden; +.new__content { + position: relative; + background: var(--container-color); + width: 242px; + padding: 2rem 0 1.5rem 0; + border-radius: 0.75rem; + text-align: center; + overflow: hidden; } -.new__tag{ - position: absolute; - top: 8%; - left: 8%; - background-color: var(--first-color); - color: var(--title-color); - font-size: var(--small-font-size); - padding: .25rem .5rem; - border-radius: .25rem; +.new__tag { + position: absolute; + top: 8%; + left: 8%; + background-color: var(--first-color); + color: var(--title-color); + font-size: var(--small-font-size); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; } -.new__title{ - font-size: var(--normal-font-size); - font-weight: var(--font-medium); +.new__title { + font-size: var(--normal-font-size); + font-weight: var(--font-medium); } -.new__subtitle{ - display: block; - font-size: var(--small-font-size); - margin-bottom: var(--mb-0-5); +.new__subtitle { + display: block; + font-size: var(--small-font-size); + margin-bottom: var(--mb-0-5); } -.new__prices{ - display: inline-flex; - align-items: center; - column-gap: .5rem; +.new__prices { + display: inline-flex; + align-items: center; + column-gap: 0.5rem; } -.new__price{ - font-weight: var(--font-medium); - color: var(--title-color); +.new__price { + font-weight: var(--font-medium); + color: var(--title-color); } -.new__discount{ - color: var(--first-color); - font-size: var(--smaller-font-size); - text-decoration: line-through; - font-weight: var(--font-medium); +.new__discount { + color: var(--first-color); + font-size: var(--smaller-font-size); + text-decoration: line-through; + font-weight: var(--font-medium); } -.new__button{ - display: inline-flex; - padding: .5rem; - border-radius: .25rem .25rem .75rem .25rem; - position: absolute; - bottom: 0; - right: -3rem; +.new__button { + display: inline-flex; + padding: 0.5rem; + border-radius: 0.25rem 0.25rem 0.75rem 0.25rem; + position: absolute; + bottom: 0; + right: -3rem; } -.new__icon{ - font-size: 1.25rem; +.new__icon { + font-size: 1.25rem; } -.new__content:hover .new__img{ - transform: translateY(-.5rem); +.new__content:hover .new__img { + transform: translateY(-0.5rem); } -.new__content:hover .new__button{ - right: 0; +.new__content:hover .new__button { + right: 0; } /*=============== NEWSLETTER ===============*/ -.newsletter__description{ - text-align: center; - margin-bottom: var(--mb-1-5); +.newsletter__description { + text-align: center; + margin-bottom: var(--mb-1-5); } -.newsletter__form{ - background: var(--container-color); - padding: 1rem; - display: flex; - justify-content: space-between; - border-radius: .75rem; +.newsletter__form { + background: var(--container-color); + padding: 1rem; + display: flex; + justify-content: space-between; + border-radius: 0.75rem; } -.newsletter__input{ - width: 70%; - padding: 0 .5rem; - background: none; - color: var(--title-color); +.newsletter__input { + width: 70%; + padding: 0 0.5rem; + background: none; + color: var(--title-color); } -.newsletter__input::placeholder{ - color: var(--text-color); +.newsletter__input::placeholder { + color: var(--text-color); } /*=============== FOOTER ===============*/ -.footer{ - position: relative; - overflow: hidden; +.footer { + position: relative; + overflow: hidden; } .footer__img-one, -.footer__img-two{ - position: absolute; - transition: .3s; +.footer__img-two { + position: absolute; + transition: 0.3s; } -.footer__img-one{ - width: 100px; - top: 6rem; - right: -2rem; +.footer__img-one { + width: 100px; + top: 6rem; + right: -2rem; + animation: walkGhostOne 5s linear alternate infinite; } -.footer__img-two{ - width: 150px; - bottom: 4rem; - right: 4rem; +.footer__img-two { + width: 150px; + bottom: 4rem; + right: 4rem; + animation: walkGhostTwo 5s linear alternate infinite; } .footer__img-one:hover, -.footer__img-two:hover{ - transform: translateY(-.5rem); -} - -.footer__container{ - row-gap: 2rem; -} - -.footer__logo{ - display: flex; - align-items: center; - column-gap: .5rem; - margin-bottom: var(--mb-1); - font-weight: var(--font-medium); - color: var(--title-color); +.footer__img-two:hover { + transform: translateY(-0.5rem); +} + +@keyframes walkGhostOne { + /* 0% { + transform: translate(0);} + 100% { + transform: translate(-300px, 40px); + + } */ + 0% { + transform: translate(-100px, 0); + opacity: 0; + } + + 25% { + transform: translate(-130px, 20px); + } + + 50% { + transform: translate(-160px, 0); + } + + 75% { + transform: translate(-190px, 20px); + } + + 100% { + transform: translate(-210px, 0); + } +} + +@keyframes walkGhostTwo { + /* 0% { + transform: translate(0); + } + 100% { + transform: translate(300px, 40px); + } */ + 0% { + transform: translate(100px, 0); + opacity: 0; + } + + 25% { + transform: translate(130px, 20px); + } + + 50% { + transform: translate(160px, 0); + } + + 75% { + transform: translate(190px, 20px); + } + + 100% { + transform: translate(210px, 0); + } +} + +.footer__container { + row-gap: 2rem; +} + +.footer__logo { + display: flex; + align-items: center; + column-gap: 0.5rem; + margin-bottom: var(--mb-1); + font-weight: var(--font-medium); + color: var(--title-color); } -.footer__logo-img{ - width: 20px; +.footer__logo-img { + width: 20px; } -.footer__description{ - margin-bottom: var(--mb-2-5); +.footer__description { + margin-bottom: var(--mb-2-5); } -.footer__social{ - display: flex; - column-gap: .75rem; +.footer__social { + display: flex; + column-gap: 0.75rem; } -.footer__social-link{ - display: inline-flex; - background: var(--container-color); - padding: .25rem; - border-radius: .25rem; - color: var(--title-color); - font-size: 1rem; +.footer__social-link { + display: inline-flex; + background: var(--container-color); + padding: 0.25rem; + border-radius: 0.25rem; + color: var(--title-color); + font-size: 1rem; } -.footer__social-link:hover{ - background: var(--body-color); +.footer__social-link:hover { + background: var(--body-color); } -.footer__title{ - font-size: var(--h3-font-size); - margin-bottom: var(--mb-1); +.footer__title { + font-size: var(--h3-font-size); + margin-bottom: var(--mb-1); } -.footer__links{ - display: grid; - row-gap: .35rem; +.footer__links { + display: grid; + row-gap: 0.35rem; } -.footer__link{ - font-size: var(--small-font-size); - color: var(--text-color); - transition: .3s; +.footer__link { + font-size: var(--small-font-size); + color: var(--text-color); + transition: 0.3s; } -.footer__link:hover{ - color: var(--title-color); +.footer__link:hover { + color: var(--title-color); } -.footer__copy{ - display: block; - text-align: center; - font-size: var(--smaller-font-size); - margin-top: 4.5rem; +.footer__copy { + display: block; + text-align: center; + font-size: var(--smaller-font-size); + margin-top: 4.5rem; } /*=============== SCROLL UP ===============*/ -.scrollup{ - position: fixed; - background: var(--container-color); - right: 1rem; - bottom: -20%; - display: inline-flex; - padding: .3rem; - border-radius: .25rem; - z-index: var(--z-tooltip); - opacity: .8; - transition: .4s; +.scrollup { + position: fixed; + background: var(--container-color); + right: 1rem; + bottom: -20%; + display: inline-flex; + padding: 1rem; + border-radius: 0.25rem; + z-index: var(--z-tooltip); + opacity: 0.8; + transition: 0.4s; } -.scrollup__icon{ - font-size: 1.25rem; - color: var(--title-color); +.scrollup__icon { + font-size: 1.25rem; + color: var(--title-color); } -.scrollup:hover{ - background: var(--container-color); - opacity: 1; +.scrollup:hover { + background: var(--container-color); + opacity: 1; } /* Show Scroll Up*/ -.show-scroll{ - bottom: 3rem; +.show-scroll { + bottom: 3rem; } /*=============== SCROLL BAR ===============*/ -::-webkit-scrollbar{ - width: 0.6rem; - background: #413e3e; +::-webkit-scrollbar { + width: 0.6rem; + background: #413e3e; } -::-webkit-scrollbar-thumb{ - background: #272525; - border-radius: .5rem; +::-webkit-scrollbar-thumb { + background: #272525; + border-radius: 0.5rem; } /*=============== BREAKPOINTS ===============*/ /* For small devices */ -@media screen and (max-width: 320px){ - .container{ - margin-left: var(--mb-1); - margin-right: var(--mb-1); - } - - .home__img{ - height: 200px; - } - .home__buttons{ - flex-direction: column; - width: max-content; - row-gap: 1rem; - } - - .category__container, - .trick__container{ - grid-template-columns: .8fr; - justify-content: center; - } +@media screen and (max-width: 320px) { + .container { + margin-left: var(--mb-1); + margin-right: var(--mb-1); + } + + .home__img { + height: 200px; + } + .home__buttons { + flex-direction: column; + width: max-content; + row-gap: 1rem; + } + + .category__container, + .trick__container { + grid-template-columns: 0.8fr; + justify-content: center; + } } /* For medium devices */ -@media screen and (min-width: 576px){ - .about__container{ - grid-template-columns: .8fr; - justify-content: center; - } - - .newsletter__container{ - display: grid; - grid-template-columns: .7fr; - justify-content: center; - } - .newsletter__description{ - padding: 0 3rem; - } -} - -@media screen and (min-width: 767px){ - body{ - margin: 0; - } - - .section{ - padding: 7rem 0 2rem; - } - - .nav{ - height: calc(var(--header-height) + 1.5rem); - } - .nav__img, - .nav__close, - .nav__toggle{ - display: none; - } - .nav__list{ - flex-direction: row; - column-gap: 3rem; - } - .nav__link{ - text-transform: initial; - font-weight: initial; - } - - .home__content{ - padding: 8rem 0 2rem; - grid-template-columns: repeat(2, 1fr); - gap: 4rem; - } - .home__img{ - height: 300px; - } - .swiper-pagination{ - margin-top: var(--mb-2); - } - - .category__container{ - grid-template-columns: repeat(3, 200px); - justify-content: center; - } - - .about__container{ - grid-template-columns: repeat(2, 1fr); - align-items: center; - } - .about__title, - .about__data{ - text-align: initial; - } - .about__img{ - width: 250px; - } - - .trick__container{ - grid-template-columns: repeat(3, 200px); - justify-content: center; - gap: 2rem; - } - - .discount__container{ - grid-template-columns: repeat(2, max-content); - justify-content: center; - align-items: center; - column-gap: 3rem; - padding: 3rem 0; - border-radius: 3rem; - } - .discount__img{ - width: 350px; - order: -1; - } - .discount__data{ - padding-right: 6rem; - } - - .newsletter__container{ - grid-template-columns: .5fr; - } - - .footer__container{ - grid-template-columns: repeat(4, 1fr); - justify-items: center; - column-gap: 1rem; - } - .footer__img-two{ - right: initial; - bottom: 0; - left: 15%; - } +@media screen and (min-width: 576px) { + .about__container { + grid-template-columns: 0.8fr; + justify-content: center; + } + + .newsletter__container { + display: grid; + grid-template-columns: 0.7fr; + justify-content: center; + } + .newsletter__description { + padding: 0 3rem; + } +} + +@media screen and (min-width: 767px) { + body { + margin: 0; + } + + .section { + padding: 7rem 0 2rem; + } + + .nav { + height: calc(var(--header-height) + 1.5rem); + } + .nav__img, + .nav__close, + .nav__toggle { + display: none; + } + .nav__list { + flex-direction: row; + column-gap: 3rem; + } + .nav__link { + text-transform: initial; + font-weight: initial; + } + + .home__content { + padding: 8rem 0 2rem; + grid-template-columns: repeat(2, 1fr); + gap: 4rem; + } + .home__img { + height: 300px; + } + .swiper-pagination { + margin-top: var(--mb-2); + } + + .category__container { + grid-template-columns: repeat(3, 200px); + justify-content: center; + } + + .about__container { + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + .about__title, + .about__data { + text-align: initial; + } + .about__img { + width: 250px; + } + + .trick__container { + grid-template-columns: repeat(3, 200px); + justify-content: center; + gap: 2rem; + } + + .discount__container { + grid-template-columns: repeat(2, max-content); + justify-content: center; + align-items: center; + column-gap: 3rem; + padding: 3rem 0; + border-radius: 3rem; + } + .discount__img { + width: 350px; + order: -1; + } + .discount__data { + padding-right: 6rem; + } + + .newsletter__container { + grid-template-columns: 0.5fr; + } + + .footer__container { + grid-template-columns: repeat(4, 1fr); + justify-items: center; + column-gap: 1rem; + } + .footer__img-two { + right: initial; + bottom: 0; + left: 15%; + } } /* For large devices */ -@media screen and (min-width: 992px){ - .container{ - margin-left: auto; - margin-right: auto; - } - - .section__title{ - font-size: var(--h1-font-size); - margin-bottom: 3rem; - } - - .home__content{ - padding-top: 9rem; - gap: 3rem; - } - .home__group{ - padding-top: 0; - } - .home__img{ - height: 400px; - transform: translateY(-3rem); - } - .home__indicator{ - top: initial; - right: initial; - bottom: 15%; - left: 45%; - } - .home__indicator::after{ - top: 0; - height: 75px; - } - .home__details-img{ - bottom: 0; - right: 58%; - } - .home__title{ - margin-bottom: var(--mb-1-5); - } - .home__description{ - margin-bottom: var(--mb-2-5); - padding-right: 2rem; - } - - .category__container{ - column-gap: 8rem; - } - .category__img{ - width: 200px; - } - - .about__container{ - column-gap: 7rem; - } - .about__img{ - width: 350px; - } - .about__description{ - padding-right: 2rem; - } - - .trick__container{ - gap: 3.5rem; - } - .trick__content{ - border-radius: 1.5rem; - } - .trick__img{ - width: 110px; - } - .trick__title{ - font-size: var(--h3-font-size); - } - - .discount__container{ - column-gap: 7rem; - } - - .new__content{ - width: 310px; - border-radius: 1rem; - padding: 2rem 0; - } - .new__img{ - width: 150px; - } - .new__img, - .new__subtitle{ - margin-bottom: var(--mb-1); - } - .new__title{ - font-size: var(--h3-font-size); - } - - .footer__copy{ - margin-top: 6rem; - } +@media screen and (min-width: 992px) { + .container { + margin-left: auto; + margin-right: auto; + } + + .section__title { + font-size: var(--h1-font-size); + margin-bottom: 3rem; + } + + .home__content { + padding-top: 9rem; + gap: 3rem; + } + .home__group { + padding-top: 0; + } + .home__img { + height: 400px; + transform: translateY(-3rem); + } + .home__indicator { + top: initial; + right: initial; + bottom: 15%; + left: 45%; + } + .home__indicator::after { + top: 0; + height: 75px; + } + .home__details-img { + bottom: 0; + right: 58%; + } + .home__title { + margin-bottom: var(--mb-1-5); + } + .home__description { + margin-bottom: var(--mb-2-5); + padding-right: 2rem; + } + + .category__container { + column-gap: 8rem; + } + .category__img { + width: 200px; + } + + .about__container { + column-gap: 7rem; + } + .about__img { + width: 350px; + } + .about__description { + padding-right: 2rem; + } + + .trick__container { + gap: 3.5rem; + } + .trick__content { + border-radius: 1.5rem; + } + .trick__img { + width: 110px; + } + .trick__title { + font-size: var(--h3-font-size); + } + + .discount__container { + column-gap: 7rem; + } + + .new__content { + width: 310px; + border-radius: 1rem; + padding: 2rem 0; + } + .new__img { + width: 150px; + } + .new__img, + .new__subtitle { + margin-bottom: var(--mb-1); + } + .new__title { + font-size: var(--h3-font-size); + } + + .footer__copy { + margin-top: 6rem; + } +} + +@media screen and (min-width: 1200px) { + .home__img { + height: 420px; + } + .swiper-pagination { + margin-top: var(--mb-2-5); + } + .footer__img-one { + width: 120px; + } + .footer__img-two { + width: 180px; + top: 30%; + left: -3%; + } } - -@media screen and (min-width: 1200px){ - .home__img{ - height: 420px; - } - .swiper-pagination{ - margin-top: var(--mb-2-5); - } - .footer__img-one{ - width: 120px; - } - .footer__img-two{ - width: 180px; - top: 30%; - left: -3%; - } -} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 6ad8094..79751c3 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,99 +1,155 @@ -/*=============== SHOW MENU ===============*/ +/* ==================== Dark Mode ==================== */ +let themeBtn = document.querySelector('#theme-btn') + +themeBtn.onclick = () => { + themeBtn.classList.toggle('fa-sun') + + if (themeBtn.classList.contains('fa-sun')) { + document.body.classList.add('active') + } else { + document.body.classList.remove('active') + } +} + +/* ==================== CHANGE BACKGROUND HEADER ==================== */ +function scrollHeader() { + const header = document.getElementById('header') + // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag + if (this.scrollY >= 50) header.classList.add('scroll-header') + else header.classList.remove('scroll-header') +} +window.addEventListener('scroll', scrollHeader) + +/* ==================== ScrollIndicator ==================== */ +window.onscroll = () => { + // navToggle.classList.remove('nav-menu') + // navMenu.classList.remove('show-menu') + + let maxHeight = window.document.body.scrollHeight - window.innerHeight + let percentage = (window.scrollY / maxHeight) * 100 + document.querySelector('.l-header .scroll-indicator').style.width = + percentage + '%' +} + +/* ==================== SHOW MENU ==================== */ const navMenu = document.getElementById('nav-menu'), - navToggle = document.getElementById('nav-toggle'), - navClose = document.getElementById('nav-close') + navToggle = document.getElementById('nav-toggle'), + navClose = document.getElementById('nav-close') -/*===== MENU SHOW =====*/ +/* ========== MENU SHOW ========== */ /* Validate if constant exists */ -if(navToggle){ - navToggle.addEventListener('click', () =>{ +if (navToggle) { + navToggle.addEventListener('click', () => { navMenu.classList.add('show-menu') }) -} +} else navClose +navClose.addEventListener('click', () => { + navMenu.classList.remove('show-menu') +}) -/*===== MENU HIDDEN =====*/ +/* ========== MENU HIDDEN ========== */ /* Validate if constant exists */ -if(navClose){ - navClose.addEventListener('click', () =>{ - navMenu.classList.remove('show-menu') - }) -} +// if (navClose) { +// navClose.addEventListener('click', () => { +// navMenu.classList.remove('show-menu') +// }) +// } -/*=============== REMOVE MENU MOBILE ===============*/ +/* ==================== REMOVE MENU MOBILE ==================== */ const navLink = document.querySelectorAll('.nav__link') -function linkAction(){ +function linkAction() { const navMenu = document.getElementById('nav-menu') // When we click on each nav__link, we remove the show-menu class navMenu.classList.remove('show-menu') } -navLink.forEach(n => n.addEventListener('click', linkAction)) - -/*=============== HOME SWIPER ===============*/ -let homeSwiper = new Swiper(".home-swiper", { - spaceBetween: 30, - loop: 'true', - - pagination: { - el: ".swiper-pagination", - clickable: true, - }, -}) - -/*=============== CHANGE BACKGROUND HEADER ===============*/ -function scrollHeader(){ - const header = document.getElementById('header') - // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag - if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') -} -window.addEventListener('scroll', scrollHeader) +navLink.forEach((n) => n.addEventListener('click', linkAction)) -/*=============== NEW SWIPER ===============*/ -let newSwiper = new Swiper(".new-swiper", { - centeredSlides: true, - slidesPerView: "auto", - loop: 'true', - spaceBetween: 16, -}); - -/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ +/* =============== SCROLL SECTIONS ACTIVE LINK =============== */ const sections = document.querySelectorAll('section[id]') -function scrollActive(){ +function scrollActive() { const scrollY = window.pageYOffset - sections.forEach(current =>{ + sections.forEach((current) => { const sectionHeight = current.offsetHeight, - sectionTop = current.offsetTop - 58, - sectionId = current.getAttribute('id') + sectionTop = current.offsetTop - 58, + sectionId = current.getAttribute('id') - if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ - document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') - }else{ - document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') + if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { + document + .querySelector('.nav__menu a[href*=' + sectionId + ']') + .classList.add('active-link') + } else { + document + .querySelector('.nav__menu a[href*=' + sectionId + ']') + .classList.remove('active-link') } }) } window.addEventListener('scroll', scrollActive) -/*=============== SHOW SCROLL UP ===============*/ -function scrollUp(){ - const scrollUp = document.getElementById('scroll-up'); +/* =============== SHOW SCROLL UP =============== */ +function scrollUp() { + const scrollUp = document.getElementById('scroll-up') // When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class - if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') + if (this.scrollY >= 460) scrollUp.classList.add('show-scroll') + else scrollUp.classList.remove('show-scroll') } window.addEventListener('scroll', scrollUp) +/* ==================== HOME SWIPER ==================== */ +let homeSwiper = new Swiper('.home-swiper', { + spaceBetween: 30, + loop: 'true', + + pagination: { + el: '.swiper-pagination', + clickable: true + } +}) + +/*=============== NEW SWIPER ===============*/ +// let newSwiper = new Swiper('.new-swiper', { +// centeredSlides: true, +// slidesPerView: 'auto', +// loop: 'true', +// spaceBetween: 16 +// }) + +/* ==================== Slider swiper ==================== */ +const swiper = new Swiper('.swiper', { + slidesPerView: 'auto', + spaceBetween: 10, + pagination: { + el: '.swiper-pagination', + type: 'bullets' + }, + autoplay: { + delay: 1500 + }, + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }, + mousewheel: true, + keyboard: true, + grabCursor: true +}) + /*=============== SCROLL REVEAL ANIMATION ===============*/ const sr = ScrollReveal({ origin: 'top', distance: '60px', duration: 2500, - delay: 400, + delay: 400 // reset: true }) sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`) -sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100}) -sr.reveal(`.about__data, .discount__img`,{origin: 'left'}) -sr.reveal(`.about__img, .discount__data`,{origin: 'right'}) +sr.reveal(`.category__data, .trick__content, .footer__content`, { + interval: 100 +}) +sr.reveal(`.about__data, .discount__img`, { origin: 'left' }) +sr.reveal(`.about__img, .discount__data`, { origin: 'right' }) diff --git a/index.html b/index.html index 3bcff0c..8b8ca91 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -17,18 +17,23 @@ href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" /> - - + + + Responsive Halloween Website -