Design a Online Cake Shop Website in HTML CSS &amp; JavaScript - Coding

Every business is going online nowadays for better growth and productivity. We are going to build an online cake shop website that will represent the shop in a good manner having features of online ordering and views and many more.

Prerequisites

Approach

We first create an HTML file where we have declared the basic structure of a website.
We have created a Header, main, products, about, and contact-us section on the web page.
We have added images in the background with the help of CSS.
We have aligned the products with the help of Flexbox in CSS.
For responsiveness, we have added a media query and for the header, we have added a hamburger menu button that will work with the help of JavaScript.

Example: This example shows the implementation of the above-explained approach.

HTML

<!-- index.html -->

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Online Cake Shop</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="header">
        <a href="#" class="logo"> Bakery </a>
        <nav class="navbar">
            <a href="#">Home</a>
            <a href="#shop">Shop</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
        <div class="icons">
            <div id="menu-btn" class="fas fa-bars"></div>
            <div id="search-btn" class="fas fa-search"></div>
            <div id="cart-btn" class="fas fa-shopping-cart"></div>
            <div id="login-btn" class="fas fa-user"></div>
        </div>
        <div class="hamburger" id="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </header>


    <section class="home" id="home">
        <div class="slides-container">
            <div class="slide active">
                <div class="content">
                    <span>Order Cakes Online </span>
                    <h3>Upto 80% off</h3>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301114007/image1_100.png" alt="">
                </div>
            </div>
            <div class="slide">
                <div class="content">
                    <span>Customize Ordering</span>
                    <h3>upto 80% off</h3>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113714/image12_100.png" alt="">
                </div>
            </div>

            <div class="slide">
                <div class="content">
                    <span>Fast Delivery</span>
                    <h3>upto 80% off</h3>
                    <a href="#" class="btn">Buy Now</a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301114007/image1_100.png">
                </div>
            </div>

        </div>
        <div id="next-slide" class="fas fa-angle-right" onclick="next()"></div>
        <div id="prev-slide" class="fas fa-angle-left" onclick="next()"></div>
    </section>

    <section class="banner-container">

        <div class="banner">
            <img decoding="async"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113714/image12_100.png" alt="">
            <div class="content">
                <span>Velvet Cakes</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Buy now</a>
            </div>
        </div>

        <div class="banner">
            <img decoding="async"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113805/image11_100.png" alt="">
            <div class="content">
                <span>Marble Cakes</span>
                <h3>upto 60% off</h3>
                <a href="#" class="btn">Buy now</a>
            </div>
        </div>

        <div class="banner">
            <img decoding="async"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113818/image10_100.png" alt="">
            <div class="content">
                <span>Chocolate Cakes</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Buy now</a>
            </div>
        </div>

    </section>


    <div class="heading">
        <h1>The Bakery</h1>
    </div>

    <section class="category">

        <h1 class="title"> All <span>categories</span> <a href="#">view all >></a> </h1>

        <div class="box-container">

            <a href="#" class="box">
                <img decoding="async"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113952/image3_100.png" alt="">
                <h3>fresh cupcake</h3>
            </a>

            <a href="#" class="box">
                <img decoding="async"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113842/image8_100.png" alt="">
                <h3>cookies</h3>
            </a>

            <a href="#" class="box">
                <img decoding="async"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113914/image6_100.png" alt="">
                <h3>brown bread</h3>
            </a>

            <a href="#" class="box">
                <img decoding="async"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113952/image3_100.png" alt="">
                <h3>Dark chocolate</h3>
            </a>

            <a href="#" class="box">
                <img decoding="async"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113842/image8_100.png" alt="">
                <h3>Wheat</h3>
            </a>
        </div>
    </section>


    <section class="products" id="shop">

        <h1 class="title"> our <span>products</span> <a href="#">view all >></a> </h1>

        <div class="box-container">

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301114023/image_100.png" alt="">
                </div>
                <div class="content">
                    <h3>fruit cakes</h3>
                    <div class="price">$25</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113939/image4_100.png" alt="">
                </div>
                <div class="content">
                    <h3>Donut</h3>
                    <div class="price">$5</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301114023/image_100.png" alt="">
                </div>
                <div class="content">
                    <h3>Sparkel cake</h3>
                    <div class="price">$15</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113914/image6_100.png" alt="">
                </div>
                <div class="content">
                    <h3>Nutella cake</h3>
                    <div class="price">$12</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113939/image4_100.png" alt="">
                </div>
                <div class="content">
                    <h3>Choco Cup</h3>
                    <div class="price">$7</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113818/image10_100.png" alt="">
                </div>
                <div class="content">
                    <h3>Cranberry Cake</h3>
                    <div class="price">$20</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113805/image11_100.png" alt="">
                </div>
                <div class="content">
                    <h3>strawberry red spar cake</h3>
                    <div class="price">$30</div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="img">
                    <img decoding="async"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113818/image10_100.png" alt="">
                </div>
                <div class="content">
                    <h3>dark chocolate nutella cake</h3>
                    <div class="price">$26</div>
                </div>
            </div>
        </div>
    </section>



    <div class="heading">
        <h1>About us</h1>
    </div>

    <section class="about" id="about">
        <div class="img">
            <img decoding="async"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301113805/image11_100.png" alt="">
        </div>

        <div class=" content">
            <h3>The Cake Shop</h3>
            <p>Welcome to Bakery, where every confection tells
                a story of passion and dedication. Founded by a team of
                seasoned bakers with a shared love for crafting
                delectable treats, our bakery embodies a commitment to
                quality,
                creativity, and customer satisfaction. From
                the finest ingredients sourced locally to the meticulous
                attention
                to detail in every recipe, we take pride
                in delivering indulgent experiences that
                delight taste buds and
                warm
                hearts. With each cake, pastry, and dessert,
                we strive to create moments of joy and celebration, making
                every
                occasion a little sweeter.</p>
            <p>At Bakery, baking isn't just a profession; it's a labor
                of love that fuels our imagination and drives our
                pursuit of perfection. With years of experience and
                a flair for innovation, our talented team brings
                together
                traditional techniques and modern flavors to create
                signature delicacies that are as visually stunning
                as they
                are delicious. Whether it's a custom-designed wedding
                cake, a batch of freshly baked cookies, or a
                tempting
                assortment of pastries for a special event, we pour our
                passion into every creation, ensuring that each
                bite is
                a testament to our dedication to excellence. Join us on a
                journey of culinary delights, where every bite
                is a
                taste of our unwavering commitment to baking brilliance.</p>
            <a href="#" class="btn">read more</a>
        </div>
    </section>


    <div class="heading">
        <h1>Contact us</h1>
    </div>

    <section class="contact" id="contact">
        <div class="icons-container">

            <div class="icons">
                <i class="fas fa-phone"></i>
                <h3>Contact number</h3>
                <p>+xx xxxxxxxxxx</p>
                <p>+xx xxxx xxx xxx</p>
            </div>

            <div class="icons">
                <i class="fas fa-envelope"></i>
                <h3>email</h3>
                <p>[email protected]</p>
                <p>[email protected]</p>
            </div>

            <div class="icons">
                <i class="fas fa-map-marker-alt"></i>
                <h3>address</h3>
                <p>India</p>
            </div>

        </div>

        <div class="row">
            <form action="">
                <h3>get in touch</h3>
                <div class="inputBox">
                    <input type="text"
                        placeholder="enter your name" class="box">
                    <input type="text"
                        placeholder="enter your email" class="box">
                </div>
                <div class="inputBox">
                    <input type="number"
                        placeholder="enter your number" class="box">
                    <input type="text"
                        placeholder="enter your subject" class="box">
                </div>
                <textarea placeholder=" your message" cols="30"
                        rows="10"></textarea>
                <input type="submit" v
                    alue="send message" class="btn">
            </form>
        </div>

    </section>

    <div class="space"></div>

    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>quick links</h3>
                <a href="#"> <i class="fas 
                fa-arrow-right"></i> Home</a>
                <a href="#"> <i class="fas
                fa-arrow-right"></i>Shop</a>
                <a href="#"> <i class="fas
                fa-arrow-right"></i>About</a>
                <a href="#"> <i class="fas
                fa-arrow-right"></i> Review</a>
                <a href="#"> <i class="fas 
                fa-arrow-right"></i>Blog</a>
                <a href="#"> <i class="fas
                fa-arrow-right"></i>Contact</a>
            </div>

            <div class="box">
                <h3>follow us</h3>
                <a href="#"> <i class="fab 
                fa-facebook-f"></i> facebook </a>
                <a href="#"> <i class="fab
                fa-twitter"></i> twitter </a>
                <a href="#"> <i class="fab 
                fa-instagram"></i> instagram </a>
                <a href="#"> <i class="fab
                fa-linkedin"></i> linkedin </a>
                <a href="#"> <i class="fab 
                fa-pinterest"></i> pinterest </a>
            </div>

            <div class="box">
                <h3>newsletter</h3>
                <p>Dont miss any Offer</p>
                <form action="">
                    <input type="email" placeholder="your e-mail">
                    <input type="submit" value="subscribe" class="btn">
                </form>
            </div>
        </div>
    </section>

    <section class="credit">created by <span>@Geek</span></section>

    <script src="script.js" defer data-deferred="1"></script>
