-
Notifications
You must be signed in to change notification settings - Fork 0
/
careers.html
193 lines (178 loc) · 7.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Scoot Careers</title>
</head>
<body>
<header class="navbar">
<a href="#" class="navbar__mobile">
<img src="./assets/icons/hamburger.svg" class="hamburger" alt="Hamburger Menu Icon">
<img src="./assets/icons/close.svg" class="close" alt="Navigation Close Icon">
</a>
<a href="./index.html" class="logo">
<img src="./assets/logo.svg" alt="Scoot Logo">
</a>
<div class="navbar__nav">
<ul class="navbar__links">
<li><a href="./about.html">About</a></li>
<li><a href="./locations.html">Location</a></li>
<li><a href="./careers.html">Careers</a></li>
</ul>
<button class="btn btn-apply">Get Scootin</button>
</div>
</header>
<section class="overlay"></section>
<section class="banner banner--careers">
<h2 class="heading-2">Careers</h2>
</section>
<section class="attributes">
<div class="attribute attribute--careers">
<div class="attribute__text">
<h3 class="heading-3">Care to join our mission?</h3>
<p class="attribute__content">
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>
<form action="#">
<button type="submit" class="btn btn-apply">Say Hello!</button>
</form>
</div>
<div class="attribute__img">
<img src="./assets/images/join-us.jpg" class="round" alt="Woman using Scoot mobile app">
</div>
</div>
</section>
<section class="values">
<h2 class="heading-2">Why Join Us?</h2>
<div class="values__container">
<div class="value">
<div class="value__img">
<img src="./assets/images/our-tech.jpg" class="round" alt="Person using Scoot Mobile App">
<span class="value__number">01</span>
</div>
<div class="value__text">
<h4 class="heading-4">Our Tech</h4>
<p class="value__content">
We’re using cutting edge technology to drive accessible urban transportation forward. Our fully electric scooters are a joy to ride!
</p>
</div>
</div>
<div class="value">
<div class="value__img">
<img src="./assets/images/our-integrity.jpg" class="round" alt="Person on a Vespa vehicle">
<span class="value__number">02</span>
</div>
<div class="value__text">
<h4 class="heading-4">Our Integrity</h4>
<p class="value__content">
We are fully committed to deliver a great yet safe, sustainable micro-mobility experience in every city we serve.
</p>
</div>
</div>
<div class="value">
<div class="value__img">
<img src="./assets/images/our-community.jpg" class="round" alt="Group of people walking">
<span class="value__number">03</span>
</div>
<div class="value__text">
<h4 class="heading-4">Our Community</h4>
<p class="value__content">
We support every community we serve. All workers are paid a living wage based on their location and are Scoot employees.
</p>
</div>
</div>
</div>
</section>
<section class="jobs">
<div class="job">
<div class="job__description">
<h4 class="heading-4">General Manager</h4>
<p>Jakarta, Indonesia</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
<div class="job">
<div class="job__description">
<h4 class="heading-4">UI/UX Designer</h4>
<p>Yokohama, Japan</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
<div class="job">
<div class="job__description">
<h4 class="heading-4">Blog Content Copywriter</h4>
<p>New York, United States</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
<div class="job">
<div class="job__description">
<h4 class="heading-4">Graphic Designer</h4>
<p>New York, United States</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
<div class="job">
<div class="job__description">
<h4 class="heading-4">Fleet Supervisor</h4>
<p>Jakarta, Indonesia</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
<div class="job">
<div class="job__description">
<h4 class="heading-4">UX Analyst</h4>
<p>London, United Kingdom</p>
</div>
<form>
<button class="btn btn-apply">Apply</button>
</form>
</div>
</section>
<section class="cta">
<h2 class="heading-2">Sign up and Scoot off today</h2>
<div class="cta__buttons">
<form action="https://www.apple.com/ios/app-store/" target="_blank">
<button type="submit">
<img src="./assets/icons/app-store.svg" alt="Apple App Store">
</button>
</form>
<form action="https://play.google.com/store" target="_blank">
<button type="submit">
<img src="./assets/icons/google-play.svg" alt="Google Play Store">
</button>
</form>
</div>
</section>
<footer class="footer">
<a href="./index.html"><img src="./assets/logo-white.svg" alt="Scoot Company Logo"></a>
<ul class="footer__links">
<li><a href="./about.html">About</a></li>
<li><a href="./locations.html">Location</a></li>
<li><a href="./careers.html">Careers</a></li>
</ul>
<ul class="footer__socials">
<li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</footer>
<script src="./script.js"></script>
</body>
</html>