diff --git a/.github/Desktop.gif b/.github/Desktop.gif
new file mode 100644
index 0000000..e410d0c
Binary files /dev/null and b/.github/Desktop.gif differ
diff --git a/.github/Mobile.gif b/.github/Mobile.gif
new file mode 100644
index 0000000..28bd25f
Binary files /dev/null and b/.github/Mobile.gif differ
diff --git a/README.md b/README.md
index a3b1d39..5ad204a 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,74 @@
-# Responsive Halloween Website 🎃
-## [Watch it on youtube](https://youtu.be/lgo1CEPZoxg)
-### Responsive Halloween Website 🎃
+# Halloween
-- Responsive Halloween Website Using HTML, CSS & JavaScript.
-- Contains animations when scrolling.
-- It has three color designs (green, red and black)
-- Smooth scrolling in each section.
-- Developed first with the Mobile First methodology, then for desktop.
-- Compatible with all mobile devices and with a beautiful and pleasant user interface.
+## 💻 Projeto
-Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
+Halloween foi uma aplicação prática vista por mim em um canal do YouTube que acompanho [Bedimcode](https://www.youtube.com/c/Bedimcode), fiz uma Fork do projeto, a fim de codar junto e personalizar com meu jeitinho. Visite o GitHub do [Bedimcode](https://github.com/bedimcode/responsive-halloween-website). O mesmo é responsivo para as diferentes resoluções.
-
+(back to top )
+
+## 📢 Visite o site
+
+[Responsive-halloween-website](https://lobinhodev.github.io/Responsive-website-halloween/).
+
+(back to top )
+
+## Pré-requisitos
+
+- `Git`
+- `SASS é opcional`
+
+## Indicações
+
+- Clone meu repositório e faça uma Fork
+
+### Comandos
+
+| Comando | O que faz? | Observação |
+| -------------------------------------------------------------------------- | --------------------- | ------------------------ |
+| `git clone https://github.com/lobinhodev/Responsive-halloween-website.git` | Clona meu repositório | **Execute no terminal!** |
+
+### Desktop
+
+
+
+
+### Mobile
+
+
+
+
+## 🧠 Tecnologias
+
+Esse projeto foi desenvolvido com as seguintes tecnologias:
+
+- HTML
+- CSS
+- JavaScript
+- SASS
+(back to top )
+
+Bibliotecas
+
+- [Google Fonts](https://fonts.google.com/)
+- [Swiperjs](https://swiperjs.com)
+- [UiGradient](https://uigradients.com)
+
+(back to top )
+
+## Referências
+
+- [W3Schools referência HTML](https://www.w3schools.com/tags/default.asp)
+- [W3Schools referência CSS](https://www.w3schools.com/cssref/default.asp)
+- [Google Fonts](https://fonts.google.com/)
+- [Coolors](https://coolors.co/palettes/trending)
+- [Paletton](https://paletton.com/)
+- [W3Schools propriedades CSS no DOM](https://www.w3schools.com/jsref/dom_obj_style.asp)
+- [MDN lista de eventos](https://developer.mozilla.org/en-US/docs/Web/Events)
+- [CSS BEM](https://desenvolvimentoparaweb.com/css/bem/)
+(back to top )
+
+---
+
+Feito com ♥ by Lobinhodev 🐺
diff --git a/assets/css/styles.css b/assets/css/styles.css
index fc30031..d15871f 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,1006 +1,1274 @@
-/*=============== 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%);
+ --toggle-color: #f5af19;
+
+ /*Orange-Violet gradient*/
+ --body-color: linear-gradient(90deg, #f12711 0%, #f5af19 110%);
+ --container-color: linear-gradient(136deg, #f12711 0%, #f5af19 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 {
+ --hue: 14;
+ --first-color: #59ca0d;
+ --first-color-alt: #68ff0d;
+ --title-color: #59ca0d;
+ --text-span-color: #fff;
+ --text-color-light: #fff;
+ --text-color: hsl(var(--hue), 4%, 85%);
+ --text-color-light: hsl(var(--hue), 4%, 55%);
+ --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;
+
+ --body-color: hsl(30, 8%, 8%);
+ --container-color: hsl(30, 8%, 10%);
+}
+
+/* =============== Components =============== */
+.c-button {
+ display: inline-block;
+ background-color: var(--first-color);
+ color: var(--text-color);
+ padding: 1rem 1.75rem;
+ border-radius: 0.5rem;
+ font-weight: var(--font-medium);
+ transition: 0.3s;
+}
+
+.c-button:hover {
+ filter: brightness(1.5);
+}
+
+.c-button__icon {
+ font-size: 1.25rem;
+}
+
+.c-button--ghost {
+ border: 2px solid;
+ background-color: transparent;
+ border-radius: 3rem;
+ padding: 0.75rem 1.5rem;
}
-/*=============== REUSABLE CSS CLASSES ===============*/
-.section{
- padding: 4.5rem 0 2rem;
+.c-button--ghost:hover {
+ background: none;
}
-.section__title{
- font-size: var(--h2-font-size);
- margin-bottom: var(--mb-2);
- text-align: center;
+.c-button--link {
+ color: var(--text-color);
}
-/*=============== LAYOUT ===============*/
-.container{
- max-width: 968px;
- margin-left: var(--mb-1-5);
- margin-right: var(--mb-1-5);
+.c-button--flex {
+ display: inline-flex;
+ align-items: center;
+ column-gap: 0.5rem;
}
-.grid{
- display: grid;
+.c-social-media {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ column-gap: 0.5rem;
}
-.main{
- overflow: hidden; /*For animation*/
+.c-social-media a i {
+ font-size: 1rem;
+ transition: var(--transition-general);
}
-/*=============== HEADER ===============*/
-.header{
- width: 100%;
- background: var(--body-color);
- position: fixed;
- top: 0;
- left: 0;
- z-index: var(--z-fixed);
+.c-social-media a i:hover {
+ filter: brightness(0.1);
+ transform: translateY(-10px);
}
-/*=============== NAV ===============*/
-.nav{
- height: var(--header-height);
- display: flex;
- justify-content: space-between;
- align-items: center;
+.c-logo {
+ display: flex;
+ align-items: center;
+ column-gap: 0.5rem;
+ font-weight: var(--font-medium);
+ color: var(--title-color);
}
-.nav__logo{
- display: flex;
- align-items: center;
- column-gap: .5rem;
- font-weight: var(--font-medium);
+/* =============== REUSABLE CSS CLASSES =============== */
+.section {
+ padding: 4.5rem 0 2rem;
}
-.nav__logo-img{
- width: 1.25rem;
+.section__title {
+ font-size: var(--h2-font-size);
+ margin-bottom: var(--mb-2);
+ text-align: center;
}
-.nav__link,
-.nav__logo,
-.nav__toggle,
-.nav__close{
- color: var(--title-color);
+/* =============== LAYOUT =============== */
+.container {
+ max-width: 968px;
+ margin-left: var(--mb-1-5);
+ margin-right: var(--mb-1-5);
}
-.nav__toggle{
- font-size: 1.25rem;
- cursor: pointer;
+.grid {
+ display: grid;
}
-@media screen and (max-width: 767px){
- .nav__menu{
- position: fixed;
+.main {
+ overflow: hidden; /*For animation*/
+}
+
+/* =============== Header =============== */
+.l-header {
width: 100%;
- background: var(--container-color);
- top: -150%;
+ background: var(--body-color);
+ position: fixed;
+ top: 0;
left: 0;
- padding: 3.5rem 0;
- transition: .4s;
+ padding: 0.5rem;
z-index: var(--z-fixed);
- border-radius: 0 0 1.5rem 1.5rem;
- }
}
-.nav__img{
- width: 100px;
- position: absolute;
- top: 0;
- left: 0;
+/* =============== Navigation =============== */
+.l-nav {
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
-.nav__close{
- font-size: 1.8rem;
- position: absolute;
- top: .5rem;
- right: .7rem;
- cursor: pointer;
+.nav__logo {
+ display: flex;
+ align-items: center;
+ column-gap: 0.5rem;
+ font-weight: var(--font-medium);
}
-.nav__list{
- display: flex;
- flex-direction: column;
- align-items: center;
- row-gap: 1.5rem;
+.nav__logo-img {
+ width: 1.25rem;
}
-.nav__link{
- text-transform: uppercase;
- font-weight: var(--font-black);
- transition: .4s;
+.nav__link,
+.nav__logo,
+.nav__toggle,
+.nav__close {
+ color: var(--title-color);
}
-.nav__link:hover{
- color: var(--text-color);
+/* ========= Icons ========= */
+.nav__toggle,
+.nav__close,
+#theme-btn {
+ font-size: 1.5rem;
+ cursor: pointer;
+ position: absolute;
+ transition: var(--transition-general);
+ color: var(--title-color);
}
-/* Show menu */
-.show-menu{
- top: 0;
+.nav__toggle:hover,
+.nav__close:hover,
+#theme-btn:hover,
+#theme-btn.fa-sun:hover {
+ filter: brightness(1.2);
+ transform: scale(1.2);
}
-/* Change background header */
-.scroll-header{
- background: var(--container-color);
+.nav__toggle {
+ top: 1.5rem;
+ right: 1rem;
}
-/* Active link */
-.active-link{
- position: relative;
+.nav__close {
+ font-size: 2rem;
+ top: 1rem;
+ right: 1rem;
}
-.active-link::before{
- content: '';
- position: absolute;
- bottom: -.75rem;
- left: 45%;
- width: 5px;
- height: 5px;
- background-color: var(--title-color);
- border-radius: 50%;
+#theme-btn {
+ top: 1.5rem;
+ right: 3.5rem;
}
-/*=============== HOME ===============*/
-.home__content{
- row-gap: 1rem;
+.nav__toggle,
+#theme-btn.fa-sun {
+ transform: rotate(180deg);
+}
+
+/* ========= Menu ======== */
+@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;
}
-.home__group{
- display: grid;
- position: relative;
- padding-top: 2rem;
+@keyframes spiderMove {
+ to {
+ transform: translateY(0);
+ }
+ from {
+ transform: translateY(10px);
+ }
}
-.home__img{
- height: 250px;
- justify-self: center;
+.nav__list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 1.5rem;
}
-.home__indicator{
- width: 8px;
- height: 8px;
- background-color: var(--title-color);
- border-radius: 50%;
- position: absolute;
- top: 7rem;
- right: 2rem;
+.nav__link {
+ text-transform: uppercase;
+ font-weight: var(--font-black);
+ transition: all 0.2s linear;
}
-.home__indicator::after{
- content: '';
- position: absolute;
- width: 1px;
- height: 48px;
- background-color: var(--title-color);
- top: -3rem;
- right: 45%;
+.nav__link:hover {
+ color: var(--text-color);
}
-.home__details-img{
- position: absolute;
- right: .5rem;
+/* ===== Show menu ===== */
+.show-menu {
+ top: 0;
}
-.home__details-title,
-.home__details-subtitle{
- display: block;
- font-size: var(--small-font-size);
- text-align: right;
+/* ===== Change background header ===== */
+.scroll-header {
+ background: var(--container-color);
+ box-shadow: 10px 10px 100px var(--toggle-color);
+}
+
+/* ===== Active link ===== */
+.active-link {
+ position: relative;
+ width: 0;
}
-.home__subtitle{
- font-size: var(--h3-font-size);
- text-transform: uppercase;
- margin-bottom: var(--mb-1);
+.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 */
+
+ /* border-radius: 50%; */
}
-.home__title{
- font-size: var(--biggest-font-size);
- font-weight: var(--font-black);
- line-height: 109%;
- margin-bottom: var(--mb-1);
+.active-link:hover::after,
+.active-link:hover::before {
+ width: 100%;
}
-.home__description{
- margin-bottom: var(--mb-1);
+/* Scroll indicator */
+.scroll-indicator {
+ position: absolute;
+ top: 99%;
+ left: 0;
+ height: 0.3rem;
+ background: var(--toggle-color);
+ /* z-index: 222; */
}
-.home__buttons{
- display: flex;
- justify-content: space-between;
+/*=============== HOME ===============*/
+.home__content {
+ row-gap: 1rem;
}
-/* Swiper Class */
-.swiper-pagination{
- position: initial;
- margin-top: var(--mb-1);
+.home__group {
+ display: grid;
+ position: relative;
+ padding-top: 2rem;
+}
+
+.home__img {
+ height: 15rem;
+ justify-self: center;
+ animation: pulseImage 1s infinite alternate-reverse;
+}
+
+@keyframes pulseImage {
+ to {
+ transform: scale(1);
+ }
+
+ from {
+ transform: scale(1.1);
+ }
+}
+
+.home__indicator {
+ width: 8px;
+ height: 8px;
+ background-color: var(--title-color);
+ border-radius: 50%;
+ position: absolute;
+ top: 7rem;
+ right: 2rem;
+}
+
+.home__indicator::after {
+ content: '';
+ position: absolute;
+ width: 1px;
+ height: 48px;
+ background-color: var(--title-color);
+ top: -3rem;
+ right: 45%;
}
-.swiper-pagination-bullet{
- width: 5px;
- height: 5px;
- background-color: var(--title-color);
- opacity: 1;
+.home__details-img {
+ position: absolute;
+ right: 0.5rem;
}
-.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
- margin: 0 .5rem;
-}
+.home__details-title,
+.home__details-subtitle {
+ display: block;
+ font-size: var(--small-font-size);
+ text-align: right;
+}
+
+.home__subtitle {
+ font-size: var(--h3-font-size);
+ text-transform: uppercase;
+ margin-bottom: var(--mb-1);
+}
-.swiper-pagination-bullet-active{
- width: 1.5rem;
- height: 5px;
- border-radius: .5rem;
+.home__title {
+ font-size: var(--biggest-font-size);
+ font-weight: var(--font-black);
+ line-height: 109%;
+ margin-bottom: var(--mb-1);
}
-/*=============== 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;
+.home__description {
+ margin-bottom: var(--mb-1);
}
-.button:hover{
- background-color: var(--first-color-alt);
+.home__buttons {
+ display: flex;
+ justify-content: space-between;
}
-.button__icon{
- font-size: 1.25rem;
+/* Swiper Class */
+.swiper,
+.swiper-wrapper {
+ position: relative;
+ max-width: 100%;
}
-.button--ghost{
- border: 2px solid;
- background-color: transparent;
- border-radius: 3rem;
- padding: .75rem 1.5rem;
+.swiper-slide {
+ height: auto;
+ padding: 4rem 1rem;
+ position: absolute;
}
-.button--ghost:hover{
- background: none;
+.swiper-pagination {
+ position: initial;
+ margin-top: var(--mb-1);
+ width: 3rem;
+ height: 3rem;
}
-.button--link{
- color: var(--title-color);
+.swiper-pagination-bullet {
+ width: 5px;
+ height: 5px;
+ position: relative;
+ top: 1rem;
+ background-color: var(--title-color) !important;
+ opacity: 1;
}
-.button--flex{
- display: inline-flex;
- align-items: center;
- column-gap: .5rem;
+.new .swiper-pagination {
+ width: 1px;
+ height: 1px;
+ top: 13rem;
+}
+
+.swiper-pagination-horizontal.swiper-pagination-bullets
+ .swiper-pagination-bullet {
+ margin: 0 0.5rem;
+}
+
+.swiper-pagination-bullet-active {
+ width: 1.5rem;
+ height: 5px;
+ border-radius: 0.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;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.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(--bg-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;
+ 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(--text-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;
+.l-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__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);
+ }
}
-.footer__container{
- row-gap: 2rem;
+@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__logo{
- display: flex;
- align-items: center;
- column-gap: .5rem;
- margin-bottom: var(--mb-1);
- font-weight: var(--font-medium);
- color: var(--title-color);
+.l-footer__container {
+ row-gap: 2rem;
+ z-index: 999;
}
-.footer__logo-img{
- width: 20px;
+.footer__logo-img {
+ width: 20px;
}
-.footer__description{
- margin-bottom: var(--mb-2-5);
+.l-footer__description {
+ margin-bottom: var(--mb-2-5);
+ /* margin-top: 1rem; */
}
-.footer__social{
- display: flex;
- column-gap: .75rem;
+footer .c-logo {
+ margin-bottom: var(--mb-0-25);
}
-.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);
+.l-footer__title {
+ font-size: var(--h3-font-size);
+ margin-bottom: var(--mb-1);
}
-.footer__links{
- display: grid;
- row-gap: .35rem;
+.l-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;
+.l-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;
+/* =============== Scroll up =============== */
+.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;
+ box-shadow: 5px 5px 100px var(--toggle-color);
}
-.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;
+ }
+}
+
+@media screen and (max-width: 576px) {
+ .about__container {
+ flex-direction: column;
+ }
}
/* 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;
+ margin-left: var(--mb-1);
+ margin-right: var(--mb-1);
+ }
+
+ .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;
+ }
+
+ .new .swiper-pagination {
+ width: 1px;
+ height: 1px;
+ top: 12rem;
+ }
+
+ .newsletter__container {
+ grid-template-columns: 0.5fr;
+ }
+
+ .l-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 .swiper-pagination {
+ top: 15.5rem;
+ }
+
+ .new__img {
+ width: 150px;
+ }
+ .new__img,
+ .new__subtitle {
+ margin-bottom: var(--mb-1);
+ }
+ .new__title {
+ font-size: var(--h3-font-size);
+ }
+
+ .l-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 d0fc434..8e3ea9c 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,54 @@
-
+
- Responsive Halloween Website
- 
+
+