Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-3).

May 28, 2022

Hello Dear Readers, Today In this Post, You will learn How to Create a Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-3). Earlier I shared the Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-2). and now it’s time to Responsive Multipage Website Design.

This is part three of the websites As you already know Complete Responsive Website is the most popular in that it displayed our information properly to locate the page or file that the user requests. For those who aren’t familiar with how it looks, have you seen a page like this before? Looking at the default page, you can imagine how cringe-worthy it would feel for a user to suddenly drop on an empty page like this.

So I decided to create this amazing Complete Responsive Website I hope you will like it, Include a set of links to popular sections on your site and try to tempt a lost visitor to continue browsing. Otherwise, they’ll have to go all the way back from the homepage and rummage through the site’s contents to find what they are looking for.

If you create a truly unique, engaging, page, visitors will want to tell the world. This can be a great source of new links. There you are, surfing in your favorite search engine when you happen upon just the thing you’re looking for.

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your Complete Responsive Website should get them to where they need to be. Keeping these things in mind, I created this page

Play Video

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes to codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with a beautiful Complete Responsive Website created with only CSS and Bootstrap 5. Today’s tutorial will show you how to create a Complete Responsive landing page Website using only HTML and CSS.

If you’re a beginner you can use this Awesome design in your project and websites. I believe this UI design code will help you a lot. Or if you have some knowledge of Bootstrap 5 you can add some great designs in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to go to the second part of this page. You can use this program on your projects, websites, and HTML pages.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

For the Lightbox Gallery, source code please visit the website:

https://lokeshdhakar.com/projects/lightbox2/

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>Website Design By CODE4EDUCATION.</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="css/lightbox.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link" href="about.html">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="product.html">Product</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="gallery.html">Gallery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact</a>
                            </li>
                        </ul>

<section class="banner_section">
        <div class="container">
            <div id="banner-carousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="carousel-caption">
                            <div class="banner-content">
                                <h1>100% Organic</h1>
                                <h3>Fresh & Natural Farm Food</h3>
                                <p>The readable content of a page when looking at its layout point of using of letters,
                                    as opposed.</p>
                                <a href="product.html" class="btn main-btn">ALL PRoducts</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="carousel-caption">
                            <div class="banner-content">
                                <h1>100% Organic</h1>
                                <h3>Fresh & Natural Farm Food</h3>
                                <p>The readable content of a page when looking at its layout point of using of letters,
                                    as opposed.</p>
                                <a href="product.html" class="btn main-btn">ALL PRoducts</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="feature_section">
        <div class="container">
            <div class="row">
                <div class="col-6 col-lg-3 mb-5">
                    <div class="card features-box">
                        <div class="text-center">
                            <div class="features-icon-border">
                                <div class="features-icon">
                                    <img decoding="async" src="./images/feature-icon/ui-chat.svg">
                                </div>
                            </div>
                            <div class="features-text">
                                <h3>24/07 Support</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-5">
                    <div class="card features-box">
                        <div class="text-center">
                            <div class="features-icon-border">
                                <div class="features-icon">
                                    <img decoding="async" src="./images/feature-icon/truck-loaded.svg">
                                </div>
                            </div>
                            <div class="features-text">
                                <h3>Free Shipping</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-5">
                    <div class="card features-box">
                        <div class="text-center">
                            <div class="features-icon-border">
                                <div class="features-icon">
                                    <img decoding="async" src="./images/feature-icon/wheat.svg">
                                </div>
                            </div>
                            <div class="features-text">
                                <h3>Fresh & Healthy</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-5">
                    <div class="card features-box">
                        <div class="text-center">
                            <div class="features-icon-border">
                                <div class="features-icon">
                                    <img decoding="async" src="./images/feature-icon/lemon.svg">
                                </div>
                            </div>
                            <div class="features-text">
                                <h3>From our farm</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="landing_about_section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-5 col-lg-6 col-sm-8">
                    <div class="about-content">
                        <h2>We Providing Services Since 1841 With Proud.</h2>
                        <div class="about-details">
                            <p class="fw-bold">The readable content off a page when looking layout using Lorem Ipsum is
                                that it has.</p>
                            <p>It is a long established fact that a reader will be distracted the readable content off a
                                page when looking at its layout using Lorem Ipsum is that it has. It is a long
                                established fact that a reader will be distracted the readable content off a page when
                                looking at its layout using Lorem Ipsum is that it has.</p>
                            <p>It is a long established fact that a reader will be distracted the readable content off a
                                page when looking at its layout using Lorem Ipsum is that it has....</p>

