-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (191 loc) · 11.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike Rental</title>
<script src="https://kit.fontawesome.com/379acff5c7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/stylesheet/style.css">
</head>
<body>
<header class="absolute width-100">
<div class="container flex justify-flex-between align-flex-center">
<a href="./index.html" class="logo">
<h2 class="secondary-heading">MINI RIDE <i class="fas fa-motorcycle"></i></h2>
</a>
<label for="toggle-bar" class="toggle-lable">
<i class="fas fa-bars bar" ></i>
<i class="fas fa-times cross display-none"></i>
</label>
<input type="checkbox" id="toggle-bar" class="toggle-input">
<nav>
<ul class="nav flex">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./hire.html">Hire</a></li>
<li><a href="./faq.html">FAQs</a></li>
<li><a href="./contact">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="grid-container grid template-column ">
<section class="hero span-4 grid align-grid-center">
<div class="container">
<h1 class="primary-heading">Explore Himachal <br> On a Bike Trip</h1>
</div>
</section>
<section class="why-onn span-4 padding">
<div class="container">
<h2 class="text-center secondary-heading">Why ONN?</h2>
<p class="text-center">We simplified bike rentals, so you can focus on what's important to you.</p>
<div class="grid template-column grid-column-gap">
<article>
<img src="./assets/imgs/Safe-Rides-Icon.svg" alt="">
<h4>Safe Rides</h4>
<p>Your safety is our priority. From sanitizing all bikes before every use, to extensive on-ground safety measures, your rides with ONN will always be safe and reliable. We also offer helmets on-demand.</p>
</article>
<article>
<img src="./assets/imgs/Flexible-Ownership.svg" alt="">
<h4>Safe Rides</h4>
<p>Your safety is our priority. From sanitizing all bikes before every use, to extensive on-ground safety measures, your rides with ONN will always be safe and reliable. We also offer helmets on-demand.</p>
</article>
<article>
<img src="./assets/imgs/Smarter-Mobility.svg" alt="">
<h4>Safe Rides</h4>
<p>Your safety is our priority. From sanitizing all bikes before every use, to extensive on-ground safety measures, your rides with ONN will always be safe and reliable. We also offer helmets on-demand.</p>
</article>
<article>
<img src="./assets/imgs/ONN-Stations.svg" alt="">
<h4>Safe Rides</h4>
<p>Your safety is our priority. From sanitizing all bikes before every use, to extensive on-ground safety measures, your rides with ONN will always be safe and reliable. We also offer helmets on-demand.</p>
</article>
</div>
</div>
</section>
<section class="span-4 about-sec padding">
<article class="container grid template-column-2 align-grid-center">
<div class="about-content">
<h4>What Do You Know About Us</h4>
<h3>WHO WE ARE ?</h3>
<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<p><i class="fas fa-check-circle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><i class="fas fa-check-circle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="./hire.html" class="btn">SEE ALL VEHICLES</a>
<a href="./hire.html" class="btn reserve-btn">RESERVATION NOW</a>
</div>
<div class=" relative about-img">
<div class="font-0"><img src="./assets/imgs/clement-roy-ecaLOU8I76M-unsplash.jpg" alt="" class="img"></div>
</div>
</article>
</section>
<section class="faq-sec span-4 padding">
<div class="container">
<h2 class="secondary-heading text-center">Top FAQs</h2>
<p class="text-center">Renting a Bike should be Easy, Like our FAQs.</p>
<div class="grid template-column-2">
<article>
<div>
<h5><i class="fas fa-circle"></i> How do I pay?</h5>
<p>You can pay online using debit/credit card or e-wallets. You can also pay at the hub station during your vehicle pick-up.</p>
</div>
<div>
<h5><i class="fas fa-circle"></i> Where can I pick up the bike from?
</h5>
<p>While booking your bike, you’ll be given an option to select a pick-up location in your vicinity.</p>
</div>
</article>
<article>
<div>
<h5><i class="fas fa-circle"></i> How do I pay?
</h5>
<p>You can pay online using debit/credit card or e-wallets. You can also pay at the hub station during your vehicle pick-up.</p>
</div>
<div>
<h5><i class="fas fa-circle"></i> Where can I pick up the bike from?
</h5>
<p>While booking your bike, you’ll be given an option to select a pick-up location in your vicinity.</p>
</div>
</article>
</div>
</div>
</section>
<section class="padding span-4 included-services">
<article class="container grid template-column-2 ">
<div class="img-div">
<div class="overlay">
<p>If You want learn more than conatct us</p>
<a href="./contact.html" class="btn">Contact Us</a>
</div>
</div>
<div class="included-content padding">
<h3>Included with <br>
every bike rental:
</h3>
<div class="grid template-column-2 gap">
<article>
<i class="fas fa-head-side-mask"></i>
<h4>Helmet</h4>
<p>We carry the biggest and best brands and offer the largest range of sizes and colours.</p>
</article>
<article>
<i class="fas fa-lock"></i>
<h4>Bike lock</h4>
<p>A bike is only as good as the lock that keeps it safe. Make sure yours can thwart any would-be thief.</p>
</article>
<article>
<i class="fas fa-map-marker-alt"></i>
<h4>Free Gps Guided</h4>
<p>Check out our sights lists to find the best places to bike & tour in Central Park and beyond</p>
</article>
<article>
<i class="fas fa-suitcase"></i>
<h4>Basket/bike bag</h4>
<p>Basket bag with weatherproof protection. Shoulder strap attachments make it excellent off-bike as well. </p>
</article>
</div>
</div>
</article>
</section>
</div>
</main>
<footer class="padding">
<div class="container grid template-column gap">
<nav>
<h3 class="ternary-heading">Site Links</h3>
<ul class="#">
<li><a href="./index.html"><i class="fas fa-chevron-right"></i>Home</a></li>
<li><a href="./about.html"><i class="fas fa-chevron-right"></i>About Us</a></li>
<li><a href="./hire.html"><i class="fas fa-chevron-right"></i>Hire</a></li>
<li><a href="./faq.html"><i class="fas fa-chevron-right"></i>FAQs</a></li>
</ul>
</nav>
<nav>
<h3>Reach Us</h3>
<ul>
<li><a href="#"><i class="fas fa-location-arrow"></i>#123 Dharamshala</a></li>
<li><span><i class="fas fa-phone"></i>0000 1000 200</span></li>
<li><a href="mailto:[email protected]"><i class="far fa-envelope"></i> [email protected]</a></li>
</ul>
</nav>
<nav>
<h3>Quick Links</h3>
<ul>
<li><a href="./faq.html"><a href="#">Terms & Conditions</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<nav class="follow-us">
<h3 class="ternary-heading">Follow Us</h3>
<ul class="flex">
<li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
</ul>
</nav>
</div>
</footer>
<script src="./index.js"></script>
</body>
</html>