File "contact.html"
Full Path: /home/chawlag2/public_html/cars/pdf/contact.html
File size: 18.69 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>Contact Us | 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/style.css" rel="stylesheet">
<style>
/* Match About page background */
body {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
/* Coming soon badge style in nav (same as dealer-network / about) */
.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;
}
#contact{
padding-bottom: 3rem;
}
.info, form{
padding: 20px 10px;
}
#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; }
.breadcrumbs{
margin-top: 0;
}
}
/* 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>
<!-- 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 (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
</a>
</li>
</ul>
</li>
<li><a href="dealers-network.html">Dealers Network</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html" class="active">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
</a>
</div>
</div>
<a class="ms-link" href="dealers-network.html">Dealers Network</a>
<a class="ms-link" href="about.html">About Us</a>
<a class="ms-link active" href="contact.html">Contact Us</a>
</nav>
</aside>
<!-- End Header -->
<!-- End Header -->
<main id="main" class="bg-body-secondary">
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Contact</h2>
<ol>
<li><a href="../index.html">Home</a></li>
<li>Contact</li>
</ol>
</div>
</div>
</section>
<!-- End Breadcrumbs -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact mb-5">
<div class="container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3401.400548750932!2d74.34166540000001!3d31.513157000000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3919050032ce9643%3A0xa775f46469fcc605!2sDongfeng%20x%20Chawla%20Green%20Motors%20Gulberg!5e0!3m2!1sen!2s!4v1766231229832!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="row mt-5">
<div class="col-lg-4">
<div class="info fade-slide-down">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Chawla Green Motors Pvt. Ltd:</h4>
<p> 130 E1 Gulberg III - Main Boulevard, Lahore</p>
</div>
<div class="email fade-slide-down">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>info@chawlagreenmotors.com</p>
</div>
<div class="phone fade-slide-down">
<i class="bi bi-phone"></i>
<h4>Phone</h4>
<p>+92 311 4995162</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<form action="contactDone.php" method="post" class="php-email-form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
</div>
<div class="my-3" style="display: none!important">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center">
<button type="submit" onclick="submitDone()">Send Message</button>
</div>
</form>
<script>
function submitDone() {
alert('Thank you! Our team will get back to you shortly.');
window.location.href = 'index.html';
}
</script>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
</main>
<!-- End #main -->
<!-- ======= Footer (same as Dealer Network / About) ======= -->
<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://facebook.com/dongfengmotorspakistan/" 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</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 fade-slide-down & slide-in-right -->
<script>
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();
});
(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>