-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
461 lines (391 loc) · 13.3 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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ola-clone</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@400;500&family=Rubik:wght@300;400;500&family=Silkscreen&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- PARENT HEADER -->
<section class="main-screen">
<!-- HEADER SECTION -->
<section class="header">
<!-- NAVBAR STARTS -->
<div class="navbar">
<div class="logo">
<img
class="logo"
src="IMAGES/logo.svg" alt="logo">
</div>
<div class="nav-items">
<a href="#"> Buy/Sell</a>
<a href="#"> Ola Drive </a>
<a href="#"> Ola Select </a>
<a href="#"> Ola Fleet </a>
<a href="#"> Features </a>
<a href="#"> Book Now </a>
</div>
</div>
<!-- NAVBAR ENDS -->
</section>
<!-- HEADING SECTION ENDS -->
<div class="main-heading">
<h1>Book a City Taxi to your <br>destination in town
</h1>
<h3>Choose from a range of categories and prices</h3>
</div>
<!-- HERO SECTION STARTS -->
<section class="hero">
<div class="b2">
<a href="#">CITY TAXI</a>
<a href="#">OUTSTATION</a>
<a href="#">RENT </a>
</div>
<h3 class="h3 ">Your everyday travel partner <br>
AC Cabs for point to point travel</h3>
<div class="whereto">
<p class="pickup">
<text><strong> PICKUP : </strong> <input type="text" placeholder="Current Location..."></text>
<img
src="IMAGES/PinMap.svg" alt="pinmap">
</p>
<p class="drop">
<text> <strong>DROP : </strong> <input type="text" placeholder="Enter drop for ride estimate..."> </text>
<img
src="IMAGES/drop.svg" alt="pinmap" </a>
</p>
<p class="when">
<text> <strong>WHEN :</strong> <input type="text" placeholder="Now...."> </text>
<img
src="IMAGES/when.svg" alt="pinmap" </a>
</p>
<div class="search">
<a href="#"> <strong>SEARCH CABS</strong>
</a>
</div>
</div>
</section>
<!-- HERO SECTION ENDS -->
<!-- BELOW HERO SECTION BOX STARTS -->
<section class="BHS">
<DIV class="rectangle">
<img
class="arrow"
src="IMAGES/ArrowRight.svg" alt="arrow" </a>
<div class="c1"id="ITEM">
<img
src="IMAGES/PLAY.svg" alt="P" </a>
<text>
<p class="l1">
Be entertained with Ola Play
</p>
<p>
Discover movies on your daily rides
</p>
</text>
</div>
<div class="c1" >
<img
src="IMAGES/sp.svg" alt="P" </a>
<text>
<p class="l1">
Get yourself a Share Pass
</p>
<p>
Enjoy cheapest rides on the go
</p>
</text>
</div>
<div class="c1">
<img
src="IMAGES/STAR.svg" alt="L" </a>
<text>
<p class="l1">
Upgrade to Ola Select
</p>
<p>
Explore the benifits of Ola Select
</p>
</text>
</div>
<img
class="arrow"
src="IMAGES/ARROWLEFT.svg" alt="A" >
</DIV>
</section>
<!-- BELOW HERO SECTION BOX ENDS -->
</section>
<!-- MAIN-SCREEN ENDS HERE -->
<div class="main-heading2">
<h2>A car for every occasion </h2>
<h4>Ola offers city taxis, inter-city cabs, and local cabs at hourly packages
</h4>
</div>
<!-- BELOW HERO SECTION SCREEN STARS HERE -->
<section class="belowhero">
<div class="column" id="column1">
<img src="IMAGES/columncar1.svg" alt="cc1">
<a href="#">CITY TAXI</a>
<P class="COLUMNPARA">
The perfect way to get through your everyday travel needs. City taxis are available 24/7 and you can book and travel in an instant. With rides starting from as low as Rs. 6/km, you can choose from a wide range of options! You can also opt to do your bit for the environment with Ola Share!
</P>
</div>
<div class="column" id="column2">
<img src="IMAGES/columncar2.svg" alt="cc1">
<a href="#"> OUTSTATION </a>
<P class="COLUMNPARA">
Ride out of town at affordable one-way and round-trip fares with Ola’s intercity travel service. Choose from a range of AC cabs driven by top partners, available in 1 hour or book upto 7 days in advance. We have you covered across India with presence in 90+ cities with over 500 one way routes.
</P>
</div>
<div class="column" id="column3">
<img src="IMAGES/columncar3.svg" alt="cc1">
<a href="#">RENT</a>
<P class="COLUMNPARA">
With Ola Rentals you get a cab at your disposal. So be it a day long business meeting, a shopping trip with your friends or just a day out in a new city, we have you covered. Packages start at 1 hour and can be extended upto 12 hours
</P>
</div>
</section>
<!-- BELOW HERO SECTION SCREEN ENDS HERE -->
<div class="main-heading2">
<h2>Why ride with Ola?</h2>
<h4>The best way to travel to your destination </h4>
</div>
<!-- SECTION 3 WHY RIDE WITH OLA STARTS HERE -->
<section class="whyride">
<div class="css-grid">
<img
class="grid-image"
src="IMAGES/gridimg1.png">
<block><h3 class="grid-heading" id="gh">Cabs for Every Pocket</h3>
<p>From Sedans and SUVs to Luxury cars for special occasions, we have cabs to suit every pocket</p></block>
</div>
<div class="css-grid">
<img
class="grid-image"
src="IMAGES/gridimg2.png">
<block><h3 class="grid-heading" id="gh" >Ola Select </h3>
<p>A membership program with Ola that lets you ride a Prime Sedan at Mini fares, book cabs without peak pricing and has zero wait time</p></block>
</div>
<div class="css-grid">
<img
class="grid-image"
src="IMAGES/gridimg3.png">
<block><h3 class="grid-heading" id="gh" >Secure and Safer Rides </h3>
<p>A membership program with Ola that lets you ride a Prime Sedan at Mini fares, book cabs without peak pricing and has zero wait time</p></block>
</div>
<div class="css-grid">
<img
class="grid-image"
src="IMAGES/gridimg4.png">
<block><h3 class="grid-heading" id="gh" >In Cab Entertainment </h3>
<p>Play music, watch videos and a lot more with Ola Play! If you are travelling through poor network areas with our free wifi facility.</p></block>
</div>
</section>
<!-- WHY RIDE WITH OLA SECTION ENDS HERE -->
<div class="main-heading2">
<h2>Meet our Awesome Fleet</h2>
<h4>The widest variety of cars to choose from
</h4>
</div>
<!-- FLEET SECTION NO.4 STARTS HERE -->
<section class="fleet">
<img
class="arrow"
src="IMAGES/ArrowRight.svg" alt="arrow">
<div class="vehicles">
<img
class="fleetofcars" id="bike"
src="IMAGES/BIKE.svg">
<p>BIKE</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/SHARE.svg">
<p>SHARE</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/MICRO.svg">
<p>MICRO</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/MINI.svg">
<p>MINI</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/PS.svg">
<p>PRIME Sedan</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/SUV.svg">
<p>SUV</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/LUX.svg">
<p>LUXURY</p>
</div>
<div class="vehicles">
<img
class="fleetofcars"
src="IMAGES/AUTO.svg">
<p>E-RICKSHAW</p>
</div>
<img
class="arrow"
src="IMAGES/ARROWLEFT.svg" alt="A" >
</section>
<!-- FLEET SECTION NO.4 ENDS HERE -->
<!-- BELOW FLEET SECTION NO.5 STARTS HERE -->
<SECTION class="BELOW-FLEET">
<img src="IMAGES/bike2.svg">
<div class="main-heading3">
<p class="bikepara">BIKE</p>
<h4>On Time , Every time </h4>
<p>
Hate waiting in the snarling traffic every day?
Not anymore as with Ola Bike ypu can now reduce your travel time by atleast 50%.
Simply book a bike with a tap of a button and ride away within minutes and all this at a most affordable rates in town!
</p>
</div>
</SECTION>
<!-- SECTION NO.6 HOW TO DOWNLOAD STARTS HERE -->
<section class="DOWNLOAD">
<div class="main-heading2" id="ola" >
<h2 id="booking">Book an Ola from the App </h2>
<h4>Download the app for exclusive deals and ease of booking
</h4>
<img src="IMAGES/DOWNLOAD.SVG">
</div>
<img
class="mobile"
src="IMAGES/MOBILE.SVG">
<!-- HOW TO DOWNLOAD ENDS HERE -->
</section>
<!-- SECTION N0.7 ABOVE FOOTER STARTS HERE -->
<section class="ABOVE-FOOTER">
<div class="SUPPORT">
<img src="IMAGES/support.svg">
<P>
<strong>24x7 Customer Servce</strong><BR>
A dedicated 24x7 customer
support team always at your
service to help solve any problem
</P>
</div>
<div class="SUPPORT">
<img src="IMAGES/SOS.svg">
<P>
<strong>Top Rated Driver-Partners</strong><BR>
All our driver-partners are
background verified and trained to
deliver only the best experience
</P>
</div>
<div class="SUPPORT">
<img src="IMAGES/SAFETY.svg">
<P>
<strong>Safety First</strong> <BR>
Keep your loved ones informed
about your travel routes or call
emergency services when in need
</P>
</div>
</section>
<!-- FOOTER SECTION STARTS HERE -->
<section class="FOOTER">
<p class="f1" id="cities">
Top Visited Cities
</p>
<hr>
<div class="links1">
<p class="f1" > Popular Outstation Routes</p>
<div class="f3">
<strong> Northern India </strong>
<a href="#">Delhi to Chandigarh Outstation Cabs</a>
<a href="#">Delhi to Agra Outstation Cabs</a>
<a href="#">Delhi to Jaipur Outstation Cabs</a>
<a href="#">Delhi to Shimla Outstation Cabs</a>
<a href="#">Delhi to Nainital Outstation Cabs</a>
<a href="#">Jaipur to Delhi Outstation Cabs</a>
</div>
<div class="f3">
<strong> Southern India </strong>
<a href="#">Chennai to Pondicherry Outstation Cabs</a>
<a href="#">Chennai to Tirupati Outstation Cabs</a>
<a href="#">Chennai to Vellore Outstation Cabs</a>
<a href="#">Hyderabad to Vijayawada Outstation Cabs</a>
<a href="#">Hyderabad to Tirupati Outstation Cabs</a>
<a href="#">Hyderabad to Warangal Outstation Cabs</a>
</div>
<div class="f3">
<strong>East & West India </strong>
<a href="#">Mumbai to Pune Outstation Cabs</a>
<a href="#">Mumbai to Mahabaleshwar Outstation Cabs</a>
<a href="#">Mumbai to Lonavala Outstation Cabs</a>
<a href="#">Mumbai to Nashik Outstation Cabs</a>
<a href="#">Mumbai to Matheran Outstation Cabs</a>
<a href="#">Mumbai to Shirdi Outstation Cabs</a>
</div>
</div>
<hr>
<div class="links-2">
<div class="social">
<a href="#">Social Links </a>
<div class="icons">
<img src="IMAGES/fb-footer-icon.svg" alt="fb-icon">
<img src="IMAGES/insta-footer-icon.svg" alt="fb-icon">
<img src="IMAGES/youtube-footer-icon.svg" alt="fb-icon">
<img src="IMAGES/twitter-footer-icon.svg" alt="fb-icon">
</div>
</div>
<div class="country">
<button class="india"> <img src="IMAGES/india-flag-icon.png"> INDIA <span class="material-symbols-outlined">
expand_more
</span> </button>
</div>
</div>
<div class="f4">
<div class="about">
<a href="#" class="discover">Discover Ola </a>
<a href="#">About Ola </a>
<a href="#">Careers</a>
<a href="#">Offers</a>
<a href="#">Contact Us</a>
<a href="#">Media Center</a>
</div>
<div class="driver">
<a href="#"> <strong> Become a driver </strong></a>
<a href="#"> <strong> Book a ride </strong></a>
</div>
</div>
<div class="f5">
<img src="IMAGES/logo.svg">
<div class="para">
<a href="#">Notices</a>
<a href="#">Terms and condition </a>
<a href="#">Privacy Policy</a>
</div>
</div>
<p class="copyright">Copyright © 2018 ANI Technologies Pvt. Ltd. All rights reserved.</p>
</section>
<!-- FOOTER SECTION ENDS HERE -->
<script src="" async defer></script>
</body>
</html>