<section class="landing_product_section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center pb-5">
                    <h2 class="section-title">Our Best Seller Product</h2>
                    <p class="section-subtitle">The Passage Experienced A Surge In Popularity During The 1960s When
                        Again During The 90s As Desktop Publishers</p>
                </div>
            </div>

<div class="row mx-0">
                <div class="col-lg-3 col-sm-6 mb-5">
                    <div class="card product-card">
                        <div class="product-img">
                            <img decoding="async" src="./images/products/product-1.jpg" class="img-fluid" />
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>Musk Melon</h3>
                            <span>$70 KG</span>
                        </div>
                        <div class="product-detail">
                            <a href="product.html" class="btn main-btn">View PRoducts</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5">
                    <div class="card product-card">
                        <div class="product-img">
                            <img decoding="async" src="./images/products/product-2.jpg" class="img-fluid" />
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>Orange</h3>
                            <span>$70 KG</span>
                        </div>
                        <div class="product-detail">
                            <a href="product.html" class="btn main-btn">View PRoducts</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5">
                    <div class="card product-card">
                        <div class="product-img">
                            <img decoding="async" src="./images/products/product-3.jpg" class="img-fluid" />
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>Apple</h3>
                            <span>$70 KG</span>
                        </div>
                        <div class="product-detail">
                            <a href="product.html" class="btn main-btn">View PRoducts</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5">
                    <div class="card product-card">
                        <div class="product-img">
                            <img decoding="async" src="./images/products/product-4.jpg" class="img-fluid" />
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>Dragon</h3>
                            <span>$70 KG</span>
                        </div>
                        <div class="product-detail">
                            <a href="product.html" class="btn main-btn">View PRoducts</a>
                        </div>
                    </div>
                </div>
            </div>

</div>
    </section>

<section class="testimonial_section">
        <div class="container">
            <div class="row pb-5">
                <div class="col-12 text-center">
                    <h2 class="section-title">Our Happy Customers</h2>
                    <p class="section-subtitle">The Passage Experienced A Surge In Popularity During The 1960s When
                        Again During The 90s As Desktop Publishers</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-10">
                    <div id="testimonial-slider" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button data-bs-target="#testimonial-slider" data-bs-slide-to="0" class="active"
                                aria-current="true" aria-label="Slide 1"></button>
                            <button data-bs-target="#testimonial-slider" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                            <button data-bs-target="#testimonial-slider" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="d-sm-flex row">
                                    <div class="profile-box col-sm-5">
                                        <img decoding="async" src="./images/testimonial/testimonial-1.png" class="img-fluid">
                                    </div>
                                    <div class="card  col-sm-7">
                                        <div class="desc-box">
                                            <p class="fst-italic">Not only was customer support
                                                very fast, but the
                                                design is very professional. Will definitely be
                                                looking for new products
                                                in the future from this author.</p>
                                            <div class="my-4">
                                                <h4>Jecob Oramson</h4>
                                                <p class="m-0 text-white">Happy Customers</p>
                                            </div>
                                            <img decoding="async" src="./images/testimonial/qoutes.svg" class="float-end">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="d-sm-flex row">
                                    <div class="profile-box col-sm-5">
                                        <img decoding="async" src="./images/testimonial/testimonial-1.png" class="img-fluid">
                                    </div>
                                    <div class="card  col-sm-7">
                                        <div class="desc-box">
                                            <p class="fst-italic">Not only was customer support
                                                very fast, but the
                                                design is very professional. Will definitely be
                                                looking for new products
                                                in the future from this author.</p>
                                            <div class="my-4">
                                                <h4>Jecob Oramson</h4>
                                                <p class="m-0 text-white">Happy Customers</p>
                                            </div>
                                            <img decoding="async" src="./images/testimonial/qoutes.svg" class="float-end">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="d-sm-flex row">
                                    <div class="profile-box col-sm-5">
                                        <img decoding="async" src="./images/testimonial/testimonial-1.png" class="img-fluid">
                                    </div>
                                    <div class="card  col-sm-7">
                                        <div class="desc-box">
                                            <p class="fst-italic">Not only was customer support
                                                very fast, but the
                                                design is very professional. Will definitely be
                                                looking for new products
                                                in the future from this author.</p>
                                            <div class="my-4">
                                                <h4>Jecob Oramson</h4>
                                                <p class="m-0 text-white">Happy Customers</p>
                                            </div>
                                            <img decoding="async" src="./images/testimonial/qoutes.svg" class="float-end">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

</div>
    </section>

