File "indexCopy.html"
Full Path: /home/chawlag2/public_html/bikes/assets/img/V3/indexCopy.html
File size: 32.31 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>
.airstrike-h1 {
font-family: 'Airstrike', sans-serif;
font-size: 200px;
/* background: linear-gradient(160deg, #adadad 0%, #444444 100%); */
background-color: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
width: 450px;
/* text-align: center; */
}
.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>
<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" style="background-image: url(assets/img/S2/S2_02.jpg)"> -->
<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>
<!-- Slide 1 -->
<!-- <div class="carousel-item active" style="background-image: url(assets/img/S2/S2_02.jpg)"> -->
<!--<div class="carousel-item home-filter"-->
<!-- style="background-image: url('assets/img/DQ/Dq.png'), linear-gradient(to right, #838B7A, #566050);">-->
<!-- <div class="carousel-container1">-->
<!-- <h1 class="airstrike-h1 animate__animated animate__fadeInDown">DQ</h1>-->
<!-- </div>-->
<!-- <div class="carousel-container">-->
<!-- <div class="container home-filter1">-->
<!-- <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 class="carousel-container1">-->
<!-- <h1 class="airstrike-h1 animate__animated animate__fadeInDown">VC+</h1>-->
<!-- </div>-->
<!-- <div class="carousel-container">-->
<!-- <div class="container home-filter1">-->
<!-- <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 class="carousel-container1">-->
<!-- <h1 class="airstrike-h1 animate__animated animate__fadeInDown">S2</h1>-->
<!-- </div>-->
<!-- <div class="carousel-container">-->
<!-- <div class="container home-filter1">-->
<!-- <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 class="carousel-container1">-->
<!-- <h1 class="airstrike-h1 animate__animated animate__fadeInDown">S5</h1>-->
<!-- </div>-->
<!-- <div class="carousel-container">-->
<!-- <div class="container home-filter1">-->
<!-- <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 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 class="row justify-content-center align-items-center bg-battery text-dark p-5">
<div class="col-md-6 py-5">
</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">
<!-- <img src="assets/img/charging.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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">
<!-- <img src="assets/img/range.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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">
<!-- <img src="assets/img/cost.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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">
<!-- <img src="assets/img/recycle.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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">
<!-- <img src="assets/img/non-flamable.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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">
<!-- <img src="assets/img/warranty.png" class="mb-2 c-orange fade-slide-down" style="width: 40px; height: 40px;" alt=""> -->
<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><!-- End About Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<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-4 col-md-6 footer-links">
<h4>Our Products</h4>
<ul>
<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>
<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-tq.html">TQ Series</a></li>
<li><i class="bx bx-chevron-right"></i><a href="bike-s5.html">S5 Series</a></li>
</ul>
</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">
© Copyright <strong><span>Acumen Technologies</span></strong>. All Rights Reserved
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<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>
<!-- Template Main JS File -->
<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>