Responsive Hero with Dark Mode using HTML CSS and JavaScript

Share your love

In the dynamic realm of web design, the hero section stands as the gateway to captivating user engagement. It’s the first impression, the visual handshake that welcomes visitors to your digital domain. But in today’s ever-evolving landscape, a static hero just won’t cut it. Users demand responsiveness, adaptability, and even customization options like dark mode.

In this blog post, we embark on a journey to construct a responsive hero section that seamlessly transitions between light and dark modes. Armed with HTML, CSS, and JavaScript, we’ll unravel the intricacies of crafting a visually stunning and functionally dynamic centerpiece for your website.

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

Demo

HTML Code 

Starter Template

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>Responsive Hero with Dark Mode using HTML CSS and JavaScript - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>
<!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>Responsive Hero with Dark Mode using HTML CSS and JavaScript - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="script.js"></script> </body> </html>
<!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>Responsive Hero with Dark Mode 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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<header class="header" id="header">
<nav class="navbar container">
<a href="#" class="brand">Brand</a>
<div class="burger" id="burger">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</div>
<div class="menu" id="menu">
<ul class="menu-inner">
<li class="menu-item"><a href="#" class="menu-link">Home</a></li>
<li class="menu-item"><a href="#" class="menu-link">Feature</a></li>
<li class="menu-item"><a href="#" class="menu-link">Pricing</a></li>
<li class="menu-item"><a href="#" class="menu-link">Support</a></li>
</ul>
</div>
<button class="switch" id="switch">
<i class="switch-light bx bx-sun"></i>
<i class="switch-dark bx bx-moon"></i>
</button>
</nav>
</header>
<main class="main">
<section class="section banner banner-section">
<div class="container banner-column">
<img class="banner-image" src="https://i.ibb.co/sVqYmS2/Illustration.png" alt="Illustration">
<div class="banner-inner">
<h1 class="heading-xl">All Your Files in One Secure Location.</h1>
<p class="paragraph">
We stores all your most important files in one secure location.
Access them whenever needed, share and collaborate with
your connections.
</p>
<button class="btn btn-darken btn-inline">
Get Started<i class="bx bx-right-arrow-alt"></i>
</button>
</div>
</div>
</section>
</main>
<header class="header" id="header"> <nav class="navbar container"> <a href="#" class="brand">Brand</a> <div class="burger" id="burger"> <span class="burger-line"></span> <span class="burger-line"></span> <span class="burger-line"></span> </div> <div class="menu" id="menu"> <ul class="menu-inner"> <li class="menu-item"><a href="#" class="menu-link">Home</a></li> <li class="menu-item"><a href="#" class="menu-link">Feature</a></li> <li class="menu-item"><a href="#" class="menu-link">Pricing</a></li> <li class="menu-item"><a href="#" class="menu-link">Support</a></li> </ul> </div> <button class="switch" id="switch"> <i class="switch-light bx bx-sun"></i> <i class="switch-dark bx bx-moon"></i> </button> </nav> </header> <main class="main"> <section class="section banner banner-section"> <div class="container banner-column"> <img class="banner-image" src="https://i.ibb.co/sVqYmS2/Illustration.png" alt="Illustration"> <div class="banner-inner"> <h1 class="heading-xl">All Your Files in One Secure Location.</h1> <p class="paragraph"> We stores all your most important files in one secure location. Access them whenever needed, share and collaborate with your connections. </p> <button class="btn btn-darken btn-inline"> Get Started<i class="bx bx-right-arrow-alt"></i> </button> </div> </div> </section> </main>
<header class="header" id="header">
   <nav class="navbar container">
      <a href="#" class="brand">Brand</a>
      <div class="burger" id="burger">
         <span class="burger-line"></span>
         <span class="burger-line"></span>
         <span class="burger-line"></span>
      </div>
      <div class="menu" id="menu">
         <ul class="menu-inner">
            <li class="menu-item"><a href="#" class="menu-link">Home</a></li>
            <li class="menu-item"><a href="#" class="menu-link">Feature</a></li>
            <li class="menu-item"><a href="#" class="menu-link">Pricing</a></li>
            <li class="menu-item"><a href="#" class="menu-link">Support</a></li>
         </ul>
      </div>
      <button class="switch" id="switch">
         <i class="switch-light bx bx-sun"></i>
         <i class="switch-dark bx bx-moon"></i>
      </button>
   </nav>
