Halloween Landing Page using HTML CSS and JavaScript

Share your love

Halloween is a time for thrills, chills, and creative fun. In the world of web design, it offers a perfect opportunity to create a themed landing page that captures the spooky spirit and engages visitors with eerie animations and interactive elements.

In this blog post, we’ll embark on a thrilling journey to build a Halloween-themed landing page using HTML, CSS, and JavaScript. By leveraging the capabilities of these core web technologies, we’ll create a visually stunning and interactive page that will delight and intrigue your audience.

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Halloween Landing Page by DivDev (@krautgti) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Halloween Landing Page using HTML, CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag.

<!-- HEADER -->
<header class="header" id="header">
  <nav class="nav container">
    <a href="#" class="nav__logo"> Spooky </a>
    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list">
        <li class="nav__item">
          <a href="#home" class="nav__link active-link">Graveyard</a>
        </li>
        <li class="nav__item">
          <a href="#about" class="nav__link">Track Record</a>
        </li>
        <li class="nav__item">
          <a href="#trick" class="nav__link">Services</a>
        </li>
        <li class="nav__item">
          <a href="#new" class="nav__link">Know More</a>
        </li>
        <a href="#" class="button button--ghost">Support</a>
      </ul>
      <div class="nav__close" id="nav-close">
        <i class='bx bx-x'></i>
      </div>
      <img src="https://assets.codepen.io/7773162/nav-img.png" alt="" class="nav__img">
    </div>
    <div class="nav__toggle" id="nav-toggle">
      <i class='bx bx-grid-alt'></i>
    </div>
  </nav>