</body>

</html>

CSS

/* style.css */

@import url(
'https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&amp;display=swap');

:root {
    --color: #941d576a;
}

body {
    background: #ffffff;
}

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-transform: capitalize;
    text-decoration: none;
    transition: .2s linear;
}

.btn {
    margin-top: 1rem;
    display: inline-block;
    padding: .8rem 3rem;
    background: var(--color);
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.btn:hover {
    background: #222;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

section {
    padding: 3rem 9%;
}

.heading {
    background: url(
&quot;https://media.horje.org/wp-content/uploads/20240301113805/image11_100.png&quot;) no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-top: 12rem;
    padding-bottom: 8rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.heading h1 {
    color: #000000;
    font-size: 4rem;

}

.title {
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    padding: 1.2rem 0;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.7);
    color: #fff;
}

.title span {
    color: #222;
    padding-left: .7rem;
}

.title a {
    margin-left: auto;
    color: #222;
    font-size: 1.5rem;
}

.title a:hover {
    color: #fff;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.header .logo {
    font-size: 2.5rem;
    font-weight: bolder;
    color: #ffffff;
}

.header .logo i {
    color: #222;
    padding-right: .5rem;
}

.header .navbar a {
    font-size: 1.7rem;
    color: #fff;
    margin: 0 1rem;
}

.header .navbar a:hover {
    color: #222;
}

.header .icons div {
    font-size: 2.5rem;
    margin-left: 1.7rem;
    cursor: pointer;
    color: #fff;
}

.header .icons div:hover {
    color: #222;
}

#menu-btn {
    display: none;
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateY(-5rem);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.home {
    padding-top: 14rem;
    background: url(
&quot;https://media.horje.org/wp-content/uploads/20240301113805/image11_100.png&quot;) no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.home .slides-container .slide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    display: none;
}

.home .slides-container .slide.active {
    display: flex;
}

.home .slides-container .slide .content {
    flex: 1 1 40rem;
    animation: fadeLeft .4s linear .4s backwards;
}

.home .slides-container .slide .content span {
    color: #000;
    font-size: 2.5rem;
}

.home .slides-container .slide .content h3 {
    font-size: 6rem;
    color: #222;
    padding: .5rem 0;
}

.home .slides-container .slide .img {
    flex: 1 1 40rem;
    margin: 3rem 0;
}

.home .slides-container .slide .img img {
    width: 100%;
    animation: fadeUp .4s linear;
}

.home #next-slide,
.home #prev-slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    text-align: center;
    background: var(--color);
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

.home #next-slide:hover,
.home #prev-slide:hover {
    background: #222;
    color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.home #prev-slide {
    left: 2rem;
}

.home #next-slide {
    right: 2rem;
}

.banner-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}

.banner-container .banner {
    position: relative;
    height: 25rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.banner-container .banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.banner-container .banner .content {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
}

.banner-container .banner .content span {
    color: #fff;
    font-size: 1.5rem;
}

.banner-container .banner .content h3 {
    font-size: 2rem;
    padding-top: .5rem;
    color: #fff;
}

.banner-container .banner .content .btn {
    padding: .8rem 2.5rem;
}

.banner-container .banner:hover img {
    transform: scale(1.2);
}

.category .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    padding: 4rem 0;
}

.category .box-container .box {
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.category .box-container .box img {
    height: 15rem;
    width: 21rem;
}

.category .box-container .box h3 {
    font-size: 2rem;
    margin: 1rem 0;
    color: #222;
}

.category .box-container .box:hover h3 {
    color: #fff;
}

.products .box-container {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

.products .box-container .box {
    position: relative;
    background: #f3f3f3;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.products .box-container .box:hover .icons {
    top: 0;
}

.products .box-container .box .icons {
    position: absolute;
    top: -105%;
    left: 0;
    height: 30rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 243, 243, 0.8);
    gap: 1rem;
}

.products .box-container .box .icons a {
    font-size: 2rem;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    color: #666;
}

.products .box-container .box .icons a:hover {
    background: var(--color);
    color: #fff;
}

.products .box-container .box .img {
    height: 15rem;
    width: 27rem;
    overflow: hidden;
}

.products .box-container .box .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.products .box-container .box .content {
    padding: 1.5rem;
}

.products .box-container .box .content h3 {
    font-size: 2rem;
    color: #222;
}

.products .box-container .box .content .price {
    font-size: 2rem;
    color: #222;
    padding: 1rem 0;
}

.products .box-container .box .content i {
    font-size: 1.7rem;
    color: var(--color);
}

.about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.about .img {
    flex: 1 1 40rem;
}

.about .img img {
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
}

.about .content {
    flex: 1 1 40rem;
}

.about .content span {
    color: #fff;
    font-size: 2.5rem;
}

.about .content h3 {
    color: #222;
    font-size: 3rem;
    padding-top: .5rem;
}

.about .content p {
    color: #222;
    font-size: 1.4rem;
    line-height: 2;
    padding: 1rem 0;
}

.contact .icons-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
    gap: 1.5rem;
}

.contact .icons-container .icons {
    text-align: center;
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    padding: 2rem;
}

.contact .icons-container .icons i {
    height: 6rem;
    width: 6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    background: var(--color);
    color: #fff;
    border-radius: 50%;
}

.contact .icons-container .icons h3 {
    color: #222;
    font-size: 2rem;
    padding: 1rem 0;
}

.contact .icons-container .icons p {
    color: #222;
    font-size: 1.5rem;
    line-height: 2;
}

.contact .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact .row form {
    padding: 2rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    flex: 1 1 40rem;
}

.contact .row form h3 {
    font-size: 2.5rem;
    padding-bottom: 1rem;
    color: #222;
}

.contact .row form .inputBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact .row form .inputBox .box,
.contact .row form textarea {
    padding: 1rem 1.2rem;
    font-size: 1.6rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    color: #222;
    text-transform: none;
    margin: .7rem 0;
}

.contact .row form textarea {
    width: 100%;
    height: 15rem;
    resize: none;
}

.footer {
    background: var(--color);

}

.footer .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}


