-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaboutus.html
More file actions
246 lines (227 loc) · 11.7 KB
/
aboutus.html
File metadata and controls
246 lines (227 loc) · 11.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | ExpressRail</title>
<link rel="icon" type="image/png" href="images/subway.png">
<link rel="stylesheet" href="css/aboutus.css">
<link rel="stylesheet" href="css/navbar.css">
<script src="javascript/checkLogin.js" defer></script>
</head>
<body>
<header>
<nav class="navbar">
<h2 class="logo"><a href="index.html">ExpressRail.</a></h2>
<input type="checkbox" id="menu-toggler">
<label for="menu-toggler" id="hamburger-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18V11H3v2zm0-7v2h18V6H3z"/>
</svg>
</label>
<ul class="all-links">
<li class="logged-in"><a href="useraccount.html">Profile</a></li>
<li><a href="BookTickets.html">Book Tickets</a></li>
<li><a href="trainSchedule.html">Train Timings</a></li>
<li><a href="index.html#contact">Contact Us</a></li>
<li class="logged-in log-out"><a href="#">Log Out</a></li>
<li class="not-logged-in"><a href="login.html">Sign In</a></li>
<li class="join-btn not-logged-in"><a href="registration.html">Sign Up</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Journey With Confidence</h1>
<p>ExpressRail has been connecting people and places for over 25 years with our reliable, comfortable, and affordable rail services across the country.</p>
<a href="BookTickets.html" class="btn">Book Your Journey</a>
</section>
<div class="container">
<section class="about-section">
<div class="about-image"></div>
<div class="about-content">
<h2>Our Story</h2>
<p>Founded in 2025, ExpressRail began with a simple mission: to make rail travel more accessible, comfortable, and efficient for everyone. What started as a single route between two cities has grown into a nationwide network serving millions of passengers annually.</p>
<p>Our commitment to innovation has led us to pioneer several industry firsts, including real-time tracking, mobile ticketing, and eco-friendly train designs that reduce our carbon footprint by up to 40% compared to traditional rail services.</p>
<p>Today, we operate over 200 trains daily, connecting more than 150 destinations across the country with a fleet of modern, comfortable trains and a team of dedicated professionals.</p>
</div>
</section>
<section class="stats-section">
<div class="stats-container">
<div class="stat-item">
<div class="stat-number" id="yearsCounter">0</div>
<div class="stat-label">Years of Service</div>
</div>
<div class="stat-item">
<div class="stat-number" id="routesCounter">0</div>
<div class="stat-label">Routes Nationwide</div>
</div>
<div class="stat-item">
<div class="stat-number" id="passengersCounter">0</div>
<div class="stat-label">Passengers Daily</div>
</div>
<div class="stat-item">
<div class="stat-number" id="employeesCounter">0</div>
<div class="stat-label">Dedicated Employees</div>
</div>
</div>
</section>
<section class="values-section">
<div class="section-header">
<h2>Our Core Values</h2>
<p>The principles that guide every decision we make and every journey we provide.</p>
</div>
<div class="values-grid">
<div class="value-card">
<div class="value-icon">🚆</div>
<h3>Reliability</h3>
<p>We maintain an industry-leading 98.7% on-time performance record through rigorous maintenance and operational excellence.</p>
</div>
<div class="value-card">
<div class="value-icon">💚</div>
<h3>Sustainability</h3>
<p>Our eco-friendly initiatives reduce carbon emissions by 40% compared to traditional rail, contributing to a greener future.</p>
</div>
<div class="value-card">
<div class="value-icon">👥</div>
<h3>Community</h3>
<p>We believe in connecting not just places, but people - fostering relationships and economic growth across regions.</p>
</div>
<div class="value-card">
<div class="value-icon">✨</div>
<h3>Innovation</h3>
<p>From mobile ticketing to AI-powered scheduling, we're constantly evolving to enhance your travel experience.</p>
</div>
<div class="value-card">
<div class="value-icon">🛡️</div>
<h3>Safety</h3>
<p>Your security is our top priority, with advanced systems and highly trained staff ensuring peace of mind.</p>
</div>
<div class="value-card">
<div class="value-icon">😊</div>
<h3>Comfort</h3>
<p>Spacious seating, free WiFi, and premium amenities make every journey with us a pleasure.</p>
</div>
</div>
</section>
<section class="testimonials-section">
<div class="section-header">
<h2>What Our Passengers Say</h2>
<p>Hear from travelers who've experienced the RailExpress difference.</p>
</div>
<div class="testimonials-container">
<div class="testimonial">
<div class="testimonial-content">
<p>I've been using RailExpress for my weekly commute for three years now. The reliability is unmatched, and the new premium cabins have made my 2-hour journey something I actually look forward to.</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Emma Rodriguez" class="author-image">
<div class="author-info">
<h4>Emma Rodriguez</h4>
<p>Frequent Traveler</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-content">
<p>As someone who's environmentally conscious, I appreciate RailExpress's commitment to sustainability. Knowing my travel has a lower carbon footprint makes the experience even better.</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="James Wilson" class="author-image">
<div class="author-info">
<h4>James Wilson</h4>
<p>Environmental Advocate</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta-section">
<h2>Ready for Your Next Adventure?</h2>
<p>Join millions of satisfied passengers who choose RailExpress for comfortable, reliable, and eco-friendly travel.</p>
<a href="BookTickets.html" class="btn">Book Your Tickets Now</a>
</section>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>ExpressRail</h3>
<p>Connecting people and places with reliable, comfortable rail travel since 2025.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="BookTickets.html">Book Tickets</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="routes.html">Routes & Schedules</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<ul>
<li>1-800-RAIL-EXP</li>
<li>info@railexpress.com</li>
<li>123 Railway Avenue</li>
<li>Metro City, Banglore 10001</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 ExpressRail. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Font Awesome for icons (loaded from CDN) -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script>
// Counter animation for stats
function animateCounter(elementId, targetNumber, duration = 2000) {
const element = document.getElementById(elementId);
const startNumber = 0;
const increment = targetNumber / (duration / 16); // 60fps
let currentNumber = startNumber;
const timer = setInterval(() => {
currentNumber += increment;
if (currentNumber >= targetNumber) {
clearInterval(timer);
currentNumber = targetNumber;
}
element.textContent = Math.floor(currentNumber);
}, 16);
}
// Initialize counters when stats section comes into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCounter('yearsCounter', 25);
animateCounter('routesCounter', 150);
animateCounter('passengersCounter', 200000);
animateCounter('employeesCounter', 3500);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
observer.observe(document.querySelector('.stats-section'));
// Simple testimonial carousel functionality
let currentTestimonial = 0;
const testimonials = document.querySelectorAll('.testimonial');
function showTestimonial(index) {
testimonials.forEach((testimonial, i) => {
testimonial.style.display = i === index ? 'block' : 'none';
});
}
function nextTestimonial() {
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
showTestimonial(currentTestimonial);
}
// Only run carousel if there are multiple testimonials
if (testimonials.length > 1) {
showTestimonial(0);
setInterval(nextTestimonial, 5000);
}
</script>
</body>
</html>