menders

Back Back Up Advanced Editor

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

<title>S5 Series</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

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

</head>

<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>
      <nav id="navbar" class="navbar">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="products.html" class="active">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="hero1" class="bg-body-secondary">
    <div class="col-md-12 bg-white">
      <div id="carouselExample" class="carousel slide carousel-fade bg-secondary" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" style="background-color: #8BAAC1;" data-bs-target="#carouselExample"
            data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" style="background-color: #DBDAD7;" data-bs-target="#carouselExample"
            data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" style="background-color: #000;" data-bs-target="#carouselExample"
            data-bs-slide-to="2" aria-label="Slide 3"></button>
          
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active text-center">
            <img src="assets/img/S5/S5.png" class="img-fluid h-100" alt="...">
          </div>
          <div class="carousel-item text-center">
            <img src="assets/img/S5/S5-white.png" class="img-fluid h-100" alt="...">
          </div>
          <div class="carousel-item text-center">
            <img src="assets/img/S5/S5-Black.png" class="img-fluid h-100" alt="...">
          </div>
          
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
          <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
          <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </section>

<div class="row py-5">
    <div class="col-md-12 px-5">
      <h1 class="border-bottom animate__animated animate__fadeInDown mb-4">S5</h1>
      <div class="row">
        <div class="col-md-4 mt-4 zoom-hover" style="background-color: #e9ecef;">
          
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/img/price-tag.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Price</h2>
                <h5 class="card-text">PKR 172,000 only /-</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          
        </div>
      </div>

<div class="row">
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/img/charging.svg" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Power</h2>
                <h5 class="card-text">600W</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/img/range.webp" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Speed</h2>
                <h5 class="card-text">45 km/h</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/img/charging.svg" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Range</h2>
                <h5 class="card-text">75 Km</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/battery-charge.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Battery Type</h2>
                <h5 class="card-text">4 units Graphene 48V 23Ah</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/brake-pad.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Brake</h2>
                <h5 class="card-text">Front Disc & Rear Drum</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/suspension.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Suspension</h2>
                <h5 class="card-text">Hydraulic shock absorber</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/wheelbase.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Wheel Base</h2>
                <h5 class="card-text">12 Inch</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/height2.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Seat Height</h2>
                <h5 class="card-text">70mm</h5>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mt-4 zoom-hover">
          <div class="card h-100 border-0 shadow animate__animated animate__fadeInDown">
            <div class="card-body d-flex justify-content-start">
              <div class="d-flex align-items-start me-3">
                <img src="assets/clearance2.png" width="70">
              </div>
              <div class="d-flex align-items-start flex-column">
                <h2 style="font-size: 22px;" class="card-title me-2">Ground Clearance</h2>
                <h5 class="card-text">140mm</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

function plusSlides(n) {
      showSlides(slideIndex += n);
    }

function currentSlide(n) {
      showSlides(slideIndex = n);
    }

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

<div class="row">
        <div class="col-md-12 mt-4 bg-white rounded-5 py-3 px-5">
          <h1 class="text-center mb-3">Feature List</h1>
          <div class="swiper mySwiper">
            <div class="swiper-wrapper mt-4">
              <div class="swiper-slide text-center">
                <img src="assets/img/S5/features/disc-break.png" class="img-fluid" style="width: 200px; height: 200px;">
                <h2 class="text-center mb-4">Disc Break</h2>
              </div>
              <div class="swiper-slide text-center">
                <img src="assets/img/S5/features/charging-points.png" class="img-fluid" style="width: 200px; height: 200px;">
                <h2 class="text-center mb-4">Charging Port</h2>
              </div>
              <div class="swiper-slide text-center">
                <img src="assets/img/S5/features/Light.png" class="img-fluid" style="width: 200px; height: 200px;">
                <h2 class="text-center mb-4">LED Light</h2>
              </div>
              <div class="swiper-slide text-center">
                <img src="assets/img/S5/features/meter.png" class="img-fluid" style="width: 200px; height: 200px;">
                <h2 class="text-center mb-4">Digital Meter</h2>
              </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></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="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>
      </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>

var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      grabCursor: true,
      pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

// script.js
    document.addEventListener("DOMContentLoaded", function () {
      const fadeSlideElements = document.querySelectorAll('.fade-slide-down');
      const slideInElements = document.querySelectorAll('.slide-in-right');

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');
          }
        });
      }

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

</script>

</body>

</html>