-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcareers.html
executable file
·308 lines (291 loc) · 14.9 KB
/
careers.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="/dist/css/main.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Scoot Careers</title>
</head>
<body>
<div class="wrapper">
<header class="header mb-2">
<div class="container-fluid">
<!-- Header -->
<nav class="navbar bg-light navbar-expand-md mx-xxl-5 px-xxl-5">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="./index.html" class="navbar-brand mx-auto">
<img src="./assets/logo.svg" alt="Scoot logo" class="img-fluid align-middle me-5">
</a>
<!-- Offcanvas Menu -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
<img src="./assets/logo.svg" id="offcanvasNavbarLabel"
class="sidebar-logo navbar-brand mx-auto d-md-none" alt="Scoot logo">
</div> <!-- End Offcanvas Header -->
<div class="offcanvas-body d-flex flex-column justify-content-between">
<ul class="navbar-nav mt-5 ms-4 mt-md-2">
<li class="nav-item m-md-2 m-xl-4">
<a class="nav-link" href="./about.html">About</a>
</li>
<li class="nav-item m-md-2 m-xl-4">
<a class="nav-link" href="./locations.html">Locations</a>
</li>
<li class="nav-item m-md-2 m-xl-4">
<a class="nav-link" href="./careers.html">Careers</a>
</li>
</ul>
<div class="button-container d-md-none position-absolute">
<a href="#careersGetScoot"
class=" nav-mobile-btn btn btn-primary btn-lg d-md-none fs-1 d-flex align-items-center justify-content-center">Get
Scootin</a>
</div>
</div>
</div>
</div>
<!-- CTA Button -->
<a href="#careersGetScoot" class="btn btn-primary d-none d-md-block">Get Scootin</a>
</nav>
</div><!-- wrapper -->
</header><!-- End Header -->
<main class="main main-careers overflow-hidden">
<section class="banner-careers banner container-fluid position-relative">
<article
class="banner-careers--container container position-relative d-flex flex-column justify-content-center align-items-center align-items-xl-start h-100">
<h2
class="careers-heading banner-heading heading-1 text-center text-md-start w-100 ms-md-5 ms-xxl-0">
Careers
</h2>
</article>
<div class="banner-patterns d-flex flex-row">
<div class="shape--whitecircles d-none d-md-block"></div>
</div>
</section><!-- End Banner -->
<section
class="section features features-careers container-fluid d-flex flex-column justify-content-evenly align-items-center position-relative">
<article
class="feature-careers container d-flex flex-column flex-xl-row-reverse justify-content-between align-items-center text-center text-xl-start position-relative w-100 mb-5">
<div class="feature-careers--image position-relative">
<img class="img-fluid img-round" src="/assets/images/join-us.jpg" alt="Join us">
<div class="pattern pattern--leftdwarrow1 position-absolute"></div>
<div class="pattern pattern--circleright1 d-none d-md-block position-absolute"></div>
</div>
<div class="feature-careers--copy">
<h2 class="heading-2 feature-heading feature-careers--heading">
Care to join our mission?
</h2>
<p class="paragraph feature-careers--text">We’re always looking for ambitious individuals to
help us on our
journey. If you’re passionate about our mission to provide
clean, accessible transport to improve urban living we want to
hear from you!</p>
<div class="button-container">
<button class="btn btn-lg btn-primary feature-button fs-5">
Learn More
</button>
</div>
</div>
</article>
</section><!-- End Features -->
<section class="section values container-fluid">
<h2 class="values-title heading-2 container text-center mb-5">
Why join us?
</h2>
<div class="container d-flex flex-column flex-xl-row justify-content-evenly align-items-center h-100">
<div class="row">
<div class="col-12 col-xl-4">
<div class="card value text-center mb-5 border-0">
<div class="value-image position-relative mb-5">
<img src="/assets/images/our-tech.jpg" alt="Our tech"
class="card-img-top img-round">
<span
class="value-number position-absolute rounded-circle d-flex justify-content-center align-items-center text-center">01</span>
</div>
<div class="card-body value-copy">
<h4 class="card-title">Our tech</h4>
<p class="card-text paragraph">We’re using cutting edge technology to drive
accessible
urban
transportation forward. Our fully electric scooters are a joy
to ride!</p>
</div>
<div class="card-footer bg-transparent border-0"></div>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="card value text-center mb-5 border-0">
<div class="value-image position-relative mb-5">
<img src="/assets/images/our-integrity.jpg" alt="Our tech"
class="card-img-top img-round img-fluid">
<span
class="value-number position-absolute rounded-circle d-flex justify-content-center align-items-center text-center">02</span>
</div>
<div class="card-body value-copy">
<h4 class="card-title">Our integrity</h4>
<p class="card-text paragraph">We are fully committed to deliver a great yet safe,
sustainable micro-mobility experience in every city we serve.</p>
</div>
<div class="card-footer bg-transparent border-0"></div>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="card value text-center mb-5 border-0">
<div class="value-image position-relative mb-5">
<img src="/assets/images/our-community.jpg" alt="Our tech"
class="card-img-top img-round img-fluid">
<span
class="value-number position-absolute rounded-circle d-flex justify-content-center align-items-center text-center">03</span>
</div>
<div class="card-body value-copy">
<h4 class="card-title">Our community</h4>
<p class="card-text paragraph">We support every community we serve. All workers are
paid a
living wage based on their location and are Scoot employees.</p>
</div>
<div class="card-footer bg-transparent border-0"></div>
</div>
</div>
</div>
</div>
</section><!-- End Values Section -->
<section class="section jobs container-fluid mb-5 mt-4">
<ul class="jobs-container container container text-center text-md-start">
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center flex-shrink-0 p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-center align-items-start mb-1">
<h4 class="position-title">General Manager</h4>
<p class="paragraph position-location">Jakarta, Indonesia</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-evenly justify-content-md-between">
<h4 class="position-title">UI/UX Designer</h4>
<p class="paragraph position-location">Yokohama, Japan</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-evenly justify-content-md-between">
<h4 class="position-title">Blog Content Copywriter</h4>
<p class="paragraph position-location">New York, United States</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-evenly justify-content-md-between">
<h4 class="position-title">Graphic Designer</h4>
<p class="paragraph position-location">Jakarta, Indonesia</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-evenly justify-content-md-between">
<h4 class="position-title">Fleet Supervisor</h4>
<p class="paragraph position-location">New York, United States</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
<li
class="position d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center p-4 mb-3">
<div class="position-copy d-flex flex-column justify-content-evenly justify-content-md-between">
<h4 class="position-title">UX Analyst</h4>
<p class="paragraph position-location">London, United Kingdom</p>
</div>
<a href="#" class="position-btn btn-primary btn btn-lg fs-4 mt-2 flex-shrink-0">Apply</a>
</li>
</ul>
</section>
<!-- End Jobs Section -->
<section id="careersGetScoot" class="cta container-fluid position-relative">
<div
class="cta-container container-fluid d-flex flex-column flex-xl-row justify-content-evenly align-items-center justify-content-xl-around justify-content-xxl-between text-center text-md-center text-xl-start">
<h2 class="cta-heading heading-2 text-white">
Sign Up and Scoot off Today
</h2>
<div class="appstore-icons d-flex flex-row justify content-between">
<div class="store-icon px-1 px-md-2">
<img src="./assets/icons/app-store.svg" alt="App store icon">
</div>
<div class="store-icon px-1 px-md-2">
<img src="./assets/icons/google-play.svg" alt="Google store icon">
</div>
</div>
<!-- Shapes: Half Circles -->
<div class="shape shape--halfcircles position-absolute bottom-0"></div>
</div>
</section><!-- End CTA Section -->
</main>
<footer class="footer container-fluid">
<div
class="footer-container d-flex flex-column flex-md-row justify-content-evenly justify-content-md-between align-items-center mx-auto">
<div class="footer-logo text-center text-md-start mt-5 m-md-0">
<a href="./index.html">
<img src="./assets/logo-white.svg" alt="Scoot logo"
class="navbar-logo img-fluid text-center"></a>
</div>
<div class="footer__nav d-md-flex flex-md-row justify-content-md-start text-center text-md-start">
<div class="footer__nav-item p-3">
<a class="footer__nav-link" href="./about.html">About</a>
</div>
<div class="footer__nav-item p-3">
<a class="footer__nav-link" href="./locations.html">Locations</a>
</div>
<div class="footer__nav-item p-3">
<a class="footer__nav-link" href="./careers.html">Careers</a>
</div>
</div>
<div class="footer-social-navbar">
<div class="social-nav d-flex flex-row justify-content-between">
<div class="social-link p-2">
<a href="https://www.facebook.com" class="social-link--icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path id="facebook" fill="#FCB72B"
d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" />
</svg>
</a>
</div>
<div class="social-link p-2">
<a href="https://www.twitter.com">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20">
<path id="twitter" fill="#FCB72B"
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" />
</svg>
</a>
</div>
<div class="social-link p-2">
<a href="https://www.instagram.com">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path id="instagram" fill="#FCB72B"
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- footer-container -->
</footer><!-- End Footer -->
</div>
<!-- wrapper -->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>