</header>
<main class="main">
  <!-- HOME -->
  <section class="home container" id="home">
    <div class="swiper home-swiper">
      <div class="swiper-wrapper">
        <!-- HOME SLIDER 1 -->
        <section class="swiper-slide">
          <div class="home__content grid">
            <div class="home__group">
              <img src="https://assets.codepen.io/7773162/home3-img.png" alt="" class="home__img">
              <div class="home__indicator"></div>
              <div class="home__details-img">
                <h4 class="home__details-title">Captain Sem</h4>
                <span class="home__details-subtitle">Veteran Spooky Ghost</span>
              </div>
            </div>
            <div class="home__data">
              <h3 class="home__subtitle">#1 Top Scariest Ghost</h3>
              <h1 class="home__title">RESPAWN <br> THE SPOOKY <br> SKULL </h1>
              <p class="home__description">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 <strong>ghostkind. </strong></p>
              <div class="home__buttons">
                <a href="#" class="book--now">
                  <img src="https://assets.codepen.io/7773162/svgviewer-output+%281%29_3.svg" alt="" />
                </a>
                <a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i>
                </a>
              </div>
            </div>
          </div>
        </section>
        <!-- HOME SLIDER 2 -->
        <section class="swiper-slide">
          <div class="home__content grid">
            <div class="home__group">
              <img src="https://assets.codepen.io/7773162/home2-img.png" alt="" class="home__img">
              <div class="home__indicator"></div>
              <div class="home__details-img">
                <h4 class="home__details-title">Adino & Grahami</h4>
                <span class="home__details-subtitle">No words can describe them</span>
              </div>
            </div>
            <div class="home__data">
              <h3 class="home__subtitle">#2 top Best duo</h3>
              <h1 class="home__title">BRING BACK <br> MY COTTON <br> CANDY </h1>
              <p class="home__description">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. </p>
              <div class="home__buttons">
                <a href="#" class="book--now">
                  <img src="https://assets.codepen.io/7773162/svgviewer-output+%281%29_3.svg" alt="" />
                </a>
                <a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i>
                </a>
              </div>
            </div>
          </div>
        </section>
        <!-- HOME SLIDER 3 -->
        <section class="swiper-slide">
          <div class="home__content grid">
            <div class="home__group">
              <img src="https://assets.codepen.io/7773162/home1-img.png" alt="" class="home__img">
              <div class="home__indicator"></div>
              <div class="home__details-img">
                <h4 class="home__details-title">The Labu “Reiza”</h4>
                <span class="home__details-subtitle">The Living Pumpkin</span>
              </div>
            </div>
            <div class="home__data">
              <h3 class="pumpkin__subtitle">#3 Top Scariest Ghost 2020</h3>
              <h1 class="home__title">UOOOO <br> TRICK OR <br> TREAT!! </h1>
              <p class="home__description">Hi I’m Reiza, people call me “The Labu” currently I’m trying to learn something new, building my own bike with parts only made from Malaysia. </p>
              <div class="home__buttons">
                <a href="#" class="book--now">
                  <img src="https://assets.codepen.io/7773162/svgviewer-output+%282%29_2.svg" alt="" />
                </a>
                <a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i>
                </a>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </section>
  <!-- CATEGORY -->
  <section class="section category">
    <h2 class="section__title">Favorite Scare <br> Category </h2>
    <div class="category__container container grid">
      <div class="category__data">
        <img src="https://assets.codepen.io/7773162/category1-img.png" alt="" class="category__img">
        <h3 class="category__title">Ghosts</h3>
        <p class="category__description">Choose the ghosts, the scariest there are.</p>
      </div>
      <div class="category__data">
        <img src="https://assets.codepen.io/7773162/category2-img.png" alt="" class="category__img">
        <h3 class="category__title">Pumpkins</h3>
        <p class="category__description">You look at the scariest pumpkins there is.</p>
      </div>
      <div class="category__data">
        <img src="https://assets.codepen.io/7773162/category3-img.png" alt="" class="category__img">
        <h3 class="category__title">Witch Hat</h3>
        <p class="category__description">Pick the most stylish witch hats out there.</p>
      </div>
    </div>
  </section>
  <!-- ABOUT -->
  <section class="section about" id="about">
    <div class="about__container container grid">
      <div class="about__data">
        <h2 class="section__title about__title">About Halloween <br> Night </h2>
        <p class="about__description">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. </p>
        <a href="#" class="book--now">
          <img src="https://assets.codepen.io/7773162/svgviewer-output+%281%29_3.svg" alt="" />
        </a>
      </div>
      <img src="https://assets.codepen.io/7773162/about-img.png" alt="" class="about__img">
    </div>
  </section>
  <!-- TRICK OR TREAT -->
  <section class="section trick" id="trick">
    <h2 class="section__title">Trick Or Treat</h2>
    <div class="trick__container container grid">
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat1-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Toffee</h3>
        <span class="trick__subtitle">Candy</span>
        <span class="trick__price">$11.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat2-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Bone</h3>
        <span class="trick__subtitle">Accessory</span>
        <span class="trick__price">$8.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat3-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Scarecrow</h3>
        <span class="trick__subtitle">Accessory</span>
        <span class="trick__price">$15.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat4-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Candy Cane</h3>
        <span class="trick__subtitle">Candy</span>
        <span class="trick__price">$7.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat5-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Pumpkin</h3>
        <span class="trick__subtitle">Candy</span>
        <span class="trick__price">$19.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
      <div class="trick__content">
        <img src="https://assets.codepen.io/7773162/trick-treat6-img.png" alt="" class="trick__img">
        <h3 class="trick__title">Ghost</h3>
        <span class="trick__subtitle">Accessory</span>
        <span class="trick__price">$17.99</span>
        <button class="button trick__button">
          <i class='bx bx-cart-alt trick__icon'></i>
        </button>
      </div>
    </div>
  </section>
  <!-- DISCOUNT -->
  <section class="section discount">
    <div class="discount__container container grid">
      <div class="discount__data">
        <h2 class="discount__title">50% Discount <br> On New Products </h2>
        <a href="#" class="book--now">
          <img src="https://assets.codepen.io/7773162/svgviewer-output+%281%29_3.svg" alt="" />
        </a>
      </div>
      <img src="https://assets.codepen.io/7773162/discount-img.png" alt="" class="discount__img">
    </div>
  </section>
  <!-- NEW ARRIVALS -->
  <section class="section new" id="new">
    <h2 class="section__title">New Arrivals</h2>
    <div class="new__container container">
      <div class="swiper new-swiper">
        <div class="swiper-wrapper">
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new1-img.png" alt="" class="new__img">
            <h3 class="new__title">Haunted House</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$14.99</span>
              <span class="new__discount">$29.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new2-img.png" alt="" class="new__img">
            <h3 class="new__title">Halloween Candle</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$11.99</span>
              <span class="new__discount">$21.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new3-img.png" alt="" class="new__img">
            <h3 class="new__title">Witch Hat</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$4.99</span>
              <span class="new__discount">$9.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new4-img.png" alt="" class="new__img">
            <h3 class="new__title">Rip</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$24.99</span>
              <span class="new__discount">$44.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new5-img.png" alt="" class="new__img">
            <h3 class="new__title">Terrifying Crystal Ball</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$5.99</span>
              <span class="new__discount">$12.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
          <div class="new__content swiper-slide">
            <div class="new__tag">
              <img src="https://assets.codepen.io/7773162/svgviewer-output+%286%29_1.svg" alt="" />
            </div>
            <img src="https://assets.codepen.io/7773162/new6-img.png" alt="" class="new__img">
            <h3 class="new__title">Witch Broom</h3>
            <span class="new__subtitle">Accessory</span>
            <div class="new__prices">
              <span class="new__price">$7.99</span>
              <span class="new__discount">$14.99</span>
            </div>
            <button class="button new__button">
              <i class='bx bx-cart-alt new__icon'></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- OUR NEWSLETTER -->
  <section class="section newsletter">
    <div class="newsletter__container container">
      <h2 class="section__title">Our Newsletter</h2>
      <p class="newsletter__description"> Promotion new products and sales. Directly to your inbox </p>
      <form action="" class="newsletter__form">
        <input type="text" placeholder="Enter your email" class="newsletter__input">
        <a href="#" class="book--now">
          <img src="https://assets.codepen.io/7773162/svgviewer-output+%281%29_3.svg" alt="" />
        </a>
      </form>
    </div>
  </section>
