File "about.html"
Full Path: /home/chawlag2/public_html/cars/pdf/about.html
File size: 20.71 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>About Chawla Green Motors</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="../bikes/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">
<!-- Vendor CSS Files -->
<link href="../bikes/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../bikes/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="../bikes/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="../bikes/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../bikes/assets/css/imagemarque.css" rel="stylesheet">
<link href="../bikes/assets/css/style.css" rel="stylesheet">
<style>
/* Match body background style if needed */
body {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
/* Top about hero */
#about-us {
}
@media (max-width: 991.98px) {
#about-us {
}
}
/* Coming soon badge style in nav (same as dealer-network) */
.nav-coming-soon {
display: inline-block;
margin-left: 6px;
padding: 0 6px;
border-radius: 999px;
background: #f97316;
color: #111827;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* DROPDOWN WRAPPER */
.navbar .dropdown {
position: relative;
}
/* Chevron animation */
.navbar .dropdown > a i {
font-size: 12px;
margin-left: 4px;
transition: transform 0.2s ease;
}
.navbar .dropdown:hover > a i {
transform: rotate(180deg);
}
/* DROPDOWN PANEL (hidden by default) */
.navbar .dropdown ul {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 190px;
background: rgba(15, 23, 42, 0.98);
border-radius: 12px;
padding: 8px 0;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.20s ease;
z-index: 2000;
pointer-events: none;
}
/* SHOW DROPDOWN ON HOVER (desktop) + WHEN ACTIVE (mobile) */
.navbar .dropdown:hover > ul,
.navbar .dropdown.dropdown-active > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* DROPDOWN LIST ITEMS */
.navbar .dropdown ul li {
width: 100%;
}
/* DROPDOWN LINKS */
.navbar .dropdown ul li a {
display: block;
padding: 8px 16px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e5e7eb;
text-decoration: none;
white-space: nowrap;
transition: background 0.18s ease, color 0.18s ease;
}
.navbar .dropdown ul li a:hover {
background: rgba(55, 65, 81, 0.85);
color: #ffffff;
}
#footer .social-links a {
background: rgba(11, 94, 215, 0.08) !important;
color: #0b5ed7 !important;
border: 1px solid rgba(11, 94, 215, 0.18);
}
/* ===== Mobile sidebar menu (right slide) ===== */
.mobile-sidebar-overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
z-index: 9998;
}
.mobile-sidebar{
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(88vw, 360px);
background: #ffffff;
transform: translateX(105%);
transition: transform .26s ease;
z-index: 9999;
display: flex;
flex-direction: column;
padding: 18px 16px;
box-shadow: -24px 0 60px rgba(0,0,0,0.25);
}
.mobile-sidebar.open{
transform: translateX(0);
}
.mobile-sidebar-overlay.open{
opacity: 1;
visibility: visible;
}
.mobile-sidebar-close{
border: 0;
background: transparent;
font-size: 18px;
width: 44px;
height: 44px;
margin-left: auto;
display: grid;
place-items: center;
border-radius: 10px;
}
.mobile-sidebar-close:hover{
background: rgba(0,0,0,0.06);
}
.mobile-sidebar-nav{
margin-top: 6px;
overflow: auto;
padding-right: 6px;
}
.ms-link{
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px;
border-radius: 12px;
text-decoration: none;
color: #0f172a;
font-weight: 600;
}
.ms-link:hover{
background: rgba(0,0,0,0.05);
}
.ms-link.active{
background: rgba(11, 94, 215, 0.10);
color: #0b5ed7;
}
.ms-group{
margin: 6px 0;
}
.ms-accordion{
width: 100%;
border: 0;
background: transparent;
padding: 12px 10px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
color: #0f172a;
}
.ms-accordion:hover{
background: rgba(0,0,0,0.05);
}
.ms-sub{
display: none;
padding-left: 10px;
margin-top: 6px;
}
.ms-sub.open{
display: block;
}
.ms-sublink{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
border-radius: 10px;
text-decoration: none;
color: #334155;
font-weight: 600;
}
.ms-sublink:hover{
background: rgba(0,0,0,0.05);
}
/* show sidebar toggle only on mobile (bootstrap usually does this, but safe) */
@media (min-width: 992px){
#mobileNavToggle{ display: none !important; }
}
/* prevent page scroll when menu open */
body.menu-open{
overflow: hidden;
}
/* your existing badge class can stay; optional small tweak for mobile */
.nav-coming-soon{
margin-left: 8px;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
}
.navbar-mobile{
display: none !important;
}
</style>
</head>
<body clas="bg-secondary">
<!-- WhatsApp floating button -->
<a href="https://api.whatsapp.com/send?phone=+923114995162&text=Hello" class="float" target="_blank">
<i class="bi bi-whatsapp"></i>
</a>
<!-- ======= Header (updated to match dealer-network) ======= -->
<!-- HEADER (keep your existing header as-is) -->
<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="../bikes/assets/img/logo2.png" class="img-fluid" style="width: 130px;" alt="">
</a>
</h1>
<nav id="navbar" class="navbar">
<ul>
<li class="dropdown">
<a href="cars.html#car-lineup"><span>Models</span> <i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="box.html">Box</a></li>
<li><a href="007.html">007</a></li>
<li>
<a href="vigo.html">
Vigo <span class="nav-coming-soon">Coming Soon</span>
</a>
</li>
</ul>
</li>
<li><a href="dealers-network.html">Dealers Network</a></li>
<li><a href="about.html" class="active">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<!-- CHANGE: add id so we can hook JS -->
<i class="bi bi-list mobile-nav-toggle" id="mobileNavToggle"></i>
</nav>
</div>
</header>
<!-- ADD: Mobile sidebar + overlay (place right after header, before main content) -->
<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay" aria-hidden="true"></div>
<aside class="mobile-sidebar" id="mobileSidebar" aria-hidden="true">
<button class="mobile-sidebar-close" id="mobileSidebarClose" aria-label="Close menu">
<i class="bi bi-x-lg"></i>
</button>
<nav class="mobile-sidebar-nav" aria-label="Mobile navigation">
<a class="ms-link" href="../index.html">Home</a>
<div class="ms-group">
<button class="ms-accordion" type="button" id="msModelsBtn" aria-expanded="false">
<span>Models</span>
<i class="bi bi-chevron-down"></i>
</button>
<div class="ms-sub" id="msModelsSub">
<a class="ms-sublink" href="box.html">Box</a>
<a class="ms-sublink" href="007.html">007</a>
<a class="ms-sublink" href="vigo.html">
Vigo <span class="nav-coming-soon">Coming Soon</span>
</a>
</div>
</div>
<a class="ms-link" href="dealers-network.html">Dealers Network</a>
<a class="ms-link active" href="about.html">About Us</a>
<a class="ms-link" href="contact.html">Contact Us</a>
</nav>
</aside>
<!-- End Header -->
<main id="main" class="bg-body-secondary">
<section id="about-us">
<div class="bg-gradient bg-dark bg-opacity-50 h-100 w-100 d-flex justify-content-center align-items-center text-white">
<h1 class="fw-bolder">About Us</h1>
</div>
</section>
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div
class="row py-4 content bg-white rounded-5 mt-3 shadow-lg align-items-center border border-secondary-subtle">
<div class="col-md-4 text-center">
<img src="../bikes/assets/img/logo.png" class="img-fluid fade-slide-down" alt="Chawla Group">
</div>
<div class="col-md-8 pt-4 pt-lg-0">
<h4 class="fw-bold mb-0">Chawla Group</h4>
<hr class="red-line">
<p class="slide-in-left text-justify">
Chawla Group is one of the oldest and most respected business groups, built on a strong foundation of trust, innovation, and excellence. Over the years, the group has evolved into a diversified enterprise, operating across multiple sectors and delivering value through quality-driven solutions.
</p>
<p class="slide-in-left text-justify">
Powered by cutting-edge technology, skilled expertise, and a forward-thinking approach, Chawla Group focuses on developing reliable, efficient, and future-ready solutions. Our commitment to innovation, operational excellence, and customer satisfaction has positioned us as a trusted and enduring name.
</p>
</div>
</div>
<!-- ======= Dongfeng Section ======= -->
<div
class="row py-4 content bg-white rounded-5 my-3 shadow-lg align-items-center border border-secondary-subtle">
<div class="col-md-4 text-center">
<!-- Dongfeng Logo -->
<img src="images/dongfeng-logo.jpg"
class="img-fluid fade-slide-down"
alt="Dongfeng Motor Corporation"
style="max-width: 220px;">
</div>
<div class="col-md-8 pt-4 pt-lg-0">
<h4 class="fw-bold mb-0">Dongfeng Motor Corporation</h4>
<hr class="red-line">
<p class="slide-in-left text-justify">
Dongfeng Motor Corporation is one of China’s largest and most established automobile manufacturers,
founded in 1969 and headquartered in Wuhan. With decades of engineering excellence, Dongfeng operates
across passenger vehicles, commercial vehicles, electric vehicles, and advanced mobility solutions.
</p>
<p class="slide-in-left text-justify">
Dongfeng is globally recognized for its innovation in electric mobility, smart vehicle platforms,
battery technology, and intelligent driving systems. The company collaborates with leading global
automotive brands and exports vehicles to more than 100 countries worldwide.
</p>
<p class="slide-in-left text-justify">
Through its electric vehicle division, Dongfeng delivers modern EVs designed around efficiency,
safety, and real-world usability — combining cutting-edge design with long-range battery systems
and advanced driver-assistance technologies.
</p>
</div>
</div>
<!-- End Dongfeng Section -->
<div
class="row py-4 content bg-white rounded-5 my-3 shadow-lg align-items-center border border-secondary-subtle">
<div class="col-md-4 text-center">
<img src="../bikes/assets/img/qjlogo.png" class="img-fluid fade-slide-down" alt="QJ Motors">
</div>
<div class="col-md-8 pt-4 pt-lg-0">
<h4 class="fw-bold mb-0">QJ Motors</h4>
<hr class="red-line">
<p class="slide-in-left text-justify">
Qianjiang Motorcycle Co., Ltd., established in 1985 and located in Wenling, Zhejiang, is an
enterprise under Geely Technology Group, whose main business is research and development,
manufacturing, and sales of motorcycles, engines, and parts. Qianjiang was listed on Shenzhen
Stock Exchange in 1999 (Stock Code: 000913), becoming the first listed company in Taizhou.
</p>
<p class="slide-in-left text-justify">
Qianjiang successfully acquired Italy’s Benelli in 2005, becoming the first Chinese motorcycle
manufacturer to merge an international motorcycle brand. Since then, Qianjiang has produced higher
displacement engine motorcycles to meet the market needs for high-end cruisers and racing replicas
and has led the segment of motorcycles over 250cc for 10 consecutive years in China. In 2020,
Qianjiang launched a new high-end brand, QJMOTOR. Today, Qianjiang owns three brands—QJIANG,
BENELLI, and QJMOTOR—each with unique positioning to meet diverse market needs.
</p>
</div>
</div>
</div>
</section>
<!-- End About Section -->
</main><!-- End #main -->
<!-- ======= Footer (updated to match dealer-network) ======= -->
<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="../bikes/assets/img/logo.png" style="width: 50%" alt="">
<br>
<p>
</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/dongfengmotorpakistan/" 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>130 E1 Gulberg III - Main Boulevard, Lahore</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 Cars</h3>
<ul>
<li><i class="bx bx-chevron-right"></i><a href="cars.html#model-box">BOX</a></li>
<li><i class="bx bx-chevron-right"></i><a href="cars.html#model-007">007</a></li>
<li><i class="bx bx-chevron-right"></i><a href="cars.html#model-vigo">VIGO (Coming Soon)</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright Chawla Green Motors. Designed & Developed By <a href="https://buraqsys.com"><strong><span>Buraqsys Studio (PVT) Ltd.</span></strong></a>.
</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="../bikes/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../bikes/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="../bikes/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../bikes/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="../bikes/assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="../bikes/assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="../bikes/assets/js/main.js"></script>
<!-- Scroll animation for about page content (kept from your original) -->
<script>
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');
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');
}
});
}
window.addEventListener('scroll', checkVisibility);
checkVisibility();
});
(function(){
const toggle = document.getElementById('mobileNavToggle');
const sidebar = document.getElementById('mobileSidebar');
const overlay = document.getElementById('mobileSidebarOverlay');
const closeBtn = document.getElementById('mobileSidebarClose');
const modelsBtn = document.getElementById('msModelsBtn');
const modelsSub = document.getElementById('msModelsSub');
function openMenu(){
sidebar.classList.add('open');
overlay.classList.add('open');
document.body.classList.add('menu-open');
sidebar.setAttribute('aria-hidden', 'false');
overlay.setAttribute('aria-hidden', 'false');
}
function closeMenu(){
sidebar.classList.remove('open');
overlay.classList.remove('open');
document.body.classList.remove('menu-open');
sidebar.setAttribute('aria-hidden', 'true');
overlay.setAttribute('aria-hidden', 'true');
}
if(toggle){
toggle.addEventListener('click', function(e){
e.preventDefault();
openMenu();
});
}
if(closeBtn) closeBtn.addEventListener('click', closeMenu);
if(overlay) overlay.addEventListener('click', closeMenu);
// Close on ESC
document.addEventListener('keydown', function(e){
if(e.key === 'Escape') closeMenu();
});
// Accordion for Models
if(modelsBtn && modelsSub){
modelsBtn.addEventListener('click', function(){
const isOpen = modelsSub.classList.toggle('open');
modelsBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
}
// Close menu when clicking a link
if(sidebar){
sidebar.addEventListener('click', function(e){
const a = e.target.closest('a');
if(a) closeMenu();
});
}
})();
</script>
</body>
</html>