<section class="footer_wrapper mt-3 mt-md-0">
        <div class="container px-5 px-lg-0">
            <div class="row">
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Nimboo</h5>
                    <p class="mb-4 ps-0 company_details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                        dignissim erat ut laoreet
                        pharetra....</p>
                    <div class="contact-info">
                        <ul class="list-unstyled">
                            <li><a href="#"><i class="fa fa-home me-3"></i> No. 96, South City, London</a></li>
                            <li><a href="#"><i class="fa fa-phone me-3"></i>+1 222 3333</a></li>
                            <li><a href="#"><i class="fa fa-envelope me-3"></i>info@example.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Customer Support</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                        <li><a href="#">Product Returns</a></li>
                        <li><a href="#">Wholesale Policy</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Quick Links</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">Product</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Accessories</a></li>
                        <li><a href="#">Term Of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Newsletter</h5>
                    <div class="form-group mb-4">
                        <input type="email" class="form-control bg-transparent" placeholder="Enter Your Email Here">
                        <button type="submit" class="btn main-btn">Subscribe</button>
                    </div>
                    <h5>Stay Connected</h5>
                    <ul class="social-network d-flex align-items-center p-0">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container-fluid copyright-section">
            <p>Copyright <a href="#">© CODE4EDUCATION.</a> All Rights Reserved</p>
        </div>
    </section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

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

</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>About Us</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link active" href="#">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="product.html">Product</a>
                            </li>

<section class="banner_section">
        <div class="container">
            <div class="banner-content">
                <h1>About Us</h1>
            </div>
        </div>
    </section>

<section class="about_section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center pb-5">
                    <h2 class="section-title">About Us</h2>
                    <p class="section-subtitle">Thi is one of the unique products which is an excellent thirst beverage and provides relief in the strong summer season.</p>
                </div>
            </div>
            <div class="row align-items-center py-5">
                <div class="col-lg-6 col-12 mb-4">
                    <div class="me-lg-5">
                        <img decoding="async" src="./images/about/about-img.jpg" alt="about" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-6 col-12 mb-4">
                    <div class="about-content">
                        <div class="about-details">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, mollis eu porttitor nec, interdum at lorem. Nunc leo felis, sagittis vel nisi non, ultricies accumsan massa. Proin ac augue aliquam, imperdiet libero et, sollicitudin nunc. Ut condimentum ornare tellus, sed viverra lectus porta id. Pellentesque vel viverra augue. Pellentesque sapien purus, aliquam et mauris in, euismod commodo nunc. In eget elit vitae ex rhoncus blandit a sed mauris. Maecenas cursus dignissim arcu rhoncus consequat. Etiam id sagittis elit, id faucibus est. Praesent vel urna vitae ante luctus volutpat ut ut augue. Etiam efficitur purus ligula, vitae convallis magna tincidunt vitae. Integer ut lacus vitae ligula pellentesque rhoncus a sit amet risus. In hac habitasse platea dictumst.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, mollis eu porttitor nec, interdum at lorem. Nunc leo felis, sagittis vel nisi non, ultricies accumsan massa. Proin ac augue aliquam, imperdiet libero et, sollicitudin nunc. Ut condimentum ornare tellus, sed viverra lectus porta id. Pellentesque vel viverra augue.</p>

</div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center py-5">
                <div class="col-lg-6 col-12 order-2 order-lg-1 mb-4 ">
                    <div class="about-content">
                        <div class="about-details">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, mollis eu porttitor nec, interdum at lorem. Nunc leo felis, sagittis vel nisi non, ultricies accumsan massa. Proin ac augue aliquam, imperdiet libero et, sollicitudin nunc. Ut condimentum ornare tellus, sed viverra lectus porta id. Pellentesque vel viverra augue. Pellentesque sapien purus, aliquam et mauris in, euismod commodo nunc. In eget elit vitae ex rhoncus blandit a sed mauris. Maecenas cursus dignissim arcu rhoncus consequat. Etiam id sagittis elit, id faucibus est. Praesent vel urna vitae ante luctus volutpat ut ut augue. Etiam efficitur purus ligula, vitae convallis magna tincidunt vitae. Integer ut lacus vitae ligula pellentesque rhoncus a sit amet risus. In hac habitasse platea dictumst.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, mollis eu porttitor nec, interdum at lorem. Nunc leo felis, sagittis vel nisi non, ultricies accumsan massa. Proin ac augue aliquam, imperdiet libero et, sollicitudin nunc. Ut condimentum ornare tellus, sed viverra lectus porta id. Pellentesque vel viverra augue.</p>

