-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
354 lines (305 loc) · 12 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Helbiz - by Alexander Orlov</title>
<meta name="description" content="helbiz.com responsive layout by Alexander Orlov">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/12bool.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Begin header -->
<header>
<!-- begin navigation fixed-row -->
<div class="fixed-row">
<div class="container">
<div class="col-lg-2 col-lg-offset-1 col-md-5 col-md-offset-1
col-xs-5 col-xs-offset-1">
<div class="logo">
<a href="#"><img src="img/helbiz-new-logo-black.svg" alt="helbiz logo"></a>
</div>
</div>
<div class="col-lg-8 md-display-none xs-display-none">
<nav>
<ul>
<li><a href="#">helbizgo</a></li>
<li><a href="#">helbizbike</a></li>
<li><a href="#">covid-19</a></li>
<li><a href="#">mobility analytics</a></li>
<li><a href="#">about</a></li>
<li><a href="#">shop</a></li>
</ul>
<ul class="lang-setting">
<li><a href="#">eng</a></li>
<li><a href="#">ita</a></li>
<li><a href="#">es</a></li>
</ul>
</nav>
</div>
<!-- Begin burger menu -->
<div class="lg-display-none col-md-5 col-xs-5">
<div class="burger-menu">
<button id="burger-menu">
<!-- <i class="fas fa-bars"></i> -->
<span></span>
</button>
</div>
</div>
<!-- End burger menu -->
<!-- Begin menu only for medium and small devices -->
<div id="overlay">
<div class="container">
<div class="lg-display-none col-md-12 col-xs-12">
<div class="vertical-menu">
<ul>
<li><a href="">HELBIZGO</a></li>
<li><a href="">HELBIZBIKE</a></li>
<li><a href="">COVID-19</a></li>
<li><a href="">MOBILITY ANALYTICS</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">SHOP</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- END menu only for medium and small devices -->
</div>
</div>
<!-- End navigation fixed row -->
<!-- Begin jumbotron -->
<div class="jumbotron">
<div class="teaser">
<h1 class="slogan">Shared Mobility of Tomorrow</h1>
<p>
Bringing the future of shared mobility to the streets of the world
</p>
<a href="#"><img src="img/header-google-play-badge.svg" alt="google play"></a>
<a href="#"><img src="img/header-app-store-badge.svg" alt="app store"></a>
</div>
</div>
<!-- End jumbotron -->
</header>
<!-- End header -->
<!-- Begin main -->
<main>
<!-- Begin products Section -->
<div id="products">
<div class="container">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="product-box">
<div class="product-card center">
<img src="img/go.svg" alt="HelbizGo">
<p>Seamless E-Scooter sharing globally.</p>
<a href="#">Learn more <i class="fas fa-angle-right"></i> </a>
<img class="transport" src="img/Segway.jpg" alt="segway">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="product-box">
<div class="product-card center">
<img src="img/bike.svg" alt="HelbizBike">
<p>Next generation of electric city bikes.</p>
<a href="#">Learn more <i class="fas fa-angle-right"></i> </a>
<img class="transport" src="img/Bike-2.jpg" alt="Bike">
</div>
</div>
</div>
</div>
</div>
<!-- End products Section -->
<!-- Begin explanation Section -->
<section id="explanation">
<!-- Begin explanation top -->
<div class="explanation-top">
<img src="img/iphone.png" alt="phone slider">
</div>
<!-- End explanation top -->
<!-- Begin explanation bottom -->
<div class="container explanation-bottom">
<div class="col-lg-4 col-md-12 col-xs-12">
<div class="explanation-bottom-1">
<h2>How does Helbiz work?</h2>
</div>
</div>
<div class="col-lg-4 col-lg-offset-4 col-md-12 col-xs-12">
<div class="explanation-bottom-2">
<p>
<strong>Step 1</strong><br>
Leave curbside when finished
</p>
</div>
</div>
</div>
<!-- End explanation bottom -->
</section>
<!-- End explanation Section -->
<!-- Begin cards Section -->
<section id="cards" class="center">
<div class="container">
<!-- Begin big top card -->
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="big-top-card">
<!-- Begin container right -->
<div class="container">
<div class="col-lg-6 col-lg-offset-6 col-md-12 col-xs-12">
<div class="card-content">
<h2>Smart mobility on two wheels</h2>
<p>
A cleaner and more convenient alternative to get around your city
</p>
<a href="#">Learn more <i class="fas fa-angle-right"></i> </a>
</div>
</div>
</div>
<!-- End container right -->
</div>
</div>
<!-- End big top card -->
<!-- Begin left card -->
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="left-card">
<div class="card-content">
<h2>Get the App</h2>
<p>
Download the App and start rideng today
</p>
<a href="#">iOS <i class="fas fa-angle-right"></i></a>
<a href="#">Android <i class="fas fa-angle-right"></i></a>
<img src="img/HelbiZAPP.png" alt="HelbiZAPP">
</div>
</div>
</div>
<!-- End left card -->
<!-- Begin right card -->
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="right-card">
<div class="card-content">
<h2>Find us around</h2>
<p>Find us around the globe</p>
<a href="#">Our city <i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
<!-- End right card -->
</div>
</section>
<!-- End cards Section -->
<!-- Begin collage Section -->
<section>
<div class="social-banner">
<div class="social-tag center">
<h2>#HelbizFamily</h2>
<ul>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
</section>
<!-- End collage Section -->
</main>
<!-- End Main-->
<!-- Begin Footer -->
<footer>
<!-- Begin top footer -->
<div class="container">
<div class="col-lg-2 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="footer-logo">
<a href="#"><img src="img/helbiz-footer-logo.svg" alt="Helbiz logo white"></a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="link-list">
<h3>Product</h3>
<ul>
<li><a href="#">HelbizGO</a></li>
<li><a href="#">HelbizBike</a></li>
<li><a href="#">HelbizCar</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="link-list">
<h3>Info</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Company Info</a></li>
<li><a href="#">Cities</a></li>
<li><a href="#">Sustainability</a></li>
<li><a href="#">Franchise</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="link-list">
<h3>Helbiz</h3>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Newsroom</a></li>
<li><a href="#">Media Assets</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</div>
<!-- End top footer -->
<!-- Begin middle footer -->
<div class="container">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<!-- begin middle row -->
<div class="footer-middle">
<div class="container ">
<div class="col-lg-3 col-md-12 col-xs-12">
<div class="helbiz-socila-list">
<ul>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-12 col-xs-12">
<div class="middle-link">
<a href="#">Terms & Conditions</a>
</div>
</div>
<div class="col-lg-3 col-md-12 col-xs-12">
<div class="middle-link">
<a href="#">Press & News</a>
</div>
</div>
<div class="col-lg-3 col-md-12 col-xs-12">
<div class="middle-link">
<a href="#">© 2020 Helbiz</a>
</div>
</div>
</div>
</div>
<!-- End middle row -->
</div>
</div>
<!-- End middle footer -->
<!-- Begin bootom footer -->
<div class="bottom-apps center">
<a href="#"><img src="img/app-store-badge.svg" alt="iOS Helbiz App"></a>
<a href="#"><img src="img/google-play-badge.svg" alt="iOS Helbiz App"></a>
</div>
<!-- End bottom footer -->
</footer>
<!-- End Footer -->
<script src="js/myscript.js"></script>
</body>
</html>