menders

Back Back Up Advanced Editor

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

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

<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">

<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">

<link href="assets/css/style.css" rel="stylesheet">

.airstrike {
      font-family: 'Airstrike', sans-serif;
    }

.million {
      font-size: 48px;
      font-weight: bold;
      color: transparent !important;
      /* Make the text color transparent */
      background: linear-gradient(90deg, #d9232d, #d9232c56, #d9232d);
      background-size: 200% 100%;
      animation: shimmer 2.5s infinite linear;
      -webkit-background-clip: text;
      /* For Safari */
      background-clip: text;
      /* For other browsers */
    }

@keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

100% {
        background-position: -200% 0;
      }
    }

.modal-bg {
      background-image: url(assets/img/modal-bg-3.png);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  </style>

</head>

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

<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="#">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>

</div>
  </header>

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

<div class="carousel-item active home-filter"
          style="background-image: url('assets/img/TQ/Tq-White.png'), linear-gradient(to right, #C9D4DD, #475669);">
          <div class="carousel-container1">
            <h1 class="airstrike-h1 animate__animated animate__fadeInDown">TQ</h1>
          </div>
          <div class="carousel-container">
            <div class="container home-filter1">
              <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>

</div>

</div>
  </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 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>
                  
                </div>
              </div>
            </div>
          </div>

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

<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>
                
                <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>

<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 million vibration tests and electronic stability control
            identification to ensure durability.</p>
          <h2 class="text-center text-danger mt-5 slide-in-left airstrike million" style="font-size: 48px;">3 Million
            Times</h2>
          <p class="text-center slide-in-left">Vibration Test Validated</p>
        </div>
      </div>

</div>
        <div class="col-md-6 text-center py-5">
          <h2 class="fw-bold slide-in-right">Graphene Batteries</h2>
          <p class=" slide-in-right">are used in E-Bikes which have been developed after years of research and created
            new phase for
            two-wheeled electric vehicle batteries.</p>
          <div class="row mt-5 py-3">
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48"
                class="bi bi-battery-charging" viewBox="0 0 16 16">
                <path
                  d="M9.585 2.568a.5.5 0 0 1 .226.58L8.677 6.832h1.99a.5.5 0 0 1 .364.843l-5.334 5.667a.5.5 0 0 1-.842-.49L5.99 9.167H4a.5.5 0 0 1-.364-.843l5.333-5.667a.5.5 0 0 1 .616-.09z" />
                <path
                  d="M2 4h4.332l-.94 1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2.38l-.308 1H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" />
                <path
                  d="M2 6h2.45L2.908 7.639A1.5 1.5 0 0 0 3.313 10H2zm8.595-2-.308 1H12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9.276l-.942 1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
                <path
                  d="M12 10h-1.783l1.542-1.639q.146-.156.241-.34zm0-3.354V6h-.646a1.5 1.5 0 0 1 .646.646M16 8a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8" />
              </svg>
              <p>1000 Charging Cycles</p>
            </div>
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48"
                class="bi bi-sign-turn-slight-right" viewBox="0 0 16 16">
                <path
                  d="m8.335 6.982.8 1.386a.25.25 0 0 0 .451-.039l1.06-2.882a.25.25 0 0 0-.192-.333l-3.026-.523a.25.25 0 0 0-.26.371l.667 1.154-.621.373A2.5 2.5 0 0 0 6 8.632V11h1V8.632a1.5 1.5 0 0 1 .728-1.286z" />
                <path fill-rule="evenodd"
                  d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.48 1.48 0 0 1 0-2.098zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134Z" />
              </svg>
              <p>Extended Range</p>
            </div>
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48"
                class="bi bi-currency-dollar" viewBox="0 0 16 16">
                <path
                  d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73z" />
              </svg>
              <p>Low Cost</p>
            </div>
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48" class="bi bi-recycle"
                viewBox="0 0 16 16">
                <path
                  d="M9.302 1.256a1.5 1.5 0 0 0-2.604 0l-1.704 2.98a.5.5 0 0 0 .869.497l1.703-2.981a.5.5 0 0 1 .868 0l2.54 4.444-1.256-.337a.5.5 0 1 0-.26.966l2.415.647a.5.5 0 0 0 .613-.353l.647-2.415a.5.5 0 1 0-.966-.259l-.333 1.242zM2.973 7.773l-1.255.337a.5.5 0 1 1-.26-.966l2.416-.647a.5.5 0 0 1 .612.353l.647 2.415a.5.5 0 0 1-.966.259l-.333-1.242-2.545 4.454a.5.5 0 0 0 .434.748H5a.5.5 0 0 1 0 1H1.723A1.5 1.5 0 0 1 .421 12.24zm10.89 1.463a.5.5 0 1 0-.868.496l1.716 3.004a.5.5 0 0 1-.434.748h-5.57l.647-.646a.5.5 0 1 0-.708-.707l-1.5 1.5a.5.5 0 0 0 0 .707l1.5 1.5a.5.5 0 1 0 .708-.707l-.647-.647h5.57a1.5 1.5 0 0 0 1.302-2.244z" />
              </svg>
              <p>Recyclable</p>
            </div>
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48" class="bi bi-ban"
                viewBox="0 0 16 16">
                <path
                  d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" />
              </svg>
              <p>Non-flammable</p>
            </div>
            <div class="col-md-4 col-6 text-center small slide-in-right">
              
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#F47C48" class="bi bi-award"
                viewBox="0 0 16 16">
                <path
                  d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702z" />
                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
              </svg>
              <p>18-Month Warranty</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

<footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">

<div class="col-lg-4 col-md-6">
            <div class="footer-info">
              <img src="assets/img/logo.png" style="width: 50%" alt="">
              <br>
              <p>
                Chawla Green Motors is a joint venture of Chawla Group and QJ motors which is a leader in smart
                motorcycle industry.
              </p>
              <div class="social-links mt-3">
                <a href="https://www.facebook.com/chawlagreenmotorsofficial/" class="facebook"><i
                    class="bi bi-facebook"></i></a>
                    <a href="https://www.instagram.com/chawlagreenmotors/" class="instagram"><i
                        class="bi bi-instagram"></i></a>
                    <a href="https://www.tiktok.com/@chawlageenmotors?_t=8qzo4RFxV3P&_r=1" class="instagram"><i
                        class="bi bi-tiktok"></i></a>
                    <a href="https://www.youtube.com/@ChawlaGreenMotors" class="instagram"><i
                        class="bi bi-youtube"></i></a>
                    <a href="https://snapchat.com/t/WuXX9kPU" class="instagram"><i
                        class="bi bi-snapchat"></i></a>
                <a href="https://www.threads.net/@chawlagreenmotors" class="threads"><i class="bi bi-threads"></i></a>
                <a href="https://www.linkedin.com/company/chawla-green-motors/about/?viewAsMember=true"
                  class="linkedin"><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>

<div class="col-lg-3 offset-md-1 col-md-6">
            <h3 class="text-light mb-4">Address</h3>
            <p><i class="bi bi-geo-alt-fill me-2"></i>3-KM Rohi Nala Road Kahna, Lahore, Pakistan</p>
            <p><i class="bi bi-telephone-fill me-2"></i><a href="tel:+923114995162">+92 311 4995162</a></p>
            <p><i class="bi bi-envelope-fill me-2"></i>info@chawlagreenmotors.com</p>
          </div>

<div class="col-lg-2 offset-md-1 col-md-6 footer-links">
            <h3>Our Products</h3>
            <ul>
                <li><i class="bx bx-chevron-right"></i><a href="bike-tq.html">TQ Series</a></li>
                <li><i class="bx bx-chevron-right"></i><a href="bike-dq.html">DQ Series</a></li>
                <li><i class="bx bx-chevron-right"></i><a href="bike-S5.html">S5 Series</a></li>
                <li><i class="bx bx-chevron-right"></i><a href="bike-S2.html">S2 Series</a></li>
                <li><i class="bx bx-chevron-right"></i><a href="vcPlus.html">VC PLUS</a></li>
                <li><i class="bx bx-chevron-right"></i><a href="bike-v3.html">V3 Series</a></li>
            </ul>
          </div>

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

<div class="container">
      <div class="copyright">
        &copy; Copyright <strong><span>Acumen Technologies</span></strong>. All Rights Reserved
      </div>
    </div>
  </footer>

<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

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

// window.addEventListener('load', function () {
    //   var modal = new bootstrap.Modal(document.getElementById('onLoadModal'));
    //   modal.show();
    // });

// script.js
    document.addEventListener("DOMContentLoaded", function () {
      const fadeSlideElements = document.querySelectorAll('.fade-slide-down');
      const slideInElements = document.querySelectorAll('.slide-in-right');
      const slideInElementsLeft = document.querySelectorAll('.slide-in-left');
      const counterElement1 = document.getElementById('counter1');
      const counterElement2 = document.getElementById('counter2');
      const counterElement3 = document.getElementById('counter3');
      let hasStartedCounting1 = false;
      let hasStartedCounting2 = false;
      let hasStartedCounting3 = false;

function startCounting1() {
        let count = 1;
        const interval = setInterval(() => {
          count++;
          counterElement1.textContent = count;

if (count >= 360) {
            clearInterval(interval);  // Stop counting at 360
          }
        }, 10);  // Speed of counting
      }

function startCounting2() {
        let count = 1;
        const interval = setInterval(() => {
          count++;
          counterElement2.textContent = count;

if (count >= 151) {
            clearInterval(interval);  // Stop counting at 360
            counterElement2.textContent = '150.96';
          }
        }, 10);  // Speed of counting
      }

function startCounting3() {
        let count = 1;
        const interval = setInterval(() => {
          count += 21;
          counterElement3.textContent = count;

if (count >= 19000) {
            clearInterval(interval);  // Stop counting at 360
            counterElement3.textContent = '19,000';
          }
        }, 1);  // Speed of counting
      }

function checkVisibility() {
        const windowHeight = window.innerHeight;

fadeSlideElements.forEach(element => {
          const positionFromTop = element.getBoundingClientRect().top;
          if (positionFromTop - windowHeight <= 0) {
            element.classList.add('visible');
          }
        });

slideInElements.forEach(element => {
          const positionFromTop = element.getBoundingClientRect().top;
          if (positionFromTop - windowHeight <= 0) {
            element.classList.add('visible');
          }
        });

slideInElementsLeft.forEach(element => {
          const positionFromTop = element.getBoundingClientRect().top;
          if (positionFromTop - windowHeight <= 0) {
            element.classList.add('visible');
          }
        });

const positionFromTopCounter1 = counterElement1.getBoundingClientRect().top;
        if (positionFromTopCounter1 - windowHeight <= 0 && !hasStartedCounting1) {
          hasStartedCounting1 = true; // Ensure counting starts only once
          startCounting1();
        }

const positionFromTopCounter2 = counterElement2.getBoundingClientRect().top;
        if (positionFromTopCounter2 - windowHeight <= 0 && !hasStartedCounting2) {
          hasStartedCounting2 = true; // Ensure counting starts only once
          startCounting2();
        }

const positionFromTopCounter3 = counterElement3.getBoundingClientRect().top;
        if (positionFromTopCounter3 - windowHeight <= 0 && !hasStartedCounting3) {
          hasStartedCounting3 = true; // Ensure counting starts only once
          startCounting3();
        }
      }

window.addEventListener('scroll', checkVisibility);
      checkVisibility(); // Initial check in case elements are already visible
    });

</script>

</body>

</html>