1085 lines
35 KiB
HTML
1085 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sangwari Taxi - Reliable Airport Transfers</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
||
rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--primary: #2563eb;
|
||
--secondary: #1e40af;
|
||
--accent: #f59e0b;
|
||
--light: #f8fafc;
|
||
--dark: #1e293b;
|
||
--gray: #64748b;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Poppins', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--light);
|
||
color: var(--dark);
|
||
overflow-x: hidden;
|
||
}
|
||
/* new */
|
||
/* Header Styles */
|
||
header {
|
||
background-color: white;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.navbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 5%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo img {
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.logo h1 {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.logo span {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links li {
|
||
margin-left: 2rem;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: var(--dark);
|
||
font-weight: 500;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.cta-button {
|
||
background-color: var(--primary);
|
||
color: white;
|
||
padding: 0.5rem 1.5rem;
|
||
border-radius: 5px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.cta-button:hover {
|
||
background-color: var(--secondary);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.mobile-menu {
|
||
display: none;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
|
||
background-size: cover;
|
||
background-position: center;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 5%;
|
||
color: white;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 600px;
|
||
animation: fadeIn 1s ease-in-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.hero h2 {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 2rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Booking Form */
|
||
.booking-form {
|
||
background-color: white;
|
||
padding: 2rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
max-width: 1200px;
|
||
margin: -80px auto 0;
|
||
position: relative;
|
||
z-index: 100;
|
||
animation: slideUp 0.8s ease-in-out;
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(50px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.form-title {
|
||
text-align: center;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--dark);
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 0.8rem 1rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
font-size: 1rem;
|
||
background-color: #f8fafc;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
|
||
}
|
||
|
||
/* Modern date/time picker styling */
|
||
input[type="date"],
|
||
input[type="time"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
padding-right: 1.5rem;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 0.5rem center;
|
||
background-size: 1rem;
|
||
}
|
||
|
||
input[type="time"] {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 1 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.form-submit {
|
||
background-color: var(--accent);
|
||
color: white;
|
||
border: none;
|
||
padding: 1rem 2rem;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.form-submit:hover {
|
||
background-color: #e69009;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
|
||
}
|
||
|
||
/* Services Section */
|
||
.services {
|
||
padding: 5rem 5%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 2.5rem;
|
||
color: var(--dark);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-title p {
|
||
color: var(--gray);
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.service-card {
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.service-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.service-img {
|
||
height: 200px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.service-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.5s;
|
||
}
|
||
|
||
.service-card:hover .service-img img {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.service-content {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.service-content h3 {
|
||
font-size: 1.3rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--dark);
|
||
}
|
||
|
||
.service-content p {
|
||
color: var(--gray);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.service-price {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* Fleet Section */
|
||
.fleet {
|
||
background-color: #f1f5f9;
|
||
padding: 5rem 5%;
|
||
}
|
||
|
||
.fleet-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.vehicle-card {
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.vehicle-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.vehicle-img {
|
||
height: 180px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vehicle-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.vehicle-info {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.vehicle-info h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.vehicle-specs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--gray);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.spec-item i {
|
||
margin-right: 5px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.vehicle-price {
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.book-now {
|
||
background-color: var(--primary);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 5px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
width: 100%;
|
||
}
|
||
|
||
.book-now:hover {
|
||
background-color: var(--secondary);
|
||
}
|
||
|
||
/* Testimonials */
|
||
.testimonials {
|
||
padding: 5rem 5%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.testimonial-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.testimonial-card {
|
||
background-color: white;
|
||
padding: 2rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
}
|
||
|
||
.testimonial-card::before {
|
||
content: '"';
|
||
font-size: 5rem;
|
||
color: var(--primary);
|
||
opacity: 0.1;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20px;
|
||
}
|
||
|
||
.testimonial-content {
|
||
margin-bottom: 1.5rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.author-img {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
.author-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.author-info h4 {
|
||
font-size: 1rem;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.author-info p {
|
||
font-size: 0.8rem;
|
||
color: var(--gray);
|
||
}
|
||
|
||
.rating {
|
||
color: var(--accent);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background-color: var(--dark);
|
||
color: white;
|
||
padding: 4rem 5% 2rem;
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 2rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.footer-col h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 1.5rem;
|
||
position: relative;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.footer-col h3::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 50px;
|
||
height: 2px;
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
.footer-col ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-col ul li {
|
||
margin-bottom: 0.8rem;
|
||
}
|
||
|
||
.footer-col ul li a {
|
||
color: #cbd5e1;
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.footer-col ul li a:hover {
|
||
color: white;
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.social-links a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-radius: 50%;
|
||
color: white;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.social-links a:hover {
|
||
background-color: var(--accent);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.footer-bottom {
|
||
text-align: center;
|
||
padding-top: 2rem;
|
||
margin-top: 2rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Responsive Styles */
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: white;
|
||
flex-direction: column;
|
||
padding: 1rem;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.nav-links.active {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-links li {
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.mobile-menu {
|
||
display: block;
|
||
}
|
||
|
||
.hero h2 {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.booking-form {
|
||
margin-top: -120px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero h2 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.booking-form {
|
||
margin-top: -150px;
|
||
}
|
||
}
|
||
|
||
/* Animation Classes */
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.6s ease-out;
|
||
}
|
||
|
||
.animate-on-scroll.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Header -->
|
||
<header>
|
||
<nav class="navbar">
|
||
<div class="logo">
|
||
<img src="./sangwari taxi logo.png" alt="Sangwari Taxi Logo">
|
||
<h1>Sangwari<span>Taxi</span></h1>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li><a href="#home">Home</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#fleet">Our Fleet</a></li>
|
||
<li><a href="#testimonials">Testimonials</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
<a href="#book" class="cta-button">Book Now</a>
|
||
<div class="mobile-menu">
|
||
<i class="fas fa-bars"></i>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="home">
|
||
<div class="hero-content">
|
||
<h2>Premium Airport Transfers & Taxi Services</h2>
|
||
<p>Reliable, comfortable and affordable taxi services to and from all major airports. Book your ride in
|
||
seconds and travel with confidence.</p>
|
||
<a href="#book" class="cta-button">Book Your Ride Now</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Booking Form -->
|
||
<section class="booking-form" id="book">
|
||
<h2 class="form-title">Book Your Airport Transfer</h2>
|
||
<form id="booking-form">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="pickup">Pickup Location</label>
|
||
<input type="text" id="pickup" name="pickup" placeholder="Enter address or airport" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="destination">Destination</label>
|
||
<input type="text" id="destination" name="destination" placeholder="Enter destination" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="date">Pickup Date</label>
|
||
<input type="date" id="date" name="date" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="time">Pickup Time</label>
|
||
<input type="time" id="time" name="time" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Contact Number</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="passengers">Passengers</label>
|
||
<select id="passengers" name="passengers" required>
|
||
<option value="" disabled selected>Select passengers</option>
|
||
<option value="1">1 Passenger</option>
|
||
<option value="2">2 Passengers</option>
|
||
<option value="3">3 Passengers</option>
|
||
<option value="4">4 Passengers</option>
|
||
<option value="5">5+ Passengers</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="vehicle">Vehicle Type</label>
|
||
<select id="vehicle" name="vehicle" required>
|
||
<option value="" disabled selected>Select vehicle</option>
|
||
<option value="standard">Standard Sedan</option>
|
||
<option value="executive">Executive Car</option>
|
||
<option value="suv">SUV</option>
|
||
<option value="minivan">Minivan</option>
|
||
<option value="luxury">Luxury Vehicle</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="form-submit">Book Now</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Services Section -->
|
||
<section class="services" id="services">
|
||
<div class="section-title">
|
||
<h2>Our Services</h2>
|
||
<p>We offer a range of transportation services to meet all your travel needs</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<div class="service-card animate-on-scroll">
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="Airport Transfers">
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>Airport Transfers</h3>
|
||
<p>Timely pickups and drop-offs at all major airports with flight tracking for delays.</p>
|
||
<div class="service-price">1099 onwards </div>
|
||
</div>
|
||
</div>
|
||
<div class="service-card animate-on-scroll">
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="City Taxi">
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>City Taxi</h3>
|
||
<p>Quick and reliable point-to-point transportation within the city.</p>
|
||
<div class="service-price">1099 onwards </div>
|
||
</div>
|
||
</div>
|
||
<div class="service-card animate-on-scroll">
|
||
<div class="service-img">
|
||
<img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="Corporate Travel">
|
||
</div>
|
||
<div class="service-content">
|
||
<h3>Corporate Travel</h3>
|
||
<p>Professional transportation services for business meetings and events.</p>
|
||
<div class="service-price">1099 onwards </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Fleet Section -->
|
||
<section class="fleet" id="fleet">
|
||
<div class="section-title">
|
||
<h2>Our Fleet</h2>
|
||
<p>Choose from our range of well-maintained vehicles</p>
|
||
</div>
|
||
<div class="fleet-grid">
|
||
<div class="vehicle-card animate-on-scroll">
|
||
<div class="vehicle-img">
|
||
<img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="Standard Sedan">
|
||
</div>
|
||
<div class="vehicle-info">
|
||
<h3>Standard Sedan</h3>
|
||
<div class="vehicle-specs">
|
||
<div class="spec-item"><i class="fas fa-user"></i> 3 Passengers</div>
|
||
<div class="spec-item"><i class="fas fa-suitcase"></i> 2 Bags</div>
|
||
</div>
|
||
<div class="vehicle-price">1099 onwards </div>
|
||
<button class="book-now">Book Now</button>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-card animate-on-scroll">
|
||
<div class="vehicle-img">
|
||
<img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="Executive Car">
|
||
</div>
|
||
<div class="vehicle-info">
|
||
<h3>Executive Car</h3>
|
||
<div class="vehicle-specs">
|
||
<div class="spec-item"><i class="fas fa-user"></i> 3 Passengers</div>
|
||
<div class="spec-item"><i class="fas fa-suitcase"></i> 3 Bags</div>
|
||
</div>
|
||
<div class="vehicle-price">1099 onwards </div>
|
||
<button class="book-now">Book Now</button>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-card animate-on-scroll">
|
||
<div class="vehicle-img">
|
||
<img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="SUV">
|
||
</div>
|
||
<div class="vehicle-info">
|
||
<h3>SUV</h3>
|
||
<div class="vehicle-specs">
|
||
<div class="spec-item"><i class="fas fa-user"></i> 5 Passengers</div>
|
||
<div class="spec-item"><i class="fas fa-suitcase"></i> 4 Bags</div>
|
||
</div>
|
||
<div class="vehicle-price">1099 onwards</div>
|
||
<button class="book-now">Book Now</button>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-card animate-on-scroll">
|
||
<div class="vehicle-img">
|
||
<img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
|
||
alt="Minivan">
|
||
</div>
|
||
<div class="vehicle-info">
|
||
<h3>Minivan</h3>
|
||
<div class="vehicle-specs">
|
||
<div class="spec-item"><i class="fas fa-user"></i> 7 Passengers</div>
|
||
<div class="spec-item"><i class="fas fa-suitcase"></i> 6 Bags</div>
|
||
</div>
|
||
<div class="vehicle-price">1099 onwards </div>
|
||
<button class="book-now">Book Now</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section class="testimonials" id="testimonials">
|
||
<div class="section-title">
|
||
<h2>What Our Customers Say</h2>
|
||
<p>Don't just take our word for it - hear from our satisfied customers</p>
|
||
</div>
|
||
<div class="testimonial-grid">
|
||
<div class="testimonial-card animate-on-scroll">
|
||
<div class="testimonial-content">
|
||
<p>Excellent service! The driver was on time, professional, and the car was spotless. Will
|
||
definitely use Sangwari Taxi again for my airport transfers.</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-img">
|
||
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>Sarah Johnson</h4>
|
||
<p>Business Traveler</p>
|
||
<div class="rating">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card animate-on-scroll">
|
||
<div class="testimonial-content">
|
||
<p>I was impressed by how they tracked my flight and adjusted pickup time when I was delayed. The
|
||
driver was waiting when I arrived.</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-img">
|
||
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>Michael Chen</h4>
|
||
<p>Frequent Flyer</p>
|
||
<div class="rating">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card animate-on-scroll">
|
||
<div class="testimonial-content">
|
||
<p>Used their service for a family trip with lots of luggage. The minivan was perfect and the driver
|
||
helped with all our bags. Great experience!</p>
|
||
</div>
|
||
<div class="testimonial-author">
|
||
<div class="author-img">
|
||
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa Rodriguez">
|
||
</div>
|
||
<div class="author-info">
|
||
<h4>Lisa Rodriguez</h4>
|
||
<p>Family Vacation</p>
|
||
<div class="rating">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star-half-alt"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer id="contact">
|
||
<div class="footer-grid">
|
||
<div class="footer-col">
|
||
<h3>Sangwari Taxi</h3>
|
||
<p>Providing reliable and comfortable transportation services to and from airports since 2010.</p>
|
||
<div class="social-links">
|
||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Quick Links</h3>
|
||
<ul>
|
||
<li><a href="#home">Home</a></li>
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#fleet">Our Fleet</a></li>
|
||
<li><a href="#testimonials">Testimonials</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Services</h3>
|
||
<ul>
|
||
<li><a href="#">Airport Transfers</a></li>
|
||
<li><a href="#">City Taxi</a></li>
|
||
<li><a href="#">Corporate Travel</a></li>
|
||
<li><a href="#">Special Events</a></li>
|
||
<li><a href="#">Long Distance</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Contact Us</h3>
|
||
<ul>
|
||
<li><i class="fas fa-map-marker-alt"></i>Commercial complex second floor Nehru Nagar east Bhilai
|
||
beside state bank
|
||
Pin 490020</li>
|
||
<li><i class="fas fa-phone"></i>+91 7477247488</li>
|
||
<li><i class="fas fa-envelope">Bookme.sangwari@gmail.com</i>
|
||
</li>
|
||
<li><i class="fas fa-clock"></i> 24/7 Services</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2023 Sangwari Taxi. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Initialize EmailJS with your User ID
|
||
(function () {
|
||
emailjs.init("OomJ7vQPMPOtfr30E"); // Replace with your actual EmailJS user ID
|
||
})();
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const animateElements = document.querySelectorAll('.animate-on-scroll');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.1
|
||
});
|
||
|
||
animateElements.forEach(element => {
|
||
observer.observe(element);
|
||
});
|
||
|
||
// Smooth scrolling for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
const targetElement = document.querySelector(targetId);
|
||
|
||
if (targetElement) {
|
||
window.scrollTo({
|
||
top: targetElement.offsetTop - 80,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Mobile menu toggle
|
||
const mobileMenuBtn = document.querySelector('.mobile-menu');
|
||
const navLinks = document.querySelector('.nav-links');
|
||
|
||
mobileMenuBtn.addEventListener('click', function () {
|
||
navLinks.classList.toggle('active');
|
||
});
|
||
|
||
// Close mobile menu when a link is clicked
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', function () {
|
||
if (window.innerWidth <= 768) {
|
||
navLinks.classList.remove('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Set minimum date to today
|
||
const today = new Date();
|
||
const dd = String(today.getDate()).padStart(2, '0');
|
||
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
||
const yyyy = today.getFullYear();
|
||
const minDate = yyyy + '-' + mm + '-' + dd;
|
||
|
||
document.getElementById('date').min = minDate;
|
||
|
||
// Set default time to current time + 1 hour
|
||
const now = new Date();
|
||
now.setHours(now.getHours() + 1);
|
||
const hours = String(now.getHours()).padStart(2, '0');
|
||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||
const defaultTime = hours + ':' + minutes;
|
||
|
||
document.getElementById('time').value = defaultTime;
|
||
|
||
// Form submission handler
|
||
const bookingForm = document.getElementById('booking-form');
|
||
if (bookingForm) {
|
||
bookingForm.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
|
||
// Show loading state
|
||
const submitBtn = this.querySelector('.form-submit');
|
||
const originalText = submitBtn.textContent;
|
||
submitBtn.textContent = 'Sending...';
|
||
submitBtn.disabled = true;
|
||
|
||
// Send email using EmailJS
|
||
emailjs.sendForm('service_76moc5h', 'template_r6dufy8', this)
|
||
.then(function () {
|
||
alert('Thank you! Your booking request has been sent. We will contact you shortly.');
|
||
bookingForm.reset();
|
||
}, function (error) {
|
||
alert('Oops! Something went wrong. Please try again later.');
|
||
console.error('EmailJS Error:', error);
|
||
})
|
||
.finally(function () {
|
||
submitBtn.textContent = originalText;
|
||
submitBtn.disabled = false;
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<!-- comment --> |