</main>
<!-- SCROLL UP -->
<a href="#" class="scrollup" id="scroll-up">
  <i class='bx bx-up-arrow-alt scrollup__icon'></i>
</a>

CSS Code 

Create a file style.css and paste the code below.

/* 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%);
  /*Red gradient*/
  --body-color: linear-gradient(
    90deg,
    hsl(338, 67%, 11%) 0%,
    hsl(281, 63%, 10%) 100%
  );
  --container-color: linear-gradient(
    136deg,
    hsl(338, 67%, 11%) 0%,
    hsl(281, 63%, 10%) 100%
  );
  --sub: #ff5b79;
  /* 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;
  /* 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: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}
/* BASE */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
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);
  transition: 0.3s;
}
h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
button,
input {
  border: none;
  outline: none;
}
button {
  cursor: pointer;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}
/* REUSABLE CSS CLASSES */
.section {
  padding: 4.5rem 0 2rem;
}
.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);
}
.grid {
  display: grid;
}
.main {
  overflow: hidden; /*For animation*/
}
/* HEADER */
.header {
  width: 100%;
  background: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}
/* NAV */
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-weight: var(--font-medium);
}
.nav__logo-img {
  width: 1.25rem;
}
.nav__link,
.nav__logo,
.nav__toggle,
.nav__close {
  color: var(--sub);
}
.nav__toggle {
  font-size: 1.25rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    width: 100%;
    background: var(--container-color);
    top: -150%;
    left: 0;
    color: #ff5b79;
    padding: 3.5rem 0;
    transition: 0.4s;
    z-index: var(--z-fixed);
    border-radius: 0 0 1.5rem 1.5rem;
  }
}
.nav__img {
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
}
.nav__close {
  font-size: 1.8rem;
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  cursor: pointer;
}
.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: 0.4s;
}
.nav__link:hover {
  color: var(--text-color);
}
/* Show menu */
.show-menu {
  top: 0;
}
/* Change background header */
.scroll-header {
  background: var(--container-color);
}
/* Active link */
.active-link {
  position: relative;
}
.active-link::before {
  content: "";
  position: absolute;
  bottom: -0.75rem;
  left: 45%;
  width: 5px;
  height: 5px;
  background-color: var(--sub);
  border-radius: 50%;
}
/* HOME */
.home__content {
  row-gap: 1rem;
}
.home__group {
  display: grid;
  position: relative;
  padding-top: 2rem;
}
.home__img {
  height: 250px;
  justify-self: center;
}
.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%;
}
.home__details-img {
  position: absolute;
  right: 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);
  color: var(--sub);
  text-transform: uppercase;
  margin-bottom: var(--mb-1);
}
.pumpkin__subtitle {
  font-size: var(--h3-font-size);
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: var(--mb-1);
}
.home__title {
  font-size: var(--biggest-font-size);
  font-weight: var(--font-black);
  line-height: 109%;
  margin-bottom: var(--mb-1);
}
.home__description {
  margin-bottom: var(--mb-1);
}
.home__buttons {
  display: flex;
  justify-content: space-between;
}
/* Swiper Class */
.swiper-pagination {
  position: initial;
  margin-top: var(--mb-1);
}
.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  opacity: 1;
}
.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;
}
/* BUTTONS */
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: var(--sub);
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.3s;
}
.button:hover {
  background-color: var(--first-color-alt);
}