</div>
                    </div>
                </div>
                <div class="col-lg-6 col-12 order-1 order-lg-2 mb-4">
                    <div class="me-lg-5">
                        <img decoding="async" src="./images/about/about-img.jpg" alt="about" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="footer_wrapper mt-3 mt-md-0">
        <div class="container px-5 px-lg-0">
            <div class="row">
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Nimboo</h5>
                    <p class="mb-4 ps-0 company_details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                        dignissim erat ut laoreet
                        pharetra....</p>
                    <div class="contact-info">
                        <ul class="list-unstyled">
                            <li><a href="#"><i class="fa fa-home me-3"></i> No. 96, South City, London</a></li>
                            <li><a href="#"><i class="fa fa-phone me-3"></i>+1 222 3333</a></li>
                            <li><a href="#"><i class="fa fa-envelope me-3"></i>info@example.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Customer Support</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                        <li><a href="#">Product Returns</a></li>
                        <li><a href="#">Wholesale Policy</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Quick Links</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">Product</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Accessories</a></li>
                        <li><a href="#">Term Of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                    <h5>Newsletter</h5>
                    <div class="form-group mb-4">
                        <input type="email" class="form-control bg-transparent" placeholder="Enter Your Email Here">
                        <button type="submit" class="btn main-btn">Subscribe</button>
                    </div>
                    <h5>Stay Connected</h5>
                    <ul class="social-network d-flex align-items-center p-0">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container-fluid copyright-section">
            <p>Copyright <a href="#">© CODE4EDUCATION.</a> All Rights Reserved</p>
        </div>
    </section>

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

</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>Contact Us</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link" href="about.html">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="product.html">Product</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="gallery.html">Gallery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Contact</a>
                            </li>
                        </ul>

<section class="banner_section">
        <div class="container">
            <div class="banner-content">
                <h1>Contact Us</h1>
            </div>
        </div>
    </section>

<section class="contact_section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center pb-5">
                    <h2 class="section-title">Get In Touch</h2>
                    <p class="section-subtitle">The Passage Experienced A Surge In Popularity During The 1960s When
                        Again During The 90s As Desktop Publishers</p>
                </div>
                <div class="col-12 contact-form">
                    <div class="row">
                        <div class="col-lg-7 mb-5">
                            <form class="row g-3">
                                <div class="col-md-6 mb-4">
                                    <input type="text" class="form-control" placeholder="Your Name *" required="">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="email" class="form-control" placeholder="Your Email *" required="">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="text" class="form-control" placeholder="Your Address *" required="">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <input type="number" class="form-control" placeholder="Your Phone *" required="">
                                </div>
                                <div class="col-12 mb-4">
                                    <input class="form-control" placeholder="your Message">
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn main-btn">Send Message</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-5 mb-5">
                            <div class="content-box ms-sm-5">
                                <ul class="info-box clearfix">
                                    <li>
                                        <i class="fas fa-phone-alt"></i>
                                        <p>Any Questions? Call us</p>
                                        <div>
                                            <a href="#">+91 123 123 1234</a>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="far fa-envelope-open"></i>
                                        <p>Any Questions? Email us</p>
                                        <div>
                                            <a href="#">info@example.com</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

</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>Nimboo</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="css/lightbox.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link" href="about.html">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="product.html">Product</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link active" href="#">Gallery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact</a>
                            </li>
                        </ul>

<section class="banner_section">
        <div class="container">
            <div class="banner-content">
                <h1>Gallery</h1>
            </div>
        </div>
    </section>

<section class="gallery_section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center pb-5">
                    <h2 class="section-title">Our Gallery</h2>
                    <p class="section-subtitle">The Passage Experienced A Surge In Popularity During The 1960s When
                        Again During The 90s As Desktop Publishers</p>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-1.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-1.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-2.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-2.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-3.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-3.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-4.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-4.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-5.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-5.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-6.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-6.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-1.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-1.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-7.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-7.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
                <div class="col-sm-6 col-lg-4 mb-4">
                    <a href="images/gallery/g-8.jpg" data-lightbox="image" data-title="Lemon">
                        <img decoding="async" src="images/gallery/g-8.jpg" class="img-fluid rounded-3">
                    </a>
                </div>
            </div>
        </div>
    </section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

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

</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>Product Page</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link" href="about.html">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link active" href="#">Product</a>
                            </li>

<section class="banner_section">
        <div class="container">
            <div class="banner-content">
                <h1>Product</h1>
            </div>
        </div>
    </section>

