-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
463 lines (454 loc) · 26.4 KB
/
index.html
File metadata and controls
463 lines (454 loc) · 26.4 KB
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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/grid.css">
<link rel="stylesheet" href="style/media.css">
</head>
<body>
<header class="header">
<div class="container d-flex align-items-center justify-content-center">
<a href="" class="header__logo">
LOGO
</a>
<ul class="header__menu d-flex align-items-center ml-auto mr-auto">
<li>
<a href="#home" class="header__link active">Home</a>
</li>
<li>
<a href="#find" class="header__link">Find Job</a>
</li>
<li>
<a href="#about" class="header__link">About Us</a>
</li>
<li>
<a href="tel:998946255699" class="header__link">Contact</a>
</li>
</ul>
<div class="header__auth">
<button class="btn nobg">Log in</button>
<button class="btn ml-10">Create Account</button>
</div>
<button class="header__toggle" onclick="document.body.classList.toggle('open')">
<span></span>
</button>
</div>
</header>
<div class="mobile__nav">
<div class="header__auth">
<button class="btn nobg">Log in</button>
<button class="btn ml-10">Create Account</button>
</div>
<ul class="header__menu">
<li>
<a href="#home" class="header__link active">Home</a>
</li>
<li>
<a href="#find" class="header__link">Find Job</a>
</li>
<li>
<a href="#about" class="header__link">About Us</a>
</li>
<li>
<a href="tel:998946255699" class="header__link">Contact</a>
</li>
</ul>
</div>
<div class="black" id="home">
<div class="welcome center">
<div class="d-flex justify-content-center">
<div class="slogan dark">
<span></span>
Please Meet Up With GetJob
</div>
</div>
<div class="title big">
Discover Your Favorite <span>Job with Getjob</span>
</div>
<div class="text">
Thousands of jobs here. Now you can find your dream job <br> from home, anywhere and anytime with
getjob.
</div>
</div>
</div>
<div class="search" id="find">
<div class="container">
<div class="search__img"></div>
<div class="d-flex justify-content-center">
<div class="search__box d-flex align-items-center">
<div class="search__item">
<span></span>
<input type="text" placeholder="Job Title or Keyword">
</div>
<div class="search__item">
<span></span>
<select name="" id="">
<option value="" selected disabled>Location</option>
<option value="">Tashkent</option>
<option value="">Samarkand</option>
</select>
</div>
<div class="search__item">
<span></span>
<select name="" id="">
<option value="" selected disabled>Type of Work</option>
<option value="">Fulltime</option>
<option value="">Part-time</option>
</select>
</div>
<button class="btn">Search Job</button>
</div>
</div>
</div>
</div>
<div class="category">
<div class="container">
<div class="d-flex justify-content-center">
<div class="slogan">
<span></span>
Selected Job by Category
</div>
</div>
<div class="title center little">
Find Your Jobs By <span>Category</span>
</div>
<div class="row">
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-4 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-6 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
<div class="col-3 col-md-6 col-sm-6 col-xs-12">
<div class="category__box">
<div class="category__icon"></div>
<div class="category__title">Marketing & Communication</div>
<div class="category__text">1069 Jobs Available</div>
</div>
</div>
</div>
</div>
</div>
<div class="gradient">
<div class="information" id="about">
<div class="container">
<div class="row">
<div class="col-6 col-md-12">
<div class="information__img" style="background-image: url('./img/pict1.jpg')"></div>
</div>
<div class="col-6 col-md-12 d-flex align-items-center">
<div class="information__box">
<div class="d-flex">
<div class="slogan">
<span></span>
It's More Than Job Values
</div>
</div>
<div class="title">
Find Jobs Around the World for Your <span>Job Vacancies</span>
</div>
<div class="information__text">
Search and connect with job vacation around the world. This gives you the opportunity to
find your dream job
</div>
<div class="d-flex justify-content-center-md">
<button class="btn grey mr-12">
Log in
</button>
<button class="btn">
Create Account
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="recom">
<div class="container">
<div class="d-flex justify-content-center">
<div class="slogan">
<span></span> Our Popular Job
</div>
</div>
<div class="title little center">
<span>Recommended Job</span> For You
</div>
<div class="row">
<div class="col-3">
<div class="recom__box">
<div class="d-flex align-items-center justify-content-between">
<div class="recom__rating d-flex align-items-center">
<span></span>
4.5
</div>
<div class="recom__time">
Full Time
</div>
</div>
<div class="recom__img"></div>
<a href="#" class="recom__title">Product Manager</a>
<div class="recom__loc d-flex align-items-center justify-content-center">
<span></span>
Slemen, Yogyakarta, Indonesia
</div>
<div class="recom__bottom d-flex align-items-center justify-content-between">
<div class="recom__salary">
$2000
</div>
<a href="#" class="recom__apply">Apply Now</a>
</div>
</div>
</div>
<div class="col-3">
<div class="recom__box">
<div class="d-flex align-items-center justify-content-between">
<div class="recom__rating d-flex align-items-center">
<span></span>
4.5
</div>
<div class="recom__time">
Full Time
</div>
</div>
<div class="recom__img"></div>
<a href="#" class="recom__title">Product Manager</a>
<div class="recom__loc d-flex align-items-center justify-content-center">
<span></span>
Slemen, Yogyakarta, Indonesia
</div>
<div class="recom__bottom d-flex align-items-center justify-content-between">
<div class="recom__salary">
$2000
</div>
<a href="#" class="recom__apply">Apply Now</a>
</div>
</div>
</div>
<div class="col-3">
<div class="recom__box">
<div class="d-flex align-items-center justify-content-between">
<div class="recom__rating d-flex align-items-center">
<span></span>
4.5
</div>
<div class="recom__time">
Full Time
</div>
</div>
<div class="recom__img"></div>
<a href="#" class="recom__title">Product Manager</a>
<div class="recom__loc d-flex align-items-center justify-content-center">
<span></span>
Slemen, Yogyakarta, Indonesia
</div>
<div class="recom__bottom d-flex align-items-center justify-content-between">
<div class="recom__salary">
$2000
</div>
<a href="#" class="recom__apply">Apply Now</a>
</div>
</div>
</div>
<div class="col-3">
<div class="recom__box">
<div class="d-flex align-items-center justify-content-between">
<div class="recom__rating d-flex align-items-center">
<span></span>
4.5
</div>
<div class="recom__time">
Full Time
</div>
</div>
<div class="recom__img"></div>
<a href="#" class="recom__title">Product Manager</a>
<div class="recom__loc d-flex align-items-center justify-content-center">
<span></span>
Slemen, Yogyakarta, Indonesia
</div>
<div class="recom__bottom d-flex align-items-center justify-content-between">
<div class="recom__salary">
$2000
</div>
<a href="#" class="recom__apply">Apply Now</a>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="#" class="recom__more">View All FullTime Job</a>
</div>
</div>
</div>
</div>
<div class="information">
<div class="container">
<div class="row">
<div class="col-6 d-flex align-items-center col-md-12 order-2-md">
<div class="information__box left">
<div class="d-flex">
<div class="slogan">
<span></span> Cloud Computing Based
</div>
</div>
<div class="title">
<span>Upload your CV,</span> Let the company Found you
</div>
<div class="information__text">
GetJob wants to help job seekers find jobs that match your interests and passions so you can
land your dream job.
</div>
<div class="d-flex justify-content-center-md">
<button class="btn grey mr-12">Log in</button>
<button class="btn d-flex align-items-center"><span class="greybox"></span> Upload
CV</button>
</div>
</div>
</div>
<div class="col-6 col-md-12 order-1-md">
<div class="information__img" style="background-image: url('./img/pict1.jpg')"></div>
</div>
</div>
</div>
</div>
<div class="about">
<div class="container">
<div class="d-flex justify-content-center">
<div class="slogan">
<span></span>
What Our Member Say
</div>
</div>
<div class="title little center">
User Rating<span>About Us</span>
</div>
<div class="row">
<div class="col-4">
<div class="about__box">
<div class="about__img"></div>
<div class="about__name">Lisa Rose</div>
<div class="about__job">Senior UX Designer</div>
<div class="about__quote">"With the insights we can gather using getjob we can reduce our
dependence on external recruitment agencies.</div>
<a href="#" class="about__more">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="sub" id="contact">
<div class="sub__container">
<div class="d-flex justify-content-center">
<div class="slogan dark">
<span></span>
Just Say Hi With Us
</div>
</div>
<div class="title little">
Subscribe For <span>Best Newsletter</span>
</div>
<div class="text">Be a part of us and get the latest information</div>
<form action="#" class="sub__form">
<div class="sub__icon"></div>
<input type="email" class="sub__input" placeholder="examplemail@gmail.com">
<button class="btn">Subscibe</button>
</form>
</div>
</div>
<footer class="footer">
<div class="container d-flex align-items-center justify-content-between">
<a href="#" class="footer__logo">LOGO</a>
<ul class="footer__menu d-flex align-items-center">
<li><a href="#home">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#find">Services</a></li>
<li><a href="#contact">Contact us</a></li>
<li><a href="#">Terms of Services</a></li>
</ul>
<ul class="footer__social d-flex align-items-center">
<li>
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 7C11.0111 7 10.0444 7.29324 9.22215 7.84265C8.3999 8.39206 7.75904 9.17295 7.3806 10.0866C7.00216 11.0002 6.90315 12.0055 7.09607 12.9755C7.289 13.9454 7.7652 14.8363 8.46447 15.5355C9.16373 16.2348 10.0546 16.711 11.0245 16.9039C11.9945 17.0969 12.9998 16.9978 13.9134 16.6194C14.827 16.241 15.6079 15.6001 16.1573 14.7779C16.7068 13.9556 17 12.9889 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM12 15C11.4067 15 10.8266 14.8241 10.3333 14.4944C9.83994 14.1648 9.45542 13.6962 9.22836 13.1481C9.0013 12.5999 8.94189 11.9967 9.05764 11.4147C9.1734 10.8328 9.45912 10.2982 9.87868 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.1481 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.8241 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6ZM21.94 8.24C21.9234 7.38542 21.7611 6.53995 21.46 5.74C21.1808 5.01207 20.7516 4.35099 20.2003 3.7997C19.649 3.2484 18.9879 2.81922 18.26 2.54C17.4601 2.2389 16.6146 2.07657 15.76 2.06C14.79 2 14.47 2 12 2C9.53 2 9.21 2 8.24 2.06C7.38542 2.07657 6.53995 2.2389 5.74 2.54C5.01207 2.81922 4.35099 3.2484 3.7997 3.7997C3.2484 4.35099 2.81922 5.01207 2.54 5.74C2.2389 6.53995 2.07657 7.38542 2.06 8.24C2 9.22 2 9.54 2 12C2 14.46 2 14.78 2.06 15.76C2.07657 16.6146 2.2389 17.4601 2.54 18.26C2.81922 18.9879 3.2484 19.649 3.7997 20.2003C4.35099 20.7516 5.01207 21.1808 5.74 21.46C6.53995 21.7611 7.38542 21.9234 8.24 21.94C9.24 21.94 9.53 22 12 22C14.47 22 14.79 22 15.76 21.94C16.6146 21.9234 17.4601 21.7611 18.26 21.46C18.9879 21.1808 19.649 20.7516 20.2003 20.2003C20.7516 19.649 21.1808 18.9879 21.46 18.26C21.7611 17.4601 21.9234 16.6146 21.94 15.76C21.94 14.76 22 14.46 22 12C22 9.54 22 9.22 21.94 8.24ZM19.94 15.67C19.9225 16.3046 19.8043 16.9324 19.59 17.53C19.4128 18.0023 19.1327 18.4293 18.77 18.78C18.4214 19.1428 17.9936 19.4201 17.52 19.59C16.921 19.8131 16.289 19.9348 15.65 19.95C14.71 19.95 14.42 20 11.99 20C9.56 20 9.28 20 8.34 20C7.70202 19.9835 7.07075 19.8654 6.47 19.65C5.99766 19.4728 5.57067 19.1927 5.22 18.83C4.85715 18.4814 4.57992 18.0536 4.41 17.58C4.1878 16.9842 4.06615 16.3557 4.05 15.72C4.05 14.72 4.05 14.47 4.05 12.05C4.05 9.63 4.05 9.34 4.05 8.38C4.06724 7.74121 4.18884 7.10954 4.41 6.51C4.58256 6.04063 4.85953 5.61662 5.22 5.27C5.56858 4.90715 5.99641 4.62992 6.47 4.46C7.06899 4.2369 7.70099 4.11523 8.34 4.1C9.28 4 9.57 4 12 4C14.43 4 14.72 4 15.66 4C16.3021 4.01633 16.9373 4.13794 17.54 4.36C18.0094 4.53256 18.4334 4.80953 18.78 5.17C19.1428 5.51858 19.4201 5.94641 19.59 6.42C19.8348 7.02856 19.9735 7.67458 20 8.33C20 9.33 20.05 9.58 20.05 12C20.05 14.42 20 14.71 20 15.67H19.94Z"
fill="black" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.9 2H3.1C2.80826 2 2.52847 2.11589 2.32218 2.32218C2.11589 2.52847 2 2.80826 2 3.1V20.9C2 21.0445 2.02845 21.1875 2.08373 21.321C2.13901 21.4544 2.22004 21.5757 2.32218 21.6778C2.42433 21.78 2.54559 21.861 2.67905 21.9163C2.81251 21.9715 2.95555 22 3.1 22H12.68V14.25H10.08V11.25H12.68V9C12.6261 8.47176 12.6885 7.93813 12.8627 7.43654C13.0369 6.93495 13.3188 6.47755 13.6885 6.09641C14.0582 5.71528 14.5068 5.41964 15.0028 5.23024C15.4989 5.04083 16.0304 4.96225 16.56 5C17.3383 4.99521 18.1163 5.03528 18.89 5.12V7.82H17.3C16.04 7.82 15.8 8.42 15.8 9.29V11.22H18.8L18.41 14.22H15.8V22H20.9C21.0445 22 21.1875 21.9715 21.321 21.9163C21.4544 21.861 21.5757 21.78 21.6778 21.6778C21.78 21.5757 21.861 21.4544 21.9163 21.321C21.9715 21.1875 22 21.0445 22 20.9V3.1C22 2.95555 21.9715 2.81251 21.9163 2.67905C21.861 2.54559 21.78 2.42433 21.6778 2.32218C21.5757 2.22004 21.4544 2.13901 21.321 2.08373C21.1875 2.02845 21.0445 2 20.9 2Z"
fill="black" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.4701 2.00014H3.53006C3.33964 1.9975 3.15056 2.03239 2.97362 2.10282C2.79669 2.17326 2.63536 2.27786 2.49886 2.41065C2.36235 2.54344 2.25334 2.70182 2.17805 2.87675C2.10276 3.05167 2.06267 3.23972 2.06006 3.43014V20.5701C2.06267 20.7606 2.10276 20.9486 2.17805 21.1235C2.25334 21.2985 2.36235 21.4568 2.49886 21.5896C2.63536 21.7224 2.79669 21.827 2.97362 21.8975C3.15056 21.9679 3.33964 22.0028 3.53006 22.0001H20.4701C20.6605 22.0028 20.8496 21.9679 21.0265 21.8975C21.2034 21.827 21.3648 21.7224 21.5013 21.5896C21.6378 21.4568 21.7468 21.2985 21.8221 21.1235C21.8974 20.9486 21.9375 20.7606 21.9401 20.5701V3.43014C21.9375 3.23972 21.8974 3.05167 21.8221 2.87675C21.7468 2.70182 21.6378 2.54344 21.5013 2.41065C21.3648 2.27786 21.2034 2.17326 21.0265 2.10282C20.8496 2.03239 20.6605 1.9975 20.4701 2.00014ZM8.09006 18.7401H5.09006V9.74014H8.09006V18.7401ZM6.59006 8.48014C6.17632 8.48014 5.77953 8.31578 5.48697 8.02323C5.19442 7.73067 5.03006 7.33388 5.03006 6.92014C5.03006 6.5064 5.19442 6.10961 5.48697 5.81705C5.77953 5.5245 6.17632 5.36014 6.59006 5.36014C6.80975 5.33522 7.03224 5.35699 7.24293 5.42402C7.45363 5.49105 7.6478 5.60183 7.81272 5.7491C7.97763 5.89637 8.10958 6.07682 8.19993 6.27862C8.29028 6.48043 8.33698 6.69904 8.33698 6.92014C8.33698 7.14124 8.29028 7.35985 8.19993 7.56166C8.10958 7.76346 7.97763 7.94391 7.81272 8.09118C7.6478 8.23845 7.45363 8.34923 7.24293 8.41626C7.03224 8.48329 6.80975 8.50505 6.59006 8.48014ZM18.9101 18.7401H15.9101V13.9101C15.9101 12.7001 15.4801 11.9101 14.3901 11.9101C14.0527 11.9126 13.7242 12.0184 13.4489 12.2133C13.1735 12.4082 12.9645 12.6828 12.8501 13.0001C12.7718 13.2352 12.7379 13.4827 12.7501 13.7301V18.7301H9.75006C9.75006 18.7301 9.75006 10.5501 9.75006 9.73014H12.7501V11.0001C13.0226 10.5272 13.419 10.1377 13.8965 9.87334C14.374 9.60902 14.9146 9.47999 15.4601 9.50014C17.4601 9.50014 18.9101 10.7901 18.9101 13.5601V18.7401Z"
fill="black" />
</svg>
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>