Skip to content

Commit 52df7bc

Browse files
Jai-76Jai-76
authored
Merge pull request #35 from Srushtee1706/main
Add About Us Page
2 parents 68a1e91 + f38c248 commit 52df7bc

File tree

1 file changed

+219
-0
lines changed

1 file changed

+219
-0
lines changed

‎aboutus.html‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="NeoRide.jpeg">
7+
<title>About NeoRide</title>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10+
<style>
11+
/* Reset */
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: 'Poppins', sans-serif;
20+
min-height: 100vh;
21+
display: flex;
22+
flex-direction: column;
23+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24+
}
25+
26+
.container {
27+
background: white;
28+
border-radius: 20px;
29+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
30+
width: 100%;
31+
max-width: 900px;
32+
margin: 40px auto;
33+
overflow: hidden;
34+
animation: fadeIn 0.7s ease-out;
35+
flex: 1;
36+
display: flex;
37+
flex-direction: column;
38+
}
39+
40+
@keyframes fadeIn {
41+
from { opacity: 0; transform: translateY(20px); }
42+
to { opacity: 1; transform: translateY(0); }
43+
}
44+
45+
header {
46+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
47+
color: white;
48+
padding: 25px;
49+
text-align: center;
50+
font-size: 1.8em;
51+
font-weight: 600;
52+
position: relative;
53+
overflow: hidden;
54+
}
55+
56+
header::before {
57+
content: '';
58+
position: absolute;
59+
top: 0;
60+
left: -100%;
61+
width: 100%;
62+
height: 100%;
63+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
64+
animation: shine 3s infinite;
65+
}
66+
67+
@keyframes shine {
68+
0% { left: -100%; }
69+
100% { left: 100%; }
70+
}
71+
72+
.main-content {
73+
padding: 40px;
74+
}
75+
76+
h1, h2, h3 {
77+
color: #333;
78+
font-weight: 600;
79+
margin-bottom: 20px;
80+
text-align: center;
81+
}
82+
83+
p {
84+
color: #555;
85+
line-height: 1.8;
86+
margin-bottom: 15px;
87+
text-align: justify;
88+
}
89+
90+
.feature-grid {
91+
display: grid;
92+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
93+
gap: 25px;
94+
margin-top: 30px;
95+
}
96+
97+
.feature-card {
98+
background: #f9f9fb;
99+
padding: 30px 20px;
100+
border-radius: 15px;
101+
text-align: center;
102+
transition: all 0.3s ease;
103+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
104+
}
105+
106+
.feature-card:hover {
107+
transform: translateY(-8px);
108+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
109+
}
110+
111+
.feature-card i {
112+
font-size: 2.8em;
113+
color: #667eea;
114+
margin-bottom: 15px;
115+
}
116+
117+
.quote {
118+
text-align: center;
119+
font-style: italic;
120+
margin-top: 30px;
121+
font-size: 1.1em;
122+
color: #444;
123+
}
124+
125+
/* Footer inside container */
126+
footer {
127+
background: linear-gradient(135deg, #3b56d0 0%, #630eb7 100%);
128+
color: white;
129+
text-align: center;
130+
padding: 20px 15px;
131+
border-radius: 0 0 20px 20px;
132+
}
133+
134+
.footer-content {
135+
display: flex;
136+
flex-direction: column;
137+
align-items: center;
138+
gap: 8px;
139+
}
140+
141+
.footer-links {
142+
display: flex;
143+
gap: 20px;
144+
justify-content: center;
145+
}
146+
147+
.footer-links a {
148+
color: white;
149+
font-size: 1.3em;
150+
transition: all 0.3s ease;
151+
text-decoration: none;
152+
}
153+
154+
.footer-links a:hover {
155+
transform: scale(1.2);
156+
color: #ffd700;
157+
}
158+
</style>
159+
</head>
160+
<body>
161+
162+
<div class="container">
163+
<header>
164+
<i class="fas fa-car-side"></i> About NeoRide
165+
</header>
166+
<div class="main-content">
167+
<h1>Our Mission: Safety and Simplicity</h1>
168+
<p>
169+
NeoRide was born from a simple idea: create a ride-sharing experience that is not only convenient but also puts your safety first. We believe that booking a ride should be a seamless, stress-free process. Our platform is a proof-of-concept for this vision, showcasing how a clean, modern interface can be combined with essential safety features for a great user experience.
170+
</p>
171+
<p>
172+
As a frontend-only application, NeoRide demonstrates the power of HTML5, CSS3, and JavaScript to build rich, interactive web applications that run entirely in your browser. We are proud to offer a platform that is lightweight, fast, and accessible to everyone.
173+
</p>
174+
175+
<h2>Why Choose NeoRide?</h2>
176+
<div class="feature-grid">
177+
<div class="feature-card">
178+
<i class="fas fa-shield-alt"></i>
179+
<h3>Safety First</h3>
180+
<p>
181+
We prioritize your well-being with features like emergency contact lists and a simulated SOS button.
182+
</p>
183+
</div>
184+
<div class="feature-card">
185+
<i class="fas fa-tachometer-alt"></i>
186+
<h3>Speed & Simplicity</h3>
187+
<p>
188+
With no backend dependency, NeoRide is incredibly fast. Book a ride and get on your way in seconds.
189+
</p>
190+
</div>
191+
<div class="feature-card">
192+
<i class="fas fa-star"></i>
193+
<h3>User-Centric Design</h3>
194+
<p>
195+
Our elegant and intuitive interface makes booking, managing, and reviewing rides a breeze.
196+
</p>
197+
</div>
198+
</div>
199+
200+
<p class="quote">
201+
"Your Safety is Our Destination."
202+
</p>
203+
</div>
204+
205+
<footer>
206+
<div class="footer-content">
207+
<p>&copy; 2025 NeoRide - Your Safety First</p>
208+
<div class="footer-links">
209+
<a href="index.html" title="Home"><i class="fas fa-home"></i></a>
210+
<a href="#" title="About Us"><i class="fas fa-info-circle"></i></a>
211+
<a href="#" title="Contact"><i class="fas fa-envelope"></i></a>
212+
</div>
213+
</div>
214+
</footer>
215+
</div>
216+
217+
</body>
218+
</html>
219+

0 commit comments

Comments
 (0)