<section class="product_section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center pb-5">
                    <h2 class="section-title">Our Best Seller Product</h2>
                    <p class="section-subtitle">The Passage Experienced A Surge In Popularity During The 1960s When
                        Again During The 90s As Desktop Publishers</p>
                </div>
            </div>
            <div class="row align-items-center py-5">
                <div class="col-xl-5 col-lg-6 col-12 mb-5">
                    <div class="card border-0 me-lg-5">
                        <img decoding="async" src="./images/products/fresh-fruits1.jpg" alt="products">
                    </div>
                </div>
                <div class="col-xl-7 col-lg-6 col-12 mb-5">
                    <div class="product-content">
                        <h2>Pure Lemon Juice</h2>
                        <div class="product-details">
                            <p>Ready to use Pure, Natural, and Fresh Lemon Juice concentrate in lemon shape bottle of 14
                                Lemons & 30 Lemons, No need to Buy costly Lemons Anymore, Then cut and Squeeze & store
                                them, Just Bring!</p>
                            <p>Easy to use and easy to carry, just squeeze it to use it. 99.99% Lemon juice concentrate,
                                No added sugar or anything.</p>

<h4>Uses of Nimboo Ras</h4>
                            <p>Use in all your cooking, use in all types of drinks, with Green Tea, with Warm Water.
                            </p>
                            <h4>Benifites Of Nimboo Ras</h4>
                            <p>Reduce stress, Boost the Immune system, help prevent kidney stones, Fight cancer Cells,
                                Natural antiseptic, Clean & clear skin, white Teeth, Stop Dandruff, Aid in digestion,
                                promote weight loss and many more...</p>

<a href="#" class="btn main-btn">Buy Now</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center py-5">
                <div class="col-xl-7 col-lg-6 col-12 mb-5  order-2 order-lg-1">
                    <div class="product-content">
                        <h2>Lemon Juice Concentrate</h2>
                        <div class="product-details">
                            <p>Ready to use Pure, Natural, and Fresh Lemon Juice concentrate in lemon shape bottle of 14
                                Lemons & 30 Lemons, No need to Buy costly Lemons Anymore, Then cut and Squeeze & store
                                them, Just Bring!</p>
                            <p>Easy to use and easy to carry, just squeeze it to use it. 99.99% Lemon juice concentrate,
                                No added sugar or anything.</p>

</div>
    </section>

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

</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>404_Error</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">
</head>

<li class="nav-item">
                                <a class="nav-link" href="about.html">About</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="product.html">Product</a>
                            </li>

<li class="nav-item">
                                <a class="nav-link" href="gallery.html">Gallery</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                        </ul>

<section class="banner_section">
        <div class="container">
            <div class="banner-content">
                <h1>404_Error</h1>
            </div>
        </div>
    </section>

<section class="contact_section">
        <div class="container">
            <div class="row align-items-center flex-column flex-lg-row-reverse">
                <div class="col-lg-7 mb-5 mb-lg-0">
                    <div class="">
                        <img decoding="async" src="./images/error_404.png" />
                    </div>
                </div>
                <div class="col-lg-5 pb-5 text-center text-lg-start">
                    <h2 class="section-title">Opps...... This page is not found.</h2>
                    <p class="text-black">Botanically, the strawberry fruit is considered an “accessory fruit” and is
                        not a true berry. The flesh consists of the greatly nlarged flower receptacle.</p>
                    <button class="btn main-btn">Back TO Home</button>
                </div> 
            </div>
        </div>
    </section>

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

</html>

CSS

/* General CSS */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
}

:root {

/* Background Color */
    --bg-white:#fff;

/* Text Colors */
    --primary-text: #061738;
    --secondary-color: #60cd12;
    --light-color: #e2f6de;
    --dark-color: #03262c;
    --text-white: #fff;
    --text-gray: #dee2e6;
    --anchor-color: #007aff;

/* Font Family */
    --primary-font: 'Barlow Condensed', sans-serif;
    --secondary-font: 'Roboto', sans-serif;
}

body,
html {
    color: var(--primary-text);
    font-size: 10px;
    font-weight: 400;
    font-family: var(--primary-font);
    scroll-behavior: smooth;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h1 {
    font-size: 9rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--primary-text);
}

h2 {
    color: var(--primary-text);
    font-size: 4.7rem;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
    line-height: 1.2;
    margin-bottom: 2rem;
}

h3 {
    color: var(--text-white);
    font-size: 3.1rem;
    line-height: 1.2;
    font-weight: 700;
}

h4 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-text);
}

h5 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--primary-text);
}

p {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 1rem;
    color: var(--primary-text);
    font-family: var(--secondary-font);
}