</header>
<main class="main">
   <section class="section banner banner-section">
      <div class="container banner-column">
         <img class="banner-image" src="https://i.ibb.co/sVqYmS2/Illustration.png" alt="Illustration">
         <div class="banner-inner">
            <h1 class="heading-xl">All Your Files in One Secure Location.</h1>
            <p class="paragraph">
               We stores all your most important files in one secure location.
               Access them whenever needed, share and collaborate with
               your connections.
            </p>
            <button class="btn btn-darken btn-inline">
               Get Started<i class="bx bx-right-arrow-alt"></i>
            </button>
         </div>
      </div>
   </section>
</main>

CSS Code 

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
:root {
--color-white-100: hsl(206, 0%, 100%);
--color-white-200: hsl(206, 0%, 90%);
--color-white-300: hsl(206, 0%, 80%);
--color-white-400: hsl(206, 0%, 65%);
--color-white-500: hsl(206, 0%, 50%);
--color-black-100: hsl(217, 30%, 18%);
--color-black-200: hsl(217, 27%, 15%);
--color-black-300: hsl(217, 27%, 12%);
--color-black-400: hsl(217, 52%, 9%);
--color-blue-100: hsl(215, 97%, 87%);
--color-blue-200: hsl(215, 96%, 78%);
--color-blue-300: hsl(215, 94%, 68%);
--color-blue-400: hsl(215, 91%, 60%);
--color-blue-500: hsl(215, 83%, 53%);
--color-blue-600: hsl(215, 76%, 48%);
--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
list-style-type: none;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html {
font-size: 100%;
box-sizing: inherit;
scroll-behavior: smooth;
height: -webkit-fill-available;
}
body {
font-family: "Poppins", sans-serif;
font-size: clamp(1rem, 2vw, 1.125rem);
font-weight: 400;
line-height: 1.5;
color: var(--color-black-400);
background-color: var(--color-white-100);
&.darkmode {
color: var(--color-white-100);
background-color: var(--color-black-400);
}
}
main {
overflow: hidden;
}
p {
text-wrap: balance;
}
a,
button {
cursor: pointer;
user-select: none;
border: none;
outline: none;
background: none;
}
img,
video {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}
// Elements
.section {
margin: 0 auto;
padding: 5rem 0 2rem;
}
.container {
max-width: 75rem;
height: auto;
margin: 0 auto;
padding: 0 1.25rem;
}
.paragraph {
font-family: inherit;
text-wrap: balance;
color: inherit;
}
.heading {
&-xl {
font-family: inherit;
font-size: clamp(2.648rem, 6vw, 4.241rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -1px;
}
&-lg {
font-family: inherit;
font-size: clamp(2.179rem, 5vw, 3.176rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -1px;
}
&-md {
font-family: inherit;
font-size: clamp(1.794rem, 4vw, 2.379rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -1px;
}
}
.btn {
display: inline-block;
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
vertical-align: middle;
white-space: nowrap;
user-select: none;
outline: none;
border: none;
border-radius: 0.25rem;
text-transform: unset;
transition: all 0.3s ease-in-out;
&-inline {
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 0.5rem;
}
&-darken {
padding: 0.75rem 2rem;
color: var(--color-white-100);
background-color: var(--color-black-200);
box-shadow: var(--shadow-medium);
.darkmode & {
background-color: var(--color-blue-500);
}
}
}
// Headers
.header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: auto;
margin: 0 auto;
background-color: var(--color-white-100);
box-shadow: var(--shadow-medium);
.darkmode & {
background-color: var(--color-black-400);
}
}
.navbar {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: space-between;
width: 100%;
height: 4rem;
margin: 0 auto;
}
.brand {
font-family: inherit;
font-size: 1.6rem;
font-weight: 600;
line-height: 1.25;
margin-right: auto;
letter-spacing: -1px;
text-transform: uppercase;
color: var(--color-blue-500);
.darkmode & {
color: var(--color-white-100);
}
}
.menu {
position: fixed;
top: 0;
left: -100%;
z-index: 10;
width: 100%;
height: 100vh;
overflow: hidden;
color: var(--color-black-400);
background-color: var(--color-white-100);
box-shadow: var(--shadow-medium);
transition: all 0.4s ease-in-out;
.darkmode & {
color: var(--color-white-100);
background-color: var(--color-black-400);
}
&.is-active {
left: 0;
}
&-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 1.25rem;
margin-top: 7rem;
}
&-link {
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
color: inherit;
text-transform: uppercase;
transition: all 0.3s ease;
}
// Responsive Media Query
@media only screen and (min-width: 48rem) {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 0rem;
margin-left: auto;
background: none;
box-shadow: none;
transition: none;
&-inner {
display: flex;
flex-direction: row;
column-gap: 2rem;
margin: 0 auto;
}
&-link {
text-transform: capitalize;
}
}
}
.burger {
position: relative;
display: block;
cursor: pointer;
user-select: none;
order: -1;
z-index: 12;
width: 1.6rem;
height: 1.15rem;
margin-right: 1.25rem;
border: none;
outline: none;
background: none;
visibility: visible;
transform: rotate(0deg);
transition: 0.35s ease;
@media only screen and (min-width: 48rem) {
display: none;
visibility: hidden;
}
&-line {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
border: none;
outline: none;
opacity: 1;
border-radius: 1rem;
transform: rotate(0deg);
background-color: var(--color-black-300);
transition: 0.25s ease-in-out;
.darkmode & {
background-color: var(--color-white-100);
}
&:nth-child(1) {
top: 0px;
}
&:nth-child(2) {
top: 0.5rem;
width: 70%;
}
&:nth-child(3) {
top: 1rem;
}
}
&.is-active .burger-line {
&:nth-child(1) {
top: 0.5rem;
transform: rotate(135deg);
}
&:nth-child(2) {
opacity: 0;
visibility: hidden;
}
&:nth-child(3) {
top: 0.5rem;
transform: rotate(-135deg);
}
}
}
.switch {
position: relative;
display: block;
cursor: pointer;
user-select: none;
z-index: 9;
margin-left: 5rem;
margin-right: 0.5rem;
&-light,
&-dark {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in;
}
&-light {
font-size: 1.45rem;
visibility: visible;
color: var(--color-black-300);
.darkmode & {
font-size: 0rem;
visibility: hidden;
}
}
&-dark {
font-size: 0rem;
visibility: hidden;
color: var(--color-white-100);
.darkmode & {
font-size: 1.45rem;
visibility: visible;
}
}
}
// Banners
.banner {
&-column {
position: relative;
display: grid;
align-items: center;
row-gap: 2rem;
// Responsive Media Query
@media only screen and (min-width: 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
margin-top: 4rem;
}
@media only screen and (min-width: 64rem) {
grid-template-columns: 1fr max-content;
column-gap: 2rem;
}
}
&-image {
display: block;
max-width: 25rem;
height: auto;
object-fit: cover;
justify-self: center;
// Responsive Media Query
@media only screen and (min-width: 48rem) {
order: 1;
max-width: 28rem;
height: auto;
}
@media only screen and (min-width: 64rem) {
max-width: 33rem;
height: auto;
}
}
&-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 1.5rem;
}
}
:root { --color-white-100: hsl(206, 0%, 100%); --color-white-200: hsl(206, 0%, 90%); --color-white-300: hsl(206, 0%, 80%); --color-white-400: hsl(206, 0%, 65%); --color-white-500: hsl(206, 0%, 50%); --color-black-100: hsl(217, 30%, 18%); --color-black-200: hsl(217, 27%, 15%); --color-black-300: hsl(217, 27%, 12%); --color-black-400: hsl(217, 52%, 9%); --color-blue-100: hsl(215, 97%, 87%); --color-blue-200: hsl(215, 96%, 78%); --color-blue-300: hsl(215, 94%, 68%); --color-blue-400: hsl(215, 91%, 60%); --color-blue-500: hsl(215, 83%, 53%); --color-blue-600: hsl(215, 76%, 48%); --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; list-style: none; list-style-type: none; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { font-size: 100%; box-sizing: inherit; scroll-behavior: smooth; height: -webkit-fill-available; } body { font-family: "Poppins", sans-serif; font-size: clamp(1rem, 2vw, 1.125rem); font-weight: 400; line-height: 1.5; color: var(--color-black-400); background-color: var(--color-white-100); &.darkmode { color: var(--color-white-100); background-color: var(--color-black-400); } } main { overflow: hidden; } p { text-wrap: balance; } a, button { cursor: pointer; user-select: none; border: none; outline: none; background: none; } img, video { display: block; max-width: 100%; height: auto; object-fit: cover; } // Elements .section { margin: 0 auto; padding: 5rem 0 2rem; } .container { max-width: 75rem; height: auto; margin: 0 auto; padding: 0 1.25rem; } .paragraph { font-family: inherit; text-wrap: balance; color: inherit; } .heading { &-xl { font-family: inherit; font-size: clamp(2.648rem, 6vw, 4.241rem); font-weight: 700; line-height: 1.15; letter-spacing: -1px; } &-lg { font-family: inherit; font-size: clamp(2.179rem, 5vw, 3.176rem); font-weight: 700; line-height: 1.15; letter-spacing: -1px; } &-md { font-family: inherit; font-size: clamp(1.794rem, 4vw, 2.379rem); font-weight: 700; line-height: 1.25; letter-spacing: -1px; } } .btn { display: inline-block; font-family: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.5; text-align: center; vertical-align: middle; white-space: nowrap; user-select: none; outline: none; border: none; border-radius: 0.25rem; text-transform: unset; transition: all 0.3s ease-in-out; &-inline { display: inline-flex; align-items: center; justify-content: center; column-gap: 0.5rem; } &-darken { padding: 0.75rem 2rem; color: var(--color-white-100); background-color: var(--color-black-200); box-shadow: var(--shadow-medium); .darkmode & { background-color: var(--color-blue-500); } } } // Headers .header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: auto; margin: 0 auto; background-color: var(--color-white-100); box-shadow: var(--shadow-medium); .darkmode & { background-color: var(--color-black-400); } } .navbar { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: space-between; width: 100%; height: 4rem; margin: 0 auto; } .brand { font-family: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1.25; margin-right: auto; letter-spacing: -1px; text-transform: uppercase; color: var(--color-blue-500); .darkmode & { color: var(--color-white-100); } } .menu { position: fixed; top: 0; left: -100%; z-index: 10; width: 100%; height: 100vh; overflow: hidden; color: var(--color-black-400); background-color: var(--color-white-100); box-shadow: var(--shadow-medium); transition: all 0.4s ease-in-out; .darkmode & { color: var(--color-white-100); background-color: var(--color-black-400); } &.is-active { left: 0; } &-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1.25rem; margin-top: 7rem; } &-link { font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; color: inherit; text-transform: uppercase; transition: all 0.3s ease; } // Responsive Media Query @media only screen and (min-width: 48rem) { position: relative; top: 0; left: 0; width: auto; height: auto; padding: 0rem; margin-left: auto; background: none; box-shadow: none; transition: none; &-inner { display: flex; flex-direction: row; column-gap: 2rem; margin: 0 auto; } &-link { text-transform: capitalize; } } } .burger { position: relative; display: block; cursor: pointer; user-select: none; order: -1; z-index: 12; width: 1.6rem; height: 1.15rem; margin-right: 1.25rem; border: none; outline: none; background: none; visibility: visible; transform: rotate(0deg); transition: 0.35s ease; @media only screen and (min-width: 48rem) { display: none; visibility: hidden; } &-line { position: absolute; display: block; left: 0; width: 100%; height: 2px; border: none; outline: none; opacity: 1; border-radius: 1rem; transform: rotate(0deg); background-color: var(--color-black-300); transition: 0.25s ease-in-out; .darkmode & { background-color: var(--color-white-100); } &:nth-child(1) { top: 0px; } &:nth-child(2) { top: 0.5rem; width: 70%; } &:nth-child(3) { top: 1rem; } } &.is-active .burger-line { &:nth-child(1) { top: 0.5rem; transform: rotate(135deg); } &:nth-child(2) { opacity: 0; visibility: hidden; } &:nth-child(3) { top: 0.5rem; transform: rotate(-135deg); } } } .switch { position: relative; display: block; cursor: pointer; user-select: none; z-index: 9; margin-left: 5rem; margin-right: 0.5rem; &-light, &-dark { position: absolute; top: 50%; left: 50%; transform-origin: center; transform: translate(-50%, -50%); transition: all 0.3s ease-in; } &-light { font-size: 1.45rem; visibility: visible; color: var(--color-black-300); .darkmode & { font-size: 0rem; visibility: hidden; } } &-dark { font-size: 0rem; visibility: hidden; color: var(--color-white-100); .darkmode & { font-size: 1.45rem; visibility: visible; } } } // Banners .banner { &-column { position: relative; display: grid; align-items: center; row-gap: 2rem; // Responsive Media Query @media only screen and (min-width: 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; margin-top: 4rem; } @media only screen and (min-width: 64rem) { grid-template-columns: 1fr max-content; column-gap: 2rem; } } &-image { display: block; max-width: 25rem; height: auto; object-fit: cover; justify-self: center; // Responsive Media Query @media only screen and (min-width: 48rem) { order: 1; max-width: 28rem; height: auto; } @media only screen and (min-width: 64rem) { max-width: 33rem; height: auto; } } &-inner { display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.5rem; } }
:root {
   --color-white-100: hsl(206, 0%, 100%);
   --color-white-200: hsl(206, 0%, 90%);
   --color-white-300: hsl(206, 0%, 80%);
   --color-white-400: hsl(206, 0%, 65%);
   --color-white-500: hsl(206, 0%, 50%);

   --color-black-100: hsl(217, 30%, 18%);
   --color-black-200: hsl(217, 27%, 15%);
   --color-black-300: hsl(217, 27%, 12%);
   --color-black-400: hsl(217, 52%, 9%);

   --color-blue-100: hsl(215, 97%, 87%);
   --color-blue-200: hsl(215, 96%, 78%);
   --color-blue-300: hsl(215, 94%, 68%);
   --color-blue-400: hsl(215, 91%, 60%);
   --color-blue-500: hsl(215, 83%, 53%);
   --color-blue-600: hsl(215, 76%, 48%);

   --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

html {
   font-size: 100%;
   box-sizing: inherit;
   scroll-behavior: smooth;
   height: -webkit-fill-available;
}

body {
   font-family: "Poppins", sans-serif;
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 400;
   line-height: 1.5;
   color: var(--color-black-400);
   background-color: var(--color-white-100);

   &.darkmode {
      color: var(--color-white-100);
      background-color: var(--color-black-400);
   }
}

main {
   overflow: hidden;
}

p {
   text-wrap: balance;
}

a,
button {
   cursor: pointer;
   user-select: none;
   border: none;
   outline: none;
   background: none;
}

img,
video {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

// Elements
.section {
   margin: 0 auto;
   padding: 5rem 0 2rem;
}

.container {
   max-width: 75rem;
   height: auto;
   margin: 0 auto;
   padding: 0 1.25rem;
}

.paragraph {
   font-family: inherit;
   text-wrap: balance;
   color: inherit;
}

.heading {
   &-xl {
      font-family: inherit;
      font-size: clamp(2.648rem, 6vw, 4.241rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -1px;
   }

   &-lg {
      font-family: inherit;
      font-size: clamp(2.179rem, 5vw, 3.176rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -1px;
   }

   &-md {
      font-family: inherit;
      font-size: clamp(1.794rem, 4vw, 2.379rem);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -1px;
   }
}

.btn {
   display: inline-block;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
   outline: none;
   border: none;
   border-radius: 0.25rem;
   text-transform: unset;
   transition: all 0.3s ease-in-out;

   &-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      column-gap: 0.5rem;
   }

   &-darken {
      padding: 0.75rem 2rem;
      color: var(--color-white-100);
      background-color: var(--color-black-200);
      box-shadow: var(--shadow-medium);

      .darkmode & {
         background-color: var(--color-blue-500);
      }
   }
}

// Headers
.header {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   width: 100%;
   height: auto;
   margin: 0 auto;
   background-color: var(--color-white-100);
   box-shadow: var(--shadow-medium);

   .darkmode & {
      background-color: var(--color-black-400);
   }
}

.navbar {
   display: flex;
   flex-direction: row;
   align-items: center;
   align-content: center;
   justify-content: space-between;
   width: 100%;
   height: 4rem;
   margin: 0 auto;
}

.brand {
   font-family: inherit;
   font-size: 1.6rem;
   font-weight: 600;
   line-height: 1.25;
   margin-right: auto;
   letter-spacing: -1px;
   text-transform: uppercase;
   color: var(--color-blue-500);

   .darkmode & {
      color: var(--color-white-100);
   }
}

.menu {
   position: fixed;
   top: 0;
   left: -100%;
   z-index: 10;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   color: var(--color-black-400);
   background-color: var(--color-white-100);
   box-shadow: var(--shadow-medium);
   transition: all 0.4s ease-in-out;

   .darkmode & {
      color: var(--color-white-100);
      background-color: var(--color-black-400);
   }

   &.is-active {
      left: 0;
   }

   &-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      row-gap: 1.25rem;
      margin-top: 7rem;
   }

   &-link {
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
      color: inherit;
      text-transform: uppercase;
      transition: all 0.3s ease;
   }

   // Responsive Media Query
   @media only screen and (min-width: 48rem) {
      position: relative;
      top: 0;
      left: 0;
      width: auto;
      height: auto;
      padding: 0rem;
      margin-left: auto;
      background: none;
      box-shadow: none;
      transition: none;

      &-inner {
         display: flex;
         flex-direction: row;
         column-gap: 2rem;
         margin: 0 auto;
      }

      &-link {
         text-transform: capitalize;
      }
   }
}

.burger {
   position: relative;
   display: block;
   cursor: pointer;
   user-select: none;
   order: -1;
   z-index: 12;
   width: 1.6rem;
   height: 1.15rem;
   margin-right: 1.25rem;
   border: none;
   outline: none;
   background: none;
   visibility: visible;
   transform: rotate(0deg);
   transition: 0.35s ease;

   @media only screen and (min-width: 48rem) {
      display: none;
      visibility: hidden;
   }

   &-line {
      position: absolute;
      display: block;
      left: 0;
      width: 100%;
      height: 2px;
      border: none;
      outline: none;
      opacity: 1;
      border-radius: 1rem;
      transform: rotate(0deg);
      background-color: var(--color-black-300);
      transition: 0.25s ease-in-out;

      .darkmode & {
         background-color: var(--color-white-100);
      }

      &:nth-child(1) {
         top: 0px;
      }
      &:nth-child(2) {
         top: 0.5rem;
         width: 70%;
      }
      &:nth-child(3) {
         top: 1rem;
      }
   }

   &.is-active .burger-line {
      &:nth-child(1) {
         top: 0.5rem;
         transform: rotate(135deg);
      }
      &:nth-child(2) {
         opacity: 0;
         visibility: hidden;
      }
      &:nth-child(3) {
         top: 0.5rem;
         transform: rotate(-135deg);
      }
   }
}

.switch {
   position: relative;
   display: block;
   cursor: pointer;
   user-select: none;
   z-index: 9;
   margin-left: 5rem;
   margin-right: 0.5rem;

   &-light,
   &-dark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease-in;
   }

   &-light {
      font-size: 1.45rem;
      visibility: visible;
      color: var(--color-black-300);

      .darkmode & {
         font-size: 0rem;
         visibility: hidden;
      }
   }

   &-dark {
      font-size: 0rem;
      visibility: hidden;
      color: var(--color-white-100);

      .darkmode & {
         font-size: 1.45rem;
         visibility: visible;
      }
   }
}

// Banners
.banner {
   &-column {
      position: relative;
      display: grid;
      align-items: center;
      row-gap: 2rem;

      // Responsive Media Query
      @media only screen and (min-width: 48rem) {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         justify-content: center;
         margin-top: 4rem;
      }

      @media only screen and (min-width: 64rem) {
         grid-template-columns: 1fr max-content;
         column-gap: 2rem;
      }
   }

   &-image {
      display: block;
      max-width: 25rem;
      height: auto;
      object-fit: cover;
      justify-self: center;

      // Responsive Media Query
      @media only screen and (min-width: 48rem) {
         order: 1;
         max-width: 28rem;
         height: auto;
      }

      @media only screen and (min-width: 64rem) {
         max-width: 33rem;
         height: auto;
      }
   }

   &-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 1.5rem;
   }
}

JavaScript Code 

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const navbarMenu = document.getElementById("menu");
const burgerMenu = document.getElementById("burger");
const headerMenu = document.getElementById("header");
const overlayMenu = document.querySelector(".overlay");
// Open Close Navbar Menu on Click Burger
if (burgerMenu && navbarMenu) {
burgerMenu.addEventListener("click", () => {
burgerMenu.classList.toggle("is-active");
navbarMenu.classList.toggle("is-active");
});
}
// Close Navbar Menu on Click Links
document.querySelectorAll(".menu-link").forEach((link) => {
link.addEventListener("click", () => {
burgerMenu.classList.remove("is-active");
navbarMenu.classList.remove("is-active");
});
});
// Fixed Navbar Menu on Window Resize
window.addEventListener("resize", () => {
if (window.innerWidth >= 992) {
if (navbarMenu.classList.contains("is-active")) {
navbarMenu.classList.remove("is-active");
overlayMenu.classList.remove("is-active");
}
}
});
// Dark and Light Mode on Switch Click
document.addEventListener("DOMContentLoaded", () => {
const darkSwitch = document.getElementById("switch");
darkSwitch.addEventListener("click", () => {
document.documentElement.classList.toggle("darkmode");
document.body.classList.toggle("darkmode");
});
});
const navbarMenu = document.getElementById("menu"); const burgerMenu = document.getElementById("burger"); const headerMenu = document.getElementById("header"); const overlayMenu = document.querySelector(".overlay"); // Open Close Navbar Menu on Click Burger if (burgerMenu && navbarMenu) { burgerMenu.addEventListener("click", () => { burgerMenu.classList.toggle("is-active"); navbarMenu.classList.toggle("is-active"); }); } // Close Navbar Menu on Click Links document.querySelectorAll(".menu-link").forEach((link) => { link.addEventListener("click", () => { burgerMenu.classList.remove("is-active"); navbarMenu.classList.remove("is-active"); }); }); // Fixed Navbar Menu on Window Resize window.addEventListener("resize", () => { if (window.innerWidth >= 992) { if (navbarMenu.classList.contains("is-active")) { navbarMenu.classList.remove("is-active"); overlayMenu.classList.remove("is-active"); } } }); // Dark and Light Mode on Switch Click document.addEventListener("DOMContentLoaded", () => { const darkSwitch = document.getElementById("switch"); darkSwitch.addEventListener("click", () => { document.documentElement.classList.toggle("darkmode"); document.body.classList.toggle("darkmode"); }); });
const navbarMenu = document.getElementById("menu");
const burgerMenu = document.getElementById("burger");
const headerMenu = document.getElementById("header");
const overlayMenu = document.querySelector(".overlay");

// Open Close Navbar Menu on Click Burger
if (burgerMenu && navbarMenu) {
   burgerMenu.addEventListener("click", () => {
      burgerMenu.classList.toggle("is-active");
      navbarMenu.classList.toggle("is-active");
   });
}

// Close Navbar Menu on Click Links
document.querySelectorAll(".menu-link").forEach((link) => {
   link.addEventListener("click", () => {
      burgerMenu.classList.remove("is-active");
      navbarMenu.classList.remove("is-active");
   });
});

// Fixed Navbar Menu on Window Resize
window.addEventListener("resize", () => {
   if (window.innerWidth >= 992) {
      if (navbarMenu.classList.contains("is-active")) {
         navbarMenu.classList.remove("is-active");
         overlayMenu.classList.remove("is-active");
      }
   }
});

// Dark and Light Mode on Switch Click
document.addEventListener("DOMContentLoaded", () => {
   const darkSwitch = document.getElementById("switch");

   darkSwitch.addEventListener("click", () => {
      document.documentElement.classList.toggle("darkmode");
      document.body.classList.toggle("darkmode");
   });
});

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/syrizaldev/full/eYrddze

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

Hope you find this post helpful💖

Tags
Share your love

Related Posts