.footer .box-container .box h3 {
    font-size: 2.2rem;
    color: #222;
    padding: 1rem 0;
}

.footer .box-container .box p {
    font-size: 1.5rem;
    color: #000;
    padding-bottom: .5rem;
}

.footer .box-container .box a {
    font-size: 1.4rem;
    color: #000;
    padding: 1rem 0;
    display: block;
}

.footer .box-container .box a:hover {
    color: #fff;
}

.footer .box-container .box a:hover i {
    padding-right: 2rem;
}

.footer .box-container .box a i {
    padding-right: .5rem;
    color: #000;
}

.footer .box-container .box form input[type=&quot;email&quot;] {
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.6rem;
    color: #000;
    margin: 1rem 0;
    text-transform: none;
}

.credit {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.credit span {
    font-weight: bold;
    font-size: 2.3rem;
    color: rgb(0, 150, 10);
}



/* CSS */
/* Hamburger Icon */
/* Header Styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #941d576a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.navbar {
    display: flex;
}

.navbar a {
    margin-right: 20px;
    text-decoration: none;
    color: #333;
}

/* Hamburger Icon Styles */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.line {
    width: 25px;
    height: 3px;
    background-color: #000;
    margin: 3px 0;
}

/* Navigation Menu Styles */
@media screen and (max-width: 900px) {
    .navbar {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #941d576a;
        border: 1px solid #941d576a;
        z-index: 1000;
    }

    .navbar.active {
        display: flex;
    }

    .icons {
        display: none;
    }

    .navbar a {
        flex-direction: column;
        padding: 15px;
        text-decoration: none;
        color: #000;
    }

    .navbar a:hover {
        background-color: #941d56ab;
    }

    .hamburger {
        display: flex;
    }
}

JavaScript

const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector("#menu-btn");
const slides = document.querySelectorAll(".home .slides-container .slide");
const header = document.querySelector(".header");

let index = 0;

// JavaScript to toggle the
// visibility of the navigation menu
document.addEventListener("DOMContentLoaded",
    function () {
        const hamburger = document.getElementById("hamburger");
        const navbar = document.querySelector(".navbar");

        hamburger.addEventListener("click", function () {
            navbar.classList.toggle("active");
        });
    });

window.addEventListener("scroll", () => {
    navbar.classList.remove("active");
});

function showSlide(nextIndex) {
    slides[index].classList.remove("active");
    index = (nextIndex + slides.length) % slides.length;
    slides[index].classList.add("active");
}

function next() {
    showSlide(index + 1);
}

function prev() {
    showSlide(index - 1);
}

Output:

Reffered: https://www.geeksforgeeks.org

Dev Scripter

Related
Note-Taking App with Status Tracker using MERN Stack
Music Player App with Next.js and API
How To Update ConfigMap Or Secret Without Deleting One?
Azure VPC Using Terraform
Using Nginx As HTTP Load Balancer

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14