This repository has been archived by the owner on Jul 19, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
329 lines (301 loc) · 10.1 KB
/
index.html
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!-- Team Cario -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Car.io</title>
<link rel="stylesheet" href="./style.css" />
<!-- boxicons -->
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
</head>
<body>
<header class="header">
<a href="https://subash2309.github.io/car.io/" class="logo">Car.io</a>
<!-- Navbar -->
<nav class="navbar">
<a href="#">Home</a>
<a href="#cars">Cars</a>
<a href="#contact">Contact</a>
<a id="book-now-nav-text" href="#city">Book Now</a>
<button onclick="window.open('./login.html')">Login</button>
</nav>
</header>
<div class="hero" id="home">
<div class="hero-container">
<h1>Looking for a vehicle? You're at the right place.</h1>
<p class="desc">
Find affordable rental cars in <span id="city">Pondicherry!</span>
</p>
</div>
</div>
<!-- Im very proud abt what i've done below :)-->
<div class="car-booking">
<h1>Ready for your ride?</h1>
<div class="car-booking-inputs">
<div class="pickup-loc">
<input type="text" id="pickup-loc-inp" required="" />
<label for="pickup-loc" class="pickup-loc-label">
Pickup Location
</label>
<div class="pickup-loc-underline"></div>
</div>
<div class="pickup-time">
<input type="text" id="pickup-time-inp" required="" />
<label for="pickup-time" class="pickup-time-label">
Pickup Date
</label>
<div class="pickup-time-underline"></div>
</div>
</div>
<button id="cars" class="find-cars">Find Cars</button>
</div>
<!-- Cars -->
<div class="car-showcase">
<div class="content">
<img src="./assets/cars/Dacia_Duster_360x167.png" alt="dacia" />
<h3>Dacia Duster</h3>
<p>6 seats</p>
<h6>₹3250/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/peugeot-3008-suv.png" alt="suv" />
<h3>Peugeot 3008</h3>
<p>4 seats</p>
<h6>₹5000/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/renault-megane.png" alt="Renault" />
<h3>Renault Mégane</h3>
<p>4 seats</p>
<h6>₹3150/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/peugeot-e-2008.png" alt="Peugeot" />
<h3>Peugeot 2008</h3>
<p>6 seats</p>
<h6>₹4700/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/360x167_Volkswagen_Polo.png" alt="polo" />
<h3>Volkswagen Polo</h3>
<p>4 seats</p>
<h6>₹4000/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/CC_Renault_Clio_360x167.png" alt="clio" />
<h3>Renault Clio</h3>
<p>6 seats</p>
<h6>₹3750/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/360x167_px_-_Nissan_Qashqai.png" alt="nissan" />
<h3>Nissan Qashqai I-power</h3>
<p>4 seats</p>
<h6>₹4200/<span>day</span></h6>
<button>select</button>
</div>
<div class="content">
<img src="./assets/cars/Fiat_Egea_360x167.png" alt="fiat" />
<h3>Fiat Egea</h3>
<h6>₹4500/<span>day</span></h6>
<p>4 seats</p>
<button>select</button>
</div>
</div>
<!-- reviews -->
<div class="reviews">
<div id="reviews-content">
<div class="reviews-head">
<span>Reviews</span>
<h1>Customer Says</h1>
</div>
<div class="reviews-box-container">
<!-- sudeep -->
<div class="reviews-box">
<div class="reviews-text">
<p>
I'm totally into <b>Car.io</b>, ya! Whenever I head to
Pondicherry to chillax and refresh my vibes, <b>Car.io</b> is my
go-to for booking a rental, bro. It's never let me down, once i
got almost popped by these reddy anna gang. <b>Car.io</b> helped
me that day, thank you!
</p>
</div>
<div class="name-user">
<span>-Sudeep</span>
<span>sudeeptoomuchcoc@gmail.com</span>
</div>
</div>
<!-- Anonymous -->
<div class="reviews-box">
<div class="reviews-text">
<p>
Saar, every time I'm heading from Malleshwaram to Pondicherry to
pop that dude Sudeep, I always use <b>Car.io</b>! They've got a
ton of zippy rides, perfect for chasing down that guy Sudeep
like collecting coins in subway surfers!
</p>
</div>
<div class="name-user">
<span>-Anonymous</span>
<span>indranagarbros@gmail.com</span>
</div>
</div>
<!-- reddy anna -->
<div class="reviews-box">
<div class="reviews-text">
<p>
Orey, ya know I'm very calm fellow collected fellow, I once
dashed off to Pondy to pop this Sudeep dude, and let me tell ya,
<b>Car.io</b> was a total lifesaver! Pondy, man, it showered us
with loads of chill vibes after I sorted out that Sudeep scene.
</p>
</div>
<div class="name-user">
<span>-Reddy Anna</span>
<span>(Self Proclaimed don of Indra nagar, Malleshwaram)</span>
<span>reddy.don@gmail.com</span>
</div>
</div>
<!-- -->
<div class="reviews-box">
<div class="reviews-text">
<p>
Booking's as easy as buttering dosas, and their rides are
cleaner than a freshly swept temple. The staff? Friendlier than
your neighbor's auntie who always slips you extra samosas. Give
'em a try, mate, and you'll be driving around Pondy like you own
the place.
</p>
</div>
<div class="name-user">
<span>-Adithya varma</span>
<span>dadslittleprince42@gmail.com</span>
</div>
</div>
</div>
</div>
</div>
<!-- Features of CAR.IO -->
<div class="features">
<h1>Why choose <b>Car.io</b></h1>
<p class="sub-features">
Discover the features that make our car rental experience exceptional
</p>
<!-- features-contents -->
<div class="box-container">
<div class="card">
<div class="feature-text" data-text="booking">
<h3>Flexible Booking Options</h3>
</div>
<div>
<p>
We offer flexible booking options to suit your needs, including
daily, weekly and monthly rentals.
</p>
</div>
</div>
<div class="card">
<div class="feature-text" data-text="rates">
<h3>Affordable Rates</h3>
</div>
<div>
<p>
Our car rental rates are competitive and affordable, so you can
enjoy a comfortable ride without breaking the bank.
</p>
</div>
</div>
<div class="card">
<div class="feature-text" data-text="support">
<h3>24/7 Customer Support</h3>
</div>
<div>
<p>
Our dedicated customer support team is available 24/7 to assist
you with any questions or concerns you may have.
</p>
</div>
</div>
<div class="card">
<div class="feature-text" data-text="cars">
<h3>Wide Range of Cars</h3>
</div>
<div>
<p>
We have a wide range of cars to choose from, including economy,
luxury, and family cars, so you can find the perfect car for your
needs.
</p>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div id="contact" class="con-nav"></div>
<div class="contact">
<span>Don't be a stranger</span>
<h3 class="con-head">Contact us</h3>
<div class="contact-container">
<div class="box">
<box-icon name="phone" type="solid"></box-icon>
<h3>Phone Number</h3>
<span>1-800-273-8255</span>
</div>
<div class="box">
<box-icon name="envelope"></box-icon>
<h3>Email</h3>
<span>cario@info.com</span>
</div>
<div class="box">
<box-icon type="solid" name="map"></box-icon>
<h3>Address</h3>
<span>420, dubai cross st, Pondicherry - 605001</span>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="footer-content">
<!-- icons -->
<h3>CAR.IO</h3>
<p>Find affordable rental cars in Pondicherry!</p>
<ul class="socials">
<li>
<box-icon
name="facebook-circle"
type="logo"
color="#080a45"
></box-icon>
</li>
<li>
<box-icon name="twitter" type="logo" color="#080a45"></box-icon>
</li>
<li>
<box-icon name="gmail" type="logo" color="#080a45"></box-icon>
</li>
<li>
<box-icon
name="instagram-alt"
type="logo"
color="#080a45"
></box-icon>
</li>
</ul>
<p>
copyright © 2024
<b><a href="https://github.com/SUBASH2309/car.io">CAR.IO</a></b
>. designed by Team Cario
</p>
</div>
</footer>
</body>
</html>
<!-- Team Cario -->