.button__icon {
  font-size: 1.25rem;
}
.book--now {
  display: inline-block;
  transition: 0.3s;
}
.book--now:hover {
  transform: scale(1.2);
}
.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;
}
/* CATEGORY */
.category__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}
.category__data {
  text-align: center;
}
.category__img {
  width: 120px;
  margin-bottom: var(--mb-0-75);
  transition: 0.3s;
}
.category__title {
  margin-bottom: var(--mb-0-25);
}
.category__data:hover .category__img {
  transform: translateY(-0.5rem);
}
/* ABOUT */
.about__container {
  row-gap: 2rem;
}
.about__data {
  text-align: center;
}
.about__description {
  margin-bottom: var(--mb-2);
}
.about__img {
  width: 200px;
  justify-self: center;
  animation: floating 2s ease-in-out infinite;
}
/* TRICK OR TREAT */
.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__img {
  width: 90px;
  transition: 0.3s;
}
.trick__subtitle,
.trick__price {
  display: block;
}
.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: 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__content:hover .trick__img {
  transform: translateY(-0.5rem);
}
.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: 0.75rem;
}
.discount__data {
  text-align: center;
}
.discount__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
}
.discount__img {
  width: 200px;
  justify-self: center;
}
/* NEW ARRIVALS */
.new__container {
  padding-top: 1rem;
}
.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: 0.75rem;
  text-align: center;
  overflow: hidden;
}
.new__tag {
  position: absolute;
  top: 8%;
  left: 8%;
}
.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__prices {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
}
.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__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__content:hover .new__img {
  transform: translateY(-0.5rem);
}
.new__content:hover .new__button {
  right: 0;
}
/* NEWSLETTER */
.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: 0.75rem;
}
.newsletter__input {
  width: 70%;
  padding: 0 0.5rem;
  background: none;
  color: var(--title-color);
}
.newsletter__input::placeholder {
  color: var(--text-color);
}
/* FOOTER */
.footer {
  position: relative;
  overflow: hidden;
}
.footer__img-one,
.footer__img-two {
  position: absolute;
  transition: 0.3s;
}
.footer__img-one {
  width: 100px;
  top: 6rem;
  right: -2rem;
}
.footer__img-two {
  width: 150px;
  bottom: 4rem;
  right: 4rem;
}
.footer__img-one:hover,
.footer__img-two:hover {
  transform: translateY(-0.5rem);
}
.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__description {
  margin-bottom: var(--mb-2-5);
}
.footer__social {
  display: flex;
  column-gap: 0.75rem;
}
.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__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}
.footer__links {
  display: grid;
  row-gap: 0.35rem;
}
.footer__link {
  font-size: var(--small-font-size);
  color: var(--text-color);
  transition: 0.3s;
}
.footer__link:hover {
  color: var(--title-color);
}
.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: 0.3rem;
  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:hover {
  background: var(--container-color);
  opacity: 1;
}
/* Show Scroll Up*/
.show-scroll {
  bottom: 3rem;
}
/* SCROLL BAR */
::-webkit-scrollbar {
  width: 0.6rem;
  background: #413e3e;
}
::-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: 0.8fr;
    justify-content: center;
  }
}
/* For medium devices */
@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: 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%;
  }
}
/* KEYFRAMES */
@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}
.skull-blur {
  position: absolute;
  width: 680px;
  height: 632px;
  left: -79px;
  top: 75%;
  background: linear-gradient(
    142.97deg,
    rgba(0, 255, 133, 0.3) 17.43%,
    rgba(63, 239, 60, 0.22) 73.23%
  );
  filter: blur(157.708px);
}

