File "index-20260907120148.html"

Full Path: /home/chawlag2/public_html/bikes/assets/vendor/index-20260907120148.html
File size: 16 KB
MIME-type: text/html
Charset: utf-8

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>E-Bike</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/logo.png" rel="icon">

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">
  <link href="https://fonts.cdnfonts.com/css/airstrike" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">
  <!-- <link href="assets/css/slider.css" rel="stylesheet"> -->

  <!-- =======================================================
  * Template Name: Sailor
  * Template URL: https://bootstrapmade.com/sailor-free-bootstrap-theme/
  * Updated: Mar 17 2024 with Bootstrap v5.3.3
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->

  <style>
    
  </style>

</head>

<body class="bg-secondary">
  <a href="https://api.whatsapp.com/send?phone=+923114995162&text=Hello" class="float" target="_blank">
    <i class="bi bi-whatsapp"></i>
  </a>

  <div class="modal fade" id="onLoadModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-bg">
      <div class="modal-content bg-transparent border-0">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6 pt-0 pt-md-5">
              <div class="text-end">
                <button type="button" class="btn-close d-md-none d-inline" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <a href="products.html">
                <img src="assets/img/bike-modal1.png" class="img-fluid" alt="">
              </a>
            </div>
            <div class="col-md-6 pt-0 d-flex flex-column justify-content-between">
              <div class="text-end">
                <button type="button" class="btn-close d-none d-md-inline bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <a href="cars.html">
                <img src="assets/img/car coming soon 1.png" class="img-fluid" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ======= Header ======= -->
  <header id="header" class="sticky-top d-flex align-items-center">
    <div class="container d-flex align-items-center">

      <h1 class="logo me-auto"><a href="../index.html"><img src="assets/img/logo2.png" class="img-fluid"
            style="width: 130px;" alt=""></a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo me-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="products.html">Products</a></li>
          <!-- <li><a href="social.html">Social Responsibility</a></li> -->
          <!-- <li><a href="#">Gallery</a></li> -->
          <li><a href="#">Sitemap</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="distributor.html">Apply As Distributor</a></li>
          <li><a href="https://global.qjmotor.com/"><img src="assets/img/logo_white.png" class="img-fluid"
                style="height: 60px;" alt=""></a></li>
          <li><a href="index.html"><img src="assets/img/nexusNew.png" class="img-fluid" style="width: 120px;"
                alt=""></a>
          </li>
          <!-- <li class="dropdown"><a href="#"><span>About</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="team.html">Team</a></li>
              <li><a href="testimonials.html">Testimonials</a></li>

              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
            </ul>
          </li> -->
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header>
  <!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero">
    <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">

      <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

      <div class="carousel-inner" role="listbox">

        <!-- Slide 1 -->
        <div class="carousel-item active home-filter"
          style="background-image: url('assets/img/TQ/Tq-White.png'), linear-gradient(to right, #C9D4DD, #475669);">
          <div id="product-name1" class="carousel-container1 ">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown product-name">TQ</h1>
          </div>
          <div class="carousel-container">
            <div id="product-text1" class="container home-filter1 product-text">
              <h3 class="animate__animated animate__fadeInDown fw-bold text-white text-justify">Ride Green, Ride Clean –
                Electric Bikes for a Brighter Future!</h3>
            </div>
          </div>
        </div>

        <!-- Slide 1 -->
        <div class="carousel-item home-filter" style="background-image: url('assets/img/DQ/Dq.png'), linear-gradient(to right, #838B7A, #566050);">
          <div id="product-name-dq" class="carousel-container1">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown product-name-dq">DQ</h1>
          </div>
          <div class="carousel-container">
            <div id="product-text-dq" class="container home-filter1 product-text-dq">
              <h3 class="animate__animated animate__fadeInDown fw-bold text-white text-justify">Charge Ahead with Zero
                Emissions!</h3>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->

        <div class="carousel-item home-filter" style="background-image: url('assets/img/VC_Plus/black.png'), linear-gradient(to right, #5D5D5C, #26282C); background-size: 70vh, 100vw;">
          <div id="product-name-vc" class="carousel-container1">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown product-name-vc">VC+</h1>
          </div>
          <div class="carousel-container">
            <div id="product-text-vc" class="container home-filter1 product-text-vc">
              <h3 class="animate__animated animate__fadeInDown fw-bold text-white text-justify">Eco-Friendly Rides,
                Endless Adventures!</h3>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item home-filter bg-gradient-1" style="background-image: url('assets/img/S2/S2.png'), linear-gradient(to right, #CFDAEB, #84A4BA);">
          <div id="product-name-s2" class="carousel-container1 ">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown product-name-s2">S2</h1>
          </div>
          <div class="carousel-container">
            <div id="product-text-s2" class="container home-filter1 product-text-s2">
              <h3 class="animate__animated animate__fadeInDown fw-bold text-white text-justify">Silent, Smooth, and
                Sustainable – Embrace the Electric!</h3>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item home-filter bg-gradient-1" style="background-image: url('assets/img/S5/S5.png'), linear-gradient(to right, #AEC4D5, #5B9CB3); background-size: 70vh, 100vw;">
          <div id="product-name-s5" class="carousel-container1 ">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown product-name-s5">S5</h1>
          </div>
          <div class="carousel-container">
            <div id="product-text-s5" class="container home-filter1 product-text-s5">
              <h3 class="animate__animated animate__fadeInDown fw-bold text-white text-justify">Charging your e-bike is
                easier than fueling and better for the world too.</h3>
              
            </div>
          </div>
        </div>

      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
      </a>

    </div>
  </section><!-- End Hero -->


  <main id="main" class="bg-body-secondary">


    <!-- ======= About Section ======= -->
    <section id="about" class="about about3 py-3 py-md-5">
      <div class="container px-5 px-md-0">
        <div class="row content mt-3 mt-md-5">

          <!-- <div class="card mb-3" style="max-width: 540px;"> -->
          <div class="card mb-3 p-0 bg-dark bg-opacity-75 border-0 text-white">
            <div class="row g-0">
              <div class="col-md-4 slide-in-right d-flex">
                <img src="assets/img/chawala_logo2.jpg" class="img-fluid rounded-start" alt="...">
              </div>
              <div class="col-md-8 slide-in-left">
                <div class="card-body">
                  <h5 class="card-title">Chawla Green Motors</h5>
                  <p class="card-text">Chawla Green Motors has ventured with QJ Motors. </p>
                  <p class="card-text text-justify">QJ Motors founded in 1985, devotes itself in motorcycles, off road
                    vehicles,
                    accessories and events. <br /> Infused in smart and passionate vehicles for better riding experience
                    and fun, QJ Motor aspires to be a leader in the global smart motorcycle and four wheeler industry.
                  </p>
                  <p class="card-text text-justify">Chawla Motors is proud to collaborate with QJ Motors, a global
                    leader in smart
                    motorcycles and off-road vehicles. Founded in 1985, QJ Motors is renowned for its commitment to
                    delivering innovative and passionate riding experiences. Together, we are bringing cutting-edge
                    electronic motorcycles to the market, ensuring enhanced riding pleasure and eco-friendly technology
                    for our customers.</p>
                  <!-- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> -->
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section>
      <div class="container-fluid px-0">

        <div class="row justify-content-center text-white">
          <div class="col-md-12 text-center">
            <div class="bg-img">
              <div class="bg-gradient bg-dark bg-opacity-50 h-100">
                <div class="py-4">
                  <h1 class="fw-bold fade-slide-down">Refined Riding Experience</h1>
                  <p class="fade-slide-down fs-6">We aim to deliver a refined riding experience that combines high
                    quality,<br>
                    high performance and high safety.</p>
                </div>
                <!-- <img src="assets/img/backGround.jpg" class="img-fluid fade-slide-down" alt=""> -->
                <div class="bg-img-overlay px-0 px-md-5 bg-black bg-opacity-50 mt-0 mt-md-5">
                  <p class="text-justify px-4 px-md-5 py-0 py-md-5 fs-6 slide-in-right">Discover the next level of
                    electric bikes with superior performance
                    and style. Powered by an exceptional hub motor, these bikes deliver remarkable acceleration and
                    power
                    for a smooth ride. With front and rear disc brakes, they offer precise stopping power and safety in
                    all conditions. Available in a variety of vibrant colors, they feature an innovative graphene
                    battery
                    that provides a lightweight, durable, and efficient energy source for an impressive mileage range.
                    Ideal for commuting, exploring, or cruising, these electric bikes combine power, safety, and
                    sustainability in a sleek design. Elevate your ride with cutting-edge technology and unmatched
                    performance.</p>
                </div>
                <div class="row bg-img-overlay px-0 py-3 gap-3 px-md-5 mt-0 mt-md-5 justify-content-center">
                  <div class="col-md-3 bg-black bg-opacity-50 py-4 rounded-5 d-flex align-content-center flex-column">
                    <h2 id="counter1">1</h2>
                    <br>
                    <h5>CO2 Reduction (Ton)</h5>
                  </div>
                  <div class="col-md-3 bg-black bg-opacity-50 py-4 rounded-5 d-flex align-content-center flex-column">
                    <h2 id="counter2">1</h2>
                    <br>
                    <h5>Save Standard Coal (Ton)</h5>
                  </div>
                  <div class="col-md-3 bg-black bg-opacity-50 py-4 rounded-5 d-flex align-content-center flex-column">
                    <h2 id="counter3">1</h2>
                    <br>
                    <h5>Equivalent Trees Planted (Trees)</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="col-md-8">
            <div class="row gradient-bg px-3 py-5 rounded-5 justify-content-center align-items-center">
              <div class="col-md-6">
                <h2 class="fw-bold fade-slide-down">Powerful Motor</h2>
                <p class="fade-slide-down">which is a self-developed mileage-strenghten system that upgrading 8 core components into one
                  together deliver a compelling and efficient performance that beyond ordinary scooters.</p>
              </div>
              <div class="col-md-6 py-5">
                <img src="assets/img/backGround.jpg" class="img-fluid fade-slide-down" alt="">
              </div>
            </div>
          </div> -->

      </div>

      <div class="row justify-content-center align-items-center bg-light p-5 bg-body-secondary">
        <div class="col-md-6 text-center py-4">
          <div class="bg-1 rounded-5 slide-in-right">
            <img src="assets/img/frame1.png" class="img-fluid w-100" alt="">
          </div>
        </div>
        <div class="col-md-6 py-4">
          <h2 class="fw-bold slide-in-left">High-strength Frame</h2>
          <p class="slide-in-left text-justify">The body is constructed with premium cold-rolled structural steel and
            features a
            CAE-optimized frame. In
            addition, every vehicle undergoes one