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đź’–