JavaScript Code 

Create a file script.js and paste the code below.

/* SHOW MENU */
const navMenu = document.getElementById("nav-menu"),
  navToggle = document.getElementById("nav-toggle"),
  navClose = document.getElementById("nav-close");

/* MENU SHOW */
/* Validate if constant exists */
if (navToggle) {
  navToggle.addEventListener("click", () => {
    navMenu.classList.add("show-menu");
  });
}

/* MENU HIDDEN */
/* Validate if constant exists */
if (navClose) {
  navClose.addEventListener("click", () => {
    navMenu.classList.remove("show-menu");
  });
}

/* REMOVE MENU MOBILE */
const navLink = document.querySelectorAll(".nav__link");

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 body's background color */

let root = document.documentElement;

homeSwiper.on("transitionEnd", function (e) {
  if (this.activeIndex == 1) {
    root.style.setProperty(
      "--body-color",
      "linear-gradient(to right, #2E0916, #200A2B)"
    );
    root.style.setProperty("--sub", "#ff5b79");
    root.style.setProperty("--title-color", "#ffffff");
    root.style.setProperty(
      "--container-color",
      "linear-gradient(136deg, #2E0916, #200A2B)"
    );
  }
  if (this.activeIndex == 2) {
    root.style.setProperty(
      "--body-color",
      "linear-gradient(to right, #E8CAFB, #6A4FB6)"
    );
    root.style.setProperty("--sub", "#303056");
    root.style.setProperty("--title-color", "#303056");
    root.style.setProperty(
      "--container-color",
      "linear-gradient(136deg, #E8CAFB, #6A4FB6)"
    );
  }
  if (this.activeIndex == 3) {
    root.style.setProperty(
      "--body-color",
      "linear-gradient(to right, #5B874B, #0C3720)"
    );
    root.style.setProperty("--sub", "#ffffff");
    root.style.setProperty("--title-color", "#ffffff");
    root.style.setProperty(
      "--container-color",
      "linear-gradient(136deg, #5B874B, #0C3720)"
    );
  }
});
/* 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);

/* NEW SWIPER */
let newSwiper = new Swiper(".new-swiper", {
  centeredSlides: true,
  slidesPerView: "auto",
  loop: "true",
  spaceBetween: 16
});

/* SCROLL SECTIONS ACTIVE LINK */
const sections = document.querySelectorAll("section[id]");

function scrollActive() {
  const scrollY = window.pageYOffset;

  sections.forEach((current) => {
    const sectionHeight = current.offsetHeight,
      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");
    }
  });
}
window.addEventListener("scroll", scrollActive);

/* 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");
}
window.addEventListener("scroll", scrollUp);

/* SCROLL REVEAL ANIMATION */
const sr = ScrollReveal({
  origin: "top",
  distance: "60px",
  duration: 2500,
  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" });

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/krautgti/pen/KKRRGdN

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love