index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=judge" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-color py-5 pt-lg-5">
      <div class="container">
        <a class="navbar-brand text-white" href="#">Amit Bisht</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active text-white" aria-current="page" href="#"
                >Home</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about-section">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#online-section">Service</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-capitalize" href="#contact-section"
                >contact</a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- hero section starts -->

    <section class="bg-main bg-color hero-section">
      <div class="container">
        <div class="row mb-5">
          <div
            class="mt-5 mt-lg-0 text-center text-lg-start order-1 col-md-12 col-lg-6 d-flex flex-column justify-content-center align-items-start"
          >
            <h1 class="text-capitalize fw-bolder text-white">
              Crafting Innovative Web Solutions
            </h1>
            <p class="mt-3 mb-5 para-width text-light-grey">
              As a professional web developer, I specialize in creating dynamic,
              responsive websites and applications that drive user engagement
              and business growth.
            </p>
            <div class="text-center w-100 text-md-start">
              <button
                class="text-capitalize btn btn-primary contactButton styleContact px-5 py-2"
                data-bs-toggle="tooltip"
                data-bs-title="Get in Touch"
              >
                Contact us
              </button>
            </div>
          </div>

          <!-- image section -->

          <div class="col-md-12 col-lg-6 order-lg-1 order-0">
            <div class="text-center text-lg-end">
              <video
                src="./images/hero.mp4"
                loop
                muted
                autoplay
                class="hero-video--section"
              >
                Your browser does not support the video tag.
              </video>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-shape-divider-bottom-1726304980">
        <svg
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1200 120"
          preserveAspectRatio="none"
        >
          <path
            d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
            class="shape-fill"
          ></path>
        </svg>
      </div>
    </section>

    <!-- hero section ends -->

    <!-- service section -->

    <section class="services-section" id="about-section">
      <div class="container text-center common-title title fw-bold">
        <h2 class="common-heading">How Can We Help <br />Your Business</h2>
        <hr class="w-25 mx-auto" />
      </div>

      <div class="container mt-5">
        <div class="row g-5">
          <div class="col-12 col-lg-4 col-md-12 col-xxl-4">
            <div class="text-center card-box rounded-2 p-5">
              <img
                src="./images/link.gif"
                alt="link"
                class="img-fluid"
                width="200px"
              />

              <h5 class="my-3 fw-normal">Front-End Development</h5>

              <p class="mb-5">
                We are specialized in building responsive, dynamic, and
                high-performing user interfaces with modern libraries like
                React. Creating interactive and accessible UIs is key to
                engaging user experiences.
              </p>

              <div class="d-flex justify-content-center align-items-center">
                <a
                  href="#service"
                  class="icon-span rounded-circle d-flex justify-content-center align-items-center"
                >
                  <i class="fa-solid fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-4 col-md-12 col-xxl-4">
            <div class="text-center card-box rounded-2 p-5 shadow">
              <img
                src="./images/speaker.gif"
                alt="link"
                class="img-fluid"
                width="200px"
              />

              <h5 class="my-3 fw-normal">Back-End Development</h5>

              <p class="mb-5">
                Using Node.js and Express, We build robust and secure back-end
                architectures that handle complex business logic and integrate
                seamlessly with databases like MongoDB and MySQL.
              </p>

              <div class="d-flex justify-content-center align-items-center">
                <a
                  href="#service"
                  class="icon-span rounded-circle d-flex justify-content-center align-items-center"
                >
                  <i class="fa-solid fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-4 col-md-12 col-xxl-4">
            <div class="text-center card-box rounded-2 p-5">
              <img
                src="./images/seo.gif"
                alt="link"
                class="img-fluid"
                width="200px"
              />

              <h5 class="my-3 fw-normal">Cloud & DevOps</h5>

              <p class="mb-5">
                We leverage AWS services to ensure your application is scalable,
                reliable, and secure. From deploying apps to managing
                infrastructure, I help businesses thrive in the cloud managing
                infrastructure.
              </p>

              <div class="d-flex justify-content-center align-items-center">
                <a
                  href="#service"
                  class="icon-span rounded-circle d-flex justify-content-center align-items-center"
                >
                  <i class="fa-solid fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- service section ends -->

    <!-- products showcase starts -->

    <section class="more-info-section bg-color">
      <section class="container">
        <div class="row">
          <div class="col-xl-6 xol-lg-6 col-md-12 col-12 img-section">
            <figure>
              <img
                src="./images/phone.gif"
                alt="digital-products"
                class="img-fluid"
              />
            </figure>
          </div>

          <div
            class="col-xl-6 xol-lg-6 col-md-12 col-12 d-flex flex-column justify-content-center align-items-start"
          >
            <h2 class="common-heading text-capitalize fw-bolder text-white">
              Steps to Build a <br />
              Scalable Web Application
            </h2>
            <p class="mt-3 mb-5 para-width text-light-grey">
              We follow a systematic approach to building applications—from
              planning and architecture design to development, testing, and
              deployment. With expertise in modern tools and frameworks, I
              ensure fast delivery and maintainable code.
            </p>

            <button
              class="text-capitalize btn btn-primary contactButton contact-us-btn px-5 py-2"
              data-bs-toggle="tooltip"
              data-bs-title="Get in Touch"
            >
              Contact us
            </button>
          </div>
        </div>
        <!-- </div>
      </div> -->
      </section>
    </section>

    <!-- products showcase ends -->

    <!-- online mode section starts -->

    <section class="common-section business-section" id="online-section">
      <div class="container text-center common-title title fw-bold">
        <h2 class="common-heading heading">
          Attracting Clients through <br />
          Innovative Web Solutions
        </h2>
        <hr class="w-25 mx-auto" />
      </div>

      <div class="container">
        <div class="row g-5">
          <div class="col-12 col-md-12 col-lg-6">
            <div class="d-flex px-3 py-5 shadow">
              <img
                src="./images/phone.gif"
                alt="GIF Image"
                class="d-md-block d-none img-fluid mx-3"
                width="150px"
              />
              <div>
                <p class="mb-3 fw-bolder">API Integrations</p>
                <p>
                  Enhance your application by integrating third-party APIs to
                  enable seamless interaction between systems. From payment
                  gateways to cloud services, I ensure smooth integration.
                </p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-12 col-lg-6">
            <div class="d-flex px-3 py-5 shadow">
              <img
                src="./images/speaker.gif"
                alt="GIF Image"
                class="d-md-block d-none img-fluid mx-3"
                width="150px"
              />
              <div>
                <p class="mb-3 fw-bolder">Social Media Advertising</p>
                <p>
                  Reach a wider audience by creating engaging ads on platform
                  like Facebook, Instagram and LinkedIn. Target specificc
                  demographics with potential customers interested in your
                  services.
                </p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-12 col-lg-6">
            <div class="d-flex px-3 py-5 shadow">
              <img
                src="./images/speaker.gif"
                alt="GIF Image"
                class="d-md-block d-none img-fluid mx-3"
                width="150px"
              />
              <div>
                <p class="mb-3 fw-bolder">Performance Optimization</p>
                <p>
                  We optimize both front-end and back-end performance to ensure
                  faster load times, responsive designs, and smooth user
                  experiences across devices.
                </p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-12 col-lg-6">
            <div class="d-flex px-3 py-5 shadow">
              <img
                src="./images/phone.gif"
                alt="GIF Image"
                class="d-md-block d-none img-fluid mx-3"
                width="150px"
              />
              <div>
                <p class="mb-3 fw-bolder">Cloud Deployment</p>
                <p>
                  Using cloud platforms like AWS, We deploy scalable
                  applications, ensuring continuous availability and security
                  with industry-standard practices.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- online mode section endss -->

    <!-- caraousel starts -->

    <section class="common-section mb-5 pt-5 bg-color">
      <div class="container text-center common-title title fw-bold">
        <h2 class="common-heading text-white">
          What Client Says <br />
          About Us
        </h2>
        <hr class="w-25 mx-auto" />
      </div>

      <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="1"
            aria-label="Slide 2"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="2"
            aria-label="Slide 3"
          ></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="container">
              <div class="row g-5">
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Playush Joshi</h5>
                        <p class="card-text">
                          The full-stack solutions provided were exceptional.
                          Our project ran smoothly with it.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Nalin Nepali</h5>
                        <p class="card-text">
                          Their expertise in AWS significantly improved our
                          system's scalability and performance.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Sachin Sharma</h5>
                        <p class="card-text">
                          The team delivered high-quality work and excellent
                          support throughout the project.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container">
              <div class="row g-5">
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Divyanshu Karakoti</h5>
                        <p class="card-text">
                          Outstanding service and support. The team’s knowledge
                          made a huge difference in our project.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Lalit Bisht</h5>
                        <p class="card-text">
                          Some quick example text to build on the card title and
                          make up the bulk of the card's content.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Random Person</h5>
                        <p class="card-text">
                          Some quick example text to build on the card title and
                          make up the bulk of the card's content.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container">
              <div class="row g-5">
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Random Person</h5>
                        <p class="card-text">
                          Some quick example text to build on the card title and
                          make up the bulk of the card's content.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Random Person</h5>
                        <p class="card-text">
                          Some quick example text to build on the card title and
                          make up the bulk of the card's content.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-lg-4">
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="card p-3" style="width: 18rem">
                      <img
                        alt="testimonial text"
                        class="card-img-top"
                        src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                      />
                      <div class="card-body">
                        <h5 class="card-title mb-3">Random Person</h5>
                        <p class="card-text">
                          Some quick example text to build on the card title and
                          make up the bulk of the card's content.
                        </p>
                        <div class="mt-3">
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="fa-solid fa-star" aria-hidden="true"></i>
                          <i class="far fa-star" aria-hidden="true"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>

    <!-- carousel ends -->

    <!-- expert panel section -->

    <section class="common-section mb-5 pt-5">
      <div class="container text-center common-title title fw-bold">
        <h2 class="common-heading">
          Tips and Tricks From<br />
          Our Experts
        </h2>
        <hr class="w-25 mx-auto" />
      </div>
      <div class="container">
        <div class="row g-5">
          <div class="col-12 col-md-6 col-lg-3">
            <div class="d-flex justify-content-center align-items-center">
              <div class="card" style="width: 18rem">
                <img src="./images/one.jpg" class="card-img-top" alt="..." />
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <p class="small text-grey">
                      <i class="fa-solid fa-book-open-reader"></i>: 5000
                    </p>
                    <p class="small text-grey">Sept 15, 2024</p>
                  </div>
                  <h5 class="card-title mt-3">Web Development</h5>
                  <p class="card-text mt-2 mb-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-dark px-3">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3">
            <div class="d-flex justify-content-center align-items-center">
              <div class="card" style="width: 18rem">
                <img src="./images/one.jpg" class="card-img-top" alt="..." />
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <p class="small text-grey">
                      <i class="fa-solid fa-book-open-reader"></i>: 5000
                    </p>
                    <p class="small text-grey">Sept 15, 2024</p>
                  </div>
                  <h5 class="card-title mt-3">Wordpress Developer</h5>
                  <p class="card-text mt-2 mb-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-dark px-3">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3">
            <div class="d-flex justify-content-center align-items-center">
              <div class="card" style="width: 18rem">
                <img src="./images/one.jpg" class="card-img-top" alt="..." />
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <p class="small text-grey">
                      <i class="fa-solid fa-book-open-reader"></i>: 5000
                    </p>
                    <p class="small text-grey">Sept 15, 2024</p>
                  </div>
                  <h5 class="card-title mt-3">Freelancing</h5>
                  <p class="card-text mt-2 mb-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-dark px-3">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3">
            <div class="d-flex justify-content-center align-items-center">
              <div class="card" style="width: 18rem">
                <img src="./images/one.jpg" class="card-img-top" alt="..." />
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <p class="small text-grey">
                      <i class="fa-solid fa-book-open-reader"></i>: 5000
                    </p>
                    <p class="small text-grey">Sept 15, 2024</p>
                  </div>
                  <h5 class="card-title mt-3">Graphic Designer</h5>
                  <p class="card-text mt-2 mb-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-dark px-3">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--  -->

    <!-- Contact section  -->

    <section
      class="common-section contact-section text-white pt-5 bg-color"
      id="contact-section"
    >
      <div class="custom-shape-divider-top-1726500951">
        <svg
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1200 120"
          preserveAspectRatio="none"
        >
          <path
            d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
            class="shape-fill"
          ></path>
        </svg>
      </div>
      <div class="container text-center common-title fw-bold">
        <h2 class="common-heading text-white">Contact Us</h2>
        <hr class="w-25 mx-auto" />
      </div>
      <div class="container">
        <div class="form-section mx-auto">
          <form action="https://formspree.io/f/mzzplbyy" method="POST">
            <div class="mb-3">
              <div class="row">
                <div class="col-lg-6 col-12">
                  <label for="exampleFormUserFirstName" class="form-label"
                    >First Name</label
                  >
                  <input
                    type="text"
                    name="firstName"
                    class="form-control"
                    id="exampleFormUserFirstName"
                    placeholder="First Name"
                    required
                  />
                </div>
                <div class="col-lg-6 col-12">
                  <label for="exampleFormUserLastName" class="form-label"
                    >Last Name</label
                  >
                  <input
                    type="text"
                    name="lastName"
                    class="form-control"
                    id="exampleFormUserLastName"
                    placeholder="Last Name"
                  />
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label for="exampleFormControlInput1" class="form-label"
                >Email address</label
              >
              <input
                type="email"
                name="email"
                class="form-control"
                id="exampleFormControlInput1"
                placeholder="name@example.com"
                required
              />
            </div>
            <div class="mb-3">
              <label for="exampleFormControlTextarea1" class="form-label"
                >Example textarea</label
              >
              <textarea
                class="form-control"
                name="message"
                id="exampleFormControlTextarea1"
                rows="3"
                required
                minlength="4"
              ></textarea>
            </div>

            <button type="submit" name="submit" class="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    </section>

    <!-- ends -->

    <!-- footer section -->

    <footer class="main-footer-section bg-color">
      <div class="contact-details">
        <div class="container px-5">
          <div class="row g-0">
            <div class="col-lg-4">
              <div
                class="contact-div p-5 d-flex flex-column justify-content-center align-items-center"
              >
                <div
                  class="icon-div d-flex justify-content-center align-items-center rounded-circle mb-3"
                >
                  <img
                    src="./images/call.gif"
                    alt="GIF Image"
                    class="img-fluid"
                  />
                </div>
                <p class="text-white">(+91) 87654987212</p>
              </div>
            </div>

            <div class="col-lg-4">
              <div
                class="contact-div p-5 d-flex flex-column justify-content-center align-items-center"
              >
                <div
                  class="icon-div d-flex justify-content-center align-items-center rounded-circle mb-3"
                >
                  <!--                            <i class="fa-solid fa-phone"></i>-->
                  <img
                    src="./images/email.gif"
                    alt="GIF Image"
                    class="img-fluid"
                  />
                </div>
                <p class="text-white">email@gmail.com</p>
              </div>
            </div>

            <div class="col-lg-4">
              <div
                class="contact-div p-5 d-flex flex-column justify-content-center align-items-center"
              >
                <div
                  class="icon-div d-flex justify-content-center align-items-center rounded-circle mb-3"
                >
                  <img
                    src="./images/map.gif"
                    alt="GIF Image"
                    class="img-fluid"
                  />
                </div>
                <p class="text-white">
                  <a
                    href="https://www.google.com/maps/place/30%C2%B055'36.0%22N+79%C2%B004'51.0%22E/@30.9266713,79.0782584,17z/data=!3m1!4b1!4m4!3m3!8m2!3d30.9266667!4d79.0808333?entry=ttu&g_ep=EgoyMDI0MDkxNi4wIKXMDSoASAFQAw%3D%3D"
                    target="_blank"
                    >Locate</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="footer-section py-5 text-white">
          <div class="container">
            <div class="row">
              <div class="col-lg-2 col-md-6 col-6">
                <div class="footer-links">
                  <h4 class="text-white mt-5 mb-3">About</h4>
                  <ul
                    class="text-light-grey list-unstyled d-flex flex-column gap-2"
                  >
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                  </ul>
                </div>
              </div>

              <div class="col-lg-2 col-md-6 col-6">
                <div class="footer-links">
                  <h4 class="text-white mt-5 mb-3">About</h4>
                  <ul
                    class="text-light-grey list-unstyled d-flex flex-column gap-2"
                  >
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                  </ul>
                </div>
              </div>

              <div class="col-lg-2 col-md-6 col-6">
                <div class="footer-links">
                  <h4 class="text-white mt-5 mb-3">About</h4>
                  <ul
                    class="text-light-grey list-unstyled d-flex flex-column gap-2"
                  >
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                    <li>Our Story</li>
                  </ul>
                </div>
              </div>

              <div class="col-lg-6 col-md-6 col-12">
                <div class="footer-links">
                  <h4 class="mt-5 mb-3 text-white">Subscribe</h4>
                  <div class="input-group mb-3 w-75">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="Recipient's username"
                      aria-label="Recipient's username"
                      aria-describedby="basic-addon2"
                    />
                    <span
                      class="input-group-text btn btn-primary"
                      id="basic-addon2"
                      >Subscribe</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <hr class="container mx-auto" />

          <div class="row">
            <div class="col-lg-8 col-12">
              Copyright ©2024 All rights reserved. | This template is made by
              <span class="bg-theme"> Amit Bisht</span>
            </div>
            <div class="col-md-4 col-12">
              <div
                class="d-flex justify-content-center justify-content-lg-end gap-5 mt-lg-0 mt-3"
              >
                <a href="https://www.instagram.com/" target="_blank">
                  <div
                    class="icon-span d-flex justify-content-center align-items-center rounded-circle mb-3"
                  >
                    <i class="fa-brands fa-instagram"></i>
                  </div>
                </a>
                <a href="https://www.whatsapp.com/" target="_blank">
                  <div
                    class="icon-span d-flex justify-content-center align-items-center rounded-circle mb-3"
                  >
                    <i class="fa-brands fa-whatsapp"></i>
                  </div>
                </a>
                <a href="https://www.twitter.com/" target="_blank">
                  <div
                    class="icon-span d-flex justify-content-center align-items-center rounded-circle mb-3"
                  >
                    <i class="fa-brands fa-twitter"></i>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!--  -->

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
      crossorigin="anonymous"
    ></script>
    <script>
      const tooltipTriggerList = document.querySelectorAll(
        '[data-bs-toggle="tooltip"]'
      );
      const tooltipList = [...tooltipTriggerList].map(
        (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
      );
    </script>
    <script>
      const contactButtons = document.querySelectorAll(`.contactButton`);

      contactButtons.forEach((button) => {
        button.addEventListener("click", function () {
          document
            .getElementById("contact-section")
            .scrollIntoView({ behavior: "smooth" });
        });
      });
    </script>
  </body>
</html>