-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (102 loc) · 4.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bonshare</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
<header>
<img src="/assets/images/logo.svg" alt="logo">
</header>
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-heading-text">
Affordable Ride Sharing App
</h1>
<p class="hero-para-text">
Tired of paying extra when you go out? Tired of your rides costing more than your outings? Well, Bonshare is at your service!
<br>
</p>
<img src="/assets/images/hero-arrow.svg" alt="hero-arrow" class="hero-arrow">
<img src="/assets/images/hero-line.svg" alt="hero-line" class="hero-line">
</div>
<div class="hero-image">
<!-- main-image -->
<img src="/assets/images/hero-image.svg" alt="hero-image" class="main-image">
<!-- attached-images -->
<img src="/assets/images/hero-tiny-image1.svg" alt="hero-tiny-image1" class="hero-tiny-image1">
<img src="/assets/images/hero-tiny-image2.svg" alt="hero-tiny-image2" class="hero-tiny-image2">
<img src="/assets/images/hero-tiny-image3.svg" alt="hero-tiny-image3" class="hero-tiny-image3">
<img src="/assets/images/hero-tiny-image4.svg" alt="hero-tiny-image4" class="hero-tiny-image4">
</div>
</div>
</section>
<section class="travelling-container">
<img src="/assets/images/travel-line.svg" alt="travel-line" class="travel-line">
<img src="/assets/images/travel-suv.svg" alt="travel-suv" class="travel-suv">
<div class="travelling-image">
<img src="/assets/images/travel-img.svg" alt="">
</div>
<div class="travelling-content">
<h1 class="travelling-heading-text">
Traveling is already a big deal. So, why pay more?
</h1>
<p class="travelling-para-text">
Bonshare is simple, safe, and affordable. We share the costs of travelling by posting a carpool offer on our app and connecting with other members who are interested in taking the same route. This way, we fill empty seats and make transportation a better service for everyone.
</p>
</div>
</section>
<section class="save-money-container">
<div class="save-money-content">
<h1 class="save-money-heading-text">
Travel Smart and Save Money
</h1>
<p class="save-money-para-text">
Bonshare shares the cost of travelling by helping members find friends to share their carpool. Just post your trip on our app, and we'll connect you with other people going your way. Forget taxi!
</p>
</div>
<div class="save-money-image">
<img src="/assets/images/save-money-img.svg" alt="">
</div>
</section>
<section class="using-app">
<img src="/assets/images/using-app-dots.svg" alt="using-app-dots" class="using-app-dots">
<h1 class="using-app-header">Using our app is as easy as possible</h1>
<div class="using-app-main-content">
<div class="box1">
<img src="/assets/images/box1-icon _phone.svg" alt="">
<h1>Ride with us</h1>
<p>Post a trip across the city or book a seat on a ride-sharing service.</p>
</div>
<div class="box2">
<img src="/assets/images/box2-icon _thumb up.svg" alt="">
<h1>Save money</h1>
<p>
Cheap travel is offered to all members whether you're going for business or tourism.
</p>
</div>
<div class="box2">
<img src="/assets/images/box3-icon _heart.svg" alt="">
<h1>Booking made easy</h1>
<p>
Booking with us is simple, safe and fun too!
</p>
</div>
</div>
</section>
<footer>
<p class="footer-text">
© 2022 Bonshare
</p>
<div class="socials">
<img src="/assets/images/Facebook - Dark.svg" alt="" class="facebook-logo">
<img src="/assets/images/Twitter - Dark.svg" alt="" class="twitter-logo">
<img src="/assets/images/Instagram - Dark.svg" alt="" class="instagram-logo">
<img src="/assets/images/LinkedIn - Dark.svg" alt="" class="linkedin-logo">
</div>
</footer>
</body>
</html>