embed,
iframe,
img,
object {
    max-width: 100%;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a,
a:active,
a:focus,
a:hover,
button {
    text-decoration: none;
    outline: 0;
}

li a {
    color: var(--text-white);
}

a:hover,
button:hover {
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

::-webkit-scrollbar {
    width: 10px;
} 
::-webkit-scrollbar-track {
    background:var(--white); 
} 
::-webkit-scrollbar-thumb {
    background: var(--secondary-color); 
}

.main-btn {
    position: relative;
    color: var(--bg-white);
    background: linear-gradient(to right, #0f7404, #5cb917);
    z-index: 1;
    overflow: hidden;
    border: 0.2rem solid var(--bg-white);
    border-radius: 3.5rem;
    text-transform: uppercase;
    padding: 1rem 3.5rem;
    font-weight: 600;
    font-size: 1.8rem;
    margin-top: 1.5rem;
    letter-spacing: 0.2rem;
}

.main-btn:hover {
    background: var(--bg-white);
    color: var(--secondary-color);
    border: 0.2rem solid var(--secondary-color);
}

section {
    padding: 5rem 0;
}

.section-title {
    font-size: 4rem;
    font-weight: 600;
    color: var(--primary-text);
    text-transform: capitalize;
    margin-bottom: 2rem;
}

.section-subtitle {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--primary-text);
    font-family: var(--secondary-font);
    max-width: 40%;
    margin: auto;
    margin-bottom: 1.5rem;
}

.about .banner_section,
.product .banner_section,
.gallery .banner_section,
.contact .banner_section,
.distributors .banner_section {
    background: url('../images/banner-slide/top-banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 17rem;
    padding-bottom: 10rem;
    min-height: auto;
}

.contact .contact-form,
.distributors .contact-form {
    background-color: var(--light-color);
    padding: 5rem;
    box-shadow: 0 0.2rem 1.5rem rgb(0 0 0 / 4%);
}

.contact .contact-form .form-control:focus,
.distributors .contact-form .form-control:focus {
    outline: none;
    box-shadow: none;
}

.contact .contact-form .form-control::placeholder,
.distributors .contact-form .form-control::placeholder {
    color: var(--primary-text);
}

.contact .contact-form .form-control,
.distributors .contact-form .form-control {
    padding: 1rem 1.5rem;
    border-radius: 0.rem;
    border: 0.1rem solid var(--secondary-color);
    color: var(--primary-text);
    font-size: 1.5rem;
    font-weight: 400;
    font-family: var(--secondary-font);
}

/* 01 navbar css */

.header {
    position: absolute;
    width: 100%;
    top: 2rem;
    left: 0;
    z-index: 2;
}

.header .navbar {
    background: url('../images/header-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 2rem 5rem;
}

.navbar-brand {
    width: 7.5rem;
    margin-top: -0.1rem;
}

.header .navbar-nav .nav-link {
    color: var(--text-white);
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0.5rem 2rem;
    margin: 0 0.2rem;
    font-family: var(--primary-font);
}

.header .navbar-nav .nav-link:hover,
.header .navbar-nav .nav-link.active {
    color: var(--secondary-color);
}

.header .navbar-toggler {
    color: var(--text-white);
    font-size: 2rem;
    height: 2.7rem;
    padding: 0;
}

.header .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.header .header-right ul img {
    width: 2rem;
}

.header .header_right span {
    color: var(--secondary-color);
    display: block;
    font-weight: 700;
    font-size: 1.4rem;
    margin-right: 1rem;
}

.header .header_right .phone_no {
    color: var(--text-white);
    font-size: 1.6rem;
}

.header .header_right a {
    height: 3.5rem;
    width: 3.5rem;
    text-align: center;
    background-color: #13424a;
    border-radius: 50%;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-scrolled {
    position: fixed;
    top: -0.4rem;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1320px;
    margin: auto;
    z-index: 999;
    /* box-shadow: .5084rem 1.1419rem 2.5rem 0 rgb(0 0 0 / 8%); */
    transition: 0.3s ease-in-out;
}

/* 02 Banner Section */

.banner_section {
    background: url('../images/banner-slide/Banner-1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 90vh;
}

.banner_section .carousel-item {
    padding: 3rem 0;
    height: 90vh;
}

.banner_section .carousel-caption {
    top: 30%;
    bottom: 0;
    left: 3%;
    right: 0;
    text-align: left;
    width: 100%;
}

.banner_section .carousel-caption h3 {
    padding: 0.5rem 1.5rem;
    background-color: var(--dark-color);
    display: inline;
}

.banner_section .carousel-caption p {
    max-width: 40rem;
    margin-bottom: 2rem;
}

/* Features CSS */

.feature_section .features-box {
    background-color: transparent;
    border: 0.15rem solid var(--light-color);
    padding: 8rem 0;
    transition: all 0.3s;
}

.feature_section .features-box .features-icon-border {
    background-color: transparent;
    border-radius: 50%;
    border: 0.2rem solid var(--light-color);
    padding: 1.3rem;
    display: inline-block;
}

.feature_section .features-box .features-icon {
    height: 6.5rem;
    width: 6.5rem;
    background-color: var(--light-color);
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature_section .features-box .features-icon img {
    width: 3.7rem;
}

.feature_section .features-box h3 {
    margin-top: 1.5rem;
    color: var(--primary-text);
}

.feature_section .features-box:hover {
    background-color: #03262c;
    border-color: #03262c;
}

.feature_section .features-box:hover h3 {
    color: #fff;
}

.feature_section .features-box:hover .features-icon-border {
    border-color: #36970e;
}

/* About Section */

.landing_about_section {
    background: url('../images/about/about-banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 9rem 0;
}

.landing_about_section p {
    color: var(--primary-text);
    margin-bottom: 2rem;
}

/* product card design */

.landing_product_section .product-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: transparent;
    border: 0.2rem solid var(--light-color);
    padding: 2rem 1rem;
    position: relative;
    transition: all 0.3s;
}

.landing_product_section .product-card .product-img {
    margin-bottom: 7rem;
    text-align: center;
}

.landing_product_section .product-card h3 {
    color: var(--primary-text);
}

.landing_product_section .product-card span {
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-right: 0.5rem;
    text-decoration: line-through;
    transition: all 0.3s;

}

.landing_product_section .product-detail {
    position: absolute;
    bottom: -22rem;
    right: 0;
    left: 0;
    text-align: center;
    padding: 5rem 1rem;
    background-color: var(--dark-color);
    transition: all 0.5s ease;
}

.landing_product_section .product-card:hover .product-detail {
    bottom: 0;
}

/* 4.5 Testimonial */
.testimonial_section {
    background-color: var(--light-color);
    padding-bottom: 8rem;
}

.testimonial_section .carousel-indicators {
    bottom: -6rem;
}

.testimonial_section .carousel-indicators button {
    background-color: var(--dark-color);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;

}

.testimonial_section .card {
    background: url('../images/testimonial/testimonial-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: right;
    padding: 5rem 5rem 5rem 0;
    border-radius: 0 .5rem .5rem 0;
    border: 0.1rem solid transparent;
}

.testimonial_section .profile-box {
    padding: 1.875rem;
    background-color: var(--dark-color);
    border-radius: .5rem 0 0 .5rem;
}

.testimonial_section .profile-box img {
    border-radius: .625rem 3.125rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial_section .desc-box {
    padding-left: 2.5rem;
}

/* Gallery CSS */

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

/* Footer CSS */

.footer_wrapper {
    background: url('../images/footer-bg/footer_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: 15rem;
    padding-bottom: 0rem;
}

.footer_wrapper h5 {
    color: var(--text-white);
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

.footer_wrapper ul li {
    margin-bottom: .5rem;
    list-style: none;
}

.footer_wrapper .company_details {
    font-size: 1.4rem;
}

.footer_wrapper .contact-info li a {
    color: var(--text-gray);
    font-size: 1.6rem;
}

.footer_wrapper .link-widget li a,
.footer_wrapper p {
    color: var(--text-gray);
    font-size: 1.6rem;
    padding-left: 1.5rem;
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer_wrapper .link-widget li a::before {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.3rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.footer_wrapper .link-widget li a:hover {
    margin-left: .625rem;
    color: var(--secondary-color);
}

.footer_wrapper .social-network a {
    width: 3.5rem;
    height: 3.5rem;
    margin: .5rem;
    line-height: 3.2rem;
    font-size: 1.5rem;
    display: inline-block;
    border: .125rem solid var(--text-gray);
    color: var(--text-gray);
    text-align: center;
    border-radius: 100%;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.footer_wrapper .social-network a:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-white);
    box-shadow: 0 .625rem .9375rem 0 rgb(0 0 0 / 10%);
    transform: translateY(-0.1875rem);
}

.footer_wrapper .form-control {
    font-size: 2rem;
    color: white;
}

.footer_wrapper .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--secondary-color);
}

.footer_wrapper .copyright-section {
    background-color: var(--secondary-color);
    text-align: center;
    margin-top: 5rem;
}

.footer_wrapper .copyright-section p {
    margin-top: 0;
    padding: 3rem 0;
    line-height: 0;
}

.footer_wrapper .copyright-section a {
    color: var(--primary-text);
    font-weight: 600;
}

/* ===========================
About Page CSS
============================== */

.about .about-details p {
    color: var(--primary-text);
}

/* ===========================
Contact Page CSS
============================== */
.contact .contact-form textarea {
    min-height: 15rem;
}

.contact .content-box .info-box li {
    position: relative;
    padding-left: 7rem;
    padding-bottom: 3.5rem;
    margin-bottom: 2.9rem;
}

.contact .content-box .info-box li i {
    position: absolute;
    left: 0;
    top: 1.5rem;
    font-size: 4.5rem;
    line-height: 4.5rem;
    color: var(--primary-text);
}

.contact .content-box .info-box li p {
    color: var(--primary-text);
}

.contact .content-box .info-box li a {
    color: var(--dark-color);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 0;
    font-family: var(--secondary-font);
}

/* ===========================
Product Page CSS
============================== */

.product .product-details p {
    margin-bottom: 1.5rem;

}

/* Media Query 1170px */
@media (max-width:1170px) {

/* General CSS */
    .section-subtitle {
        max-width: 60%;
    }

/* 01 Navbar CSS */
    .header .navbar {
        background-size: cover;
        padding: 2rem;
    }

.header .navbar-nav {
        margin-top: 2rem;
    }

.header .navbar-nav .nav-link {
        padding: 0.2rem 0.5rem;
        margin-bottom: 1rem;
    }

.header .header_right span {
        padding: 0.2rem 0.5rem;
    }

/* 02 Banner Section */
    .banner_section .carousel-item {
        height: 90vh;
    }
}

/* Media Query 991px */
@media (max-width:991px) {

/* 01 Navbar CSS */
    .header .navbar {
        background-size: cover;
        padding: 1rem 2rem;
    }

.header .navbar-nav {
        margin-top: 2rem;
    }

.header .navbar-nav .nav-link {
        padding: 0.2rem 0.5rem;
        margin-bottom: 1rem;
    }

.header .header_right span {
        padding: 0.2rem 0.5rem;
    }

/* General CSS */
    .about .banner_section,
    .product .banner_section,
    .Gallery .banner_section,
    .contact .banner_section {
        padding-top: 12.5rem;
        padding-bottom: 3rem;
    }
}

/* Media Query 767px */
@media (max-width:767px) {

/* General CSS */
    body,
    html {
        font-size: 8px;
    }

.section-subtitle {
        max-width: 80%;
    }

/* 02 Banner Section */
    .banner_section {
        min-height: 70vh;
    }

.banner_section .carousel-item {
        height: 70vh;
    }
}

/* Media Query 590px */
@media (max-width:590px) {

/* General CSS */
    body,
    html {
        font-size: 7px;
    }
}

JS

11 thoughts on “Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-3).”

sifat - hossain says:

August 15, 2022 at 12:37 pm

brother i can’t find the bootstrap source code . which you are show the project in the youtube . so how i can get the source code please help me bro .

Reply
1. Code4Education says:
  
  September 5, 2022 at 9:40 am
  
  Please do a massage on Instagram with the link to which project source code you want.
  
  Reply
Ulug'bek says:

September 5, 2022 at 11:45 pm

Thenk you

Reply
Mridul says:

September 13, 2022 at 11:28 pm

Love you brother…love from Bangladesh….

Reply
Jay says:

December 18, 2022 at 2:01 am

Hello Sir, I ran into an issue, my images are not shouting up. can you please provide me with the exact source code for this app?
It will be really helpful for me.
Thanks in advance

Reply
1. Code4Education says:
  
  January 6, 2023 at 12:02 pm
  
  Please do msg on Instagram, will definitely help you.
  
  Reply
zoritoler imol says:

January 15, 2023 at 4:53 pm

Some times its a pain in the ass to read what people wrote but this website is real user genial! .

Reply
Mohamed says:

February 2, 2023 at 10:52 pm

Thank you sir

Reply
zoritoler imol says:

March 18, 2023 at 1:24 pm

Really clean web site, thanks for this post.

Reply
Rahul Kumar says:

September 21, 2023 at 11:42 am

love u brother

Reply
Rushikesh Avachat says:

April 1, 2024 at 4:43 pm

hello

Reply

Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-3).

For the Lightbox Gallery, source code please visit the website:

HTML

CSS

JS

11 thoughts on “Responsive Multipage Website Design Using HTML CSS JavaScript & Bootstrap 5 (Part-3).”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript