-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcompany_profile.html
440 lines (425 loc) · 27.3 KB
/
company_profile.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
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
<!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="shortcut icon"
type="image/png"
href="images/favicon-32x32.png"
/> -->
<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=Alata&family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="css/output.css" />
<script src="js/script.js" defer></script>
<title>GetIntern</title>
</head>
<body>
<!-- nav -->
<div class="sticky top-0 bg-white z-20 border-b">
<!-- Nav Container -->
<nav class="container mx-auto p-4 z-10">
<!-- Flex Container For All Items -->
<div class="flex items-center justify-between">
<!-- Flex Container For Logo/Menu -->
<div class="flex items-center space-x-20">
<!-- Logo -->
<h1 class="font-bold text-2xl text-blue">
<a href="">GI</a>
</h1>
<!-- Left Menu -->
<div class="hidden text-sm space-x-8 font-bold lg:flex">
<a href="#" class="text-mediumGray hover:text-darkGray">Jobs</a>
<a href="#" class="text-mediumGray hover:text-darkGray">Interships</a>
<a href="#" class="text-mediumGray hover:text-darkGray">About Us</a>
</div>
</div>
<!-- Right Buttons Menu -->
<div class="hidden items-center space-x-6 font-medium text-grayishViolet lg:flex">
<div id="userN" class="relative text-darkGray">
<div class="flex text-xs select-none justify-center items-center cursor-pointer">
Hi,Slimane!
<svg xmlns="http://www.w3.org/2000/svg" class="duration-200" id="down" width="18" height="18"
viewBox="0 0 24 24" fill="none">
<path d="M10.869 16.6308C10.811 16.5743 10.563 16.3609 10.359 16.1622C9.076
14.9971 6.976 11.9576 6.335 10.3668C6.232 10.1252 6.014 9.51437
6 9.18802C6 8.8753 6.072 8.5772 6.218 8.29274C6.422 7.93814
6.743 7.65368 7.122 7.49781C7.385 7.39747 8.172 7.2416 8.186 7.2416C9.047
7.08573 10.446 7 11.992 7C13.465 7 14.807 7.08573 15.681 7.21335C15.695 7.22796
16.673 7.38383 17.008 7.55431C17.62 7.86702 18 8.47784 18 9.13151V9.18802C17.985
9.61374 17.605 10.509 17.591 10.509C16.949 12.0141 14.952 14.9834 13.625 16.1768C13.625 16.1768 13.284 16.5129 13.071 16.659C12.765 16.887 12.386 17 12.007
17C11.584 17 11.19 16.8724 10.869 16.6308Z" fill="darkGray" />
</svg>
</div>
<div id="settings"
class="absolute text-xs flex flex-col -right-4 top-8 rounded-md items-center justify-center space-y-2 py-4 bg-white z-40 shadow-lg w-36 hidden">
<a href="" class="duration-200 border-b pb-2 hover:text-lightGray">Settings</a>
<a href="" class="duration-200 hover:text-gray-400">Logout</a>
<div></div>
</div>
</div>
<div>
<a href=""
class="flex justify-center text-xs items-center duration-200 text-blue hover:underline underline-offset-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
<path d="M18 3V5H17V11L19 14V16H13V23H11V16H5V14L7 11V5H6V3H18Z" fill="rgba(0,119,181,1)"></path>
</svg>
Post Listing
</a>
</div>
</div>
<!-- Hamburger Button -->
<div class="flex lg:hidden space-x-10 items-center justify-center">
<button id="menu-btn" class="hamburger lg:hidden focus:outline-none" type="button">
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="menu" class="absolute hidden z-40 p-6 rounded-lg bg-darkGray left-6 right-6 top-20 z-100">
<div
class="relative pt-8 flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm">
<a href="" class="absolute top-0 left-0 text-accentBlue text-lg">Hi,Slimane!</a>
<a href="#" class="w-full text-center">Jobs</a>
<a href="#" class="w-full text-center">Interships</a>
<a href="#" class="w-full text-center pb-6 border-b">About Us</a>
<a href="#" class="w-full py-3 text-center rounded-full bg-red">Login out</a>
</div>
</div>
</nav>
</div>
<section class="bg-lightbg rounded-md pt-5 pb-5">
<div class="container bg-white mx-auto max-w-6xl pb-20">
<div class="flex flex-col space-y-16">
<div class="relative w-full rounded-t-md h-60" style="
background-image: url(assets/images/cover.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
">
<div class="absolute -bottom-16 left-10 flex justify-center items-center bg-white w-32 h-32">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="35" height="35"><path d="M16.9197 4.5C15.0689 4.5 13.622 5.89404 12.3123 7.6649C10.5124 5.37323 9.00722 4.5 7.20593 4.5C3.53352 4.5 0.719727 9.27931 0.719727 14.3379C0.719727 17.5034 2.25116 19.5 4.81628 19.5C6.66249 19.5 7.99028 18.6296 10.3508 14.5034C10.3508 14.5034 11.3347 12.7658 12.0116 11.5689C12.2488 11.9518 12.4981 12.3639 12.7611 12.8069L13.868 14.669C16.0242 18.2772 17.2256 19.5 19.4025 19.5C21.9014 19.5 23.2921 17.4761 23.2921 14.2448C23.2921 8.94828 20.4149 4.5 16.9197 4.5ZM8.55076 13.3862C6.63697 16.3862 5.9749 17.0586 4.90938 17.0586C3.81283 17.0586 3.16111 16.0959 3.16111 14.3793C3.16111 10.7069 4.99214 6.95172 7.1749 6.95172C8.35692 6.95172 9.34471 7.63438 10.8577 9.80042C9.42105 12.0041 8.55076 13.3862 8.55076 13.3862ZM15.7737 13.0085L14.4502 10.8013C14.0921 10.2188 13.7489 9.6836 13.4177 9.19286C14.6105 7.35183 15.5944 6.43448 16.7646 6.43448C19.1956 6.43448 21.1404 10.0138 21.1404 14.4103C21.1404 16.0862 20.5915 17.0586 19.4542 17.0586C18.3641 17.0586 17.8434 16.3387 15.7737 13.0085Z" fill="#000"></path></svg>
</div>
</div>
<div class="flex flex-col justify-center space-y-5 ">
<h2 class="pl-10 max-w-md font-bold text-2xl text-darkGray">Meta</h2>
<p class="pl-10 max-w-md ">
Democratizing the job market for individuals and organizations
</p>
<div class="pl-10 text-sm max-w-md flex items-center space-x-2 text-mediumGray font-medium">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.5 10.3178C3.5 5.71789 7.34388 2 11.9934 2C16.6561 2 20.5 5.71789 20.5 10.3178C20.5 12.6357 19.657 14.7876 18.2695 16.6116C16.7388 18.6235 14.8522 20.3765 12.7285 21.7524C12.2425 22.0704 11.8039 22.0944 11.2704 21.7524C9.13474 20.3765 7.24809 18.6235 5.7305 16.6116C4.34198 14.7876 3.5 12.6357 3.5 10.3178ZM9.19423 10.5768C9.19423 12.1177 10.4517 13.3297 11.9934 13.3297C13.5362 13.3297 14.8058 12.1177 14.8058 10.5768C14.8058 9.0478 13.5362 7.77683 11.9934 7.77683C10.4517 7.77683 9.19423 9.0478 9.19423 10.5768Z"
fill="darkGray" />
</svg>
<div>Bordj Bou Arreridj</div>
<span class="">.</span>
<div>100 follwers</div>
</div>
<div class="pl-10 max-w-md flex space-x-3 py-3 pr-6">
<button
class="bg-blue text-white w-1/2 py-2 rounded-lg border-2 border-blue duration-150 hover:bg-opacity-75">
<a href="" class="flex items-center justify-center space-x-2 capitalize">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.3302 2.00009H16.6602C20.0602 2.00009 22.0002 3.92009 22.0002 7.33009V16.6701C22.0002 20.0601 20.0702 22.0001 16.6702 22.0001H7.3302C3.9202 22.0001 2.0002 20.0601 2.0002 16.6701V7.33009C2.0002 3.92009 3.9202 2.00009 7.3302 2.00009ZM12.8202 12.8301H15.6602C16.1202 12.8201 16.4902 12.4501 16.4902 11.9901C16.4902 11.5301 16.1202 11.1601 15.6602 11.1601H12.8202V8.34009C12.8202 7.88009 12.4502 7.51009 11.9902 7.51009C11.5302 7.51009 11.1602 7.88009 11.1602 8.34009V11.1601H8.3302C8.1102 11.1601 7.9002 11.2501 7.7402 11.4001C7.5902 11.5601 7.5002 11.7691 7.5002 11.9901C7.5002 12.4501 7.8702 12.8201 8.3302 12.8301H11.1602V15.6601C11.1602 16.1201 11.5302 16.4901 11.9902 16.4901C12.4502 16.4901 12.8202 16.1201 12.8202 15.6601V12.8301Z"
fill="white" />
</svg>
<span> Follow </span>
</a>
</button>
<button
class="w-1/2 border text-mediumGray bg-white border-mediumGray rounded-lg duration-100 hover:bg-lightbg">
<a href="" class="capitalize">contact</a>
</button>
</div>
</div>
<!-- tabs -->
<div id="tabs" class="flex items-center justify-center space-x-10 font-bold text-mediumGray border-y-2 pt-2">
<a href="" data-target="panel-1"
class="tab capitalize text-green py-3 px-4 h-14 border-b-4 border-green">home</a>
<a href="" data-target="panel-2" class="tab capitalize py-3 px-4 h-14 hover:text-green border-green">about</a>
<a href="" data-target="panel-3" class="tab capitalize py-3 px-4 h-14 hover:text-green border-green">Jobs</a>
</div>
<!-- panels -->
<div id="panels" class="flex justify-center items-center px-10 ">
<!-- panel 1 -->
<div class="max-w-3xl panel panel-1 flex flex-col space-y-5">
<h5 class="text-left">about</h5>
<div class="text-sm text-gray-600 font-sans leading-8">We’re a diverse collective of thinkers and doers,
continually reimagining what’s possible to help us all do what we love in new ways. And the same
innovation that goes into our products also applies to our practices — strengthening our commitment to
leave the world better than we found it. This is where your work can make a difference in people’s lives.
Including your own.
Apple is an equal opportunity employer that is committed to inclusion and diversity. Visit
apple.com/careers to learn more.</div>
</div>
<!-- panel 2 -->
<div class="panel panel-2 max-w-3xl hidden flex flex-col space-y-5">
<h5 class="text-left">overview</h5>
<!-- -->
<div class="text-sm text-gray-600 font-sans leading-8">
We’re a diverse collective of thinkers and doers, continually reimagining what’s possible to help us all
do what we love in new ways. And the same innovation that goes into our products also applies to our
practices — strengthening our commitment to leave the world better than we found it. This is where your
work can make a difference in people’s lives. Including your own.
Apple is an equal opportunity employer that is committed to inclusion and diversity. Visit
apple.com/careers to learn more.
</div>
<!-- -->
<div>
<div class="pb-1 text-darkGray font-medium ">website</div>
<a href="http://www.apple.com/careers"
class="text-blue text-sm font-medium">http://www.apple.com/careers</a>
</div>
<!-- -->
<div>
<div class="pb-1 text-darkGray font-medium ">Industry</div>
<p class="text-sm ">
Computers and Electronics Manufacturing
</p>
</div>
<!-- -->
<div>
<div class="pb-1 text-darkGray font-medium text-lg ">Company size</div>
<p>
10,001+ employees
</p>
</div>
</div>
<!-- panel 3 -->
<div class="panel flex justify-center items-center hidden panel-3">
<div class="mt-10 grid justify-center items-center grid-col-1 md:grid-cols-2 lg:grid-cols-3 gap-5 font-medium">
<div class="relative border border-gray-300 flex flex-col max-w-xs
space-y-3 p-5 duration-200 hover:border-blue rounded-xl hover:shadow-md bg-white">
<div class="absolute text-mediumGray right-5 top-5">
5 juily
</div>
<div>
<!-- logo -->
<img src="assets/images/meta.svg" class="bg-zinc-100 p-2 rounded-full mb-2" alt="">
<!-- company name -->
</div>
<!-- -->
<div>
<!-- Job title -->
<div class="capitalize font-bold text-md mb-4">
Marketing Coordinator
</div>
<span class="bg-sky-100 px-3 py-1 text-xs text-blue rounded-xl">Full-time</span>
<span class="bg-pink-100 px-3 py-1 text-xs text-pink-900 rounded-xl">Technology</span>
</div>
<!-- -->
<div class="flex items-center space-x-2 text-mediumGray">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.7689 8.3818H22C22 4.98459 19.9644 3 16.5156 3H7.48444C4.03556 3 2 4.98459 2 8.33847V15.6615C2 19.0154 4.03556 21 7.48444 21H16.5156C19.9644 21 22 19.0154 22 15.6615V15.3495H17.7689C15.8052 15.3495 14.2133 13.7975 14.2133 11.883C14.2133 9.96849 15.8052 8.41647 17.7689 8.41647V8.3818ZM17.7689 9.87241H21.2533C21.6657 9.87241 22 10.1983 22 10.6004V13.131C21.9952 13.5311 21.6637 13.8543 21.2533 13.8589H17.8489C16.8548 13.872 15.9855 13.2084 15.76 12.2643C15.6471 11.6783 15.8056 11.0736 16.1931 10.6122C16.5805 10.1509 17.1573 9.88007 17.7689 9.87241ZM17.92 12.533H18.2489C18.6711 12.533 19.0133 12.1993 19.0133 11.7877C19.0133 11.3761 18.6711 11.0424 18.2489 11.0424H17.92C17.7181 11.0401 17.5236 11.1166 17.38 11.255C17.2364 11.3934 17.1555 11.5821 17.1556 11.779C17.1555 12.1921 17.4964 12.5282 17.92 12.533ZM6.73778 8.3818H12.3822C12.8044 8.3818 13.1467 8.04812 13.1467 7.63649C13.1467 7.22487 12.8044 6.89119 12.3822 6.89119H6.73778C6.31903 6.89116 5.9782 7.2196 5.97333 7.62783C5.97331 8.04087 6.31415 8.37705 6.73778 8.3818Z"
fill="#0077B5" />
</svg>
<div class="text-sm">
$80k - $150K
</div>
</div>
<div>
<div class="capitalize text-mediumGray text-sm space-x-1 mb-3 flex items-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.5 10.3178C3.5 5.71789 7.34388 2 11.9934 2C16.6561 2 20.5 5.71789 20.5 10.3178C20.5 12.6357 19.657 14.7876 18.2695 16.6116C16.7388 18.6235 14.8522 20.3765 12.7285 21.7524C12.2425 22.0704 11.8039 22.0944 11.2704 21.7524C9.13474 20.3765 7.24809 18.6235 5.7305 16.6116C4.34198 14.7876 3.5 12.6357 3.5 10.3178ZM9.19423 10.5768C9.19423 12.1177 10.4517 13.3297 11.9934 13.3297C13.5362 13.3297 14.8058 12.1177 14.8058 10.5768C14.8058 9.0478 13.5362 7.77683 11.9934 7.77683C10.4517 7.77683 9.19423 9.0478 9.19423 10.5768Z"
fill="darkGray" />
</svg>
<div>
Batna
</div>
</div>
<p class="text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem in.</p>
</div>
<div class="flex space-x-3 py-4">
<button class="w-1/2 border-2 border-blue text-blue rounded-lg
duration-100 hover:bg-blue hover:bg-opacity-10 hover:border-4">
<a href="" class="capitalize">contact</a>
</button>
<button class="bg-blue text-white w-1/2 py-2 rounded-lg border-2 border-blue
duration-150 hover:bg-opacity-75">
<a href="" class="capitalize">apply</a>
</button>
</div>
</div>
<!-- -->
<div class="relative border border-gray-300 flex flex-col max-w-xs
space-y-3 p-5 duration-200 hover:border-blue rounded-xl hover:shadow-md bg-white">
<div class="absolute text-mediumGray right-5 top-5">
5 juily
</div>
<div>
<!-- logo -->
<img src="assets/images/meta.svg" class="bg-zinc-100 p-2 rounded-full mb-2" alt="">
<!-- company name -->
</div>
<!-- -->
<div>
<!-- Job title -->
<div class="capitalize font-bold text-md mb-4">
Social Media Assistant
</div>
<span class="bg-sky-100 px-3 py-1 text-xs text-blue rounded-xl">Full-time</span>
<span class="bg-pink-100 px-3 py-1 text-xs text-pink-900 rounded-xl">Technology</span>
</div>
<!-- -->
<div class="flex items-center space-x-2 text-mediumGray">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.7689 8.3818H22C22 4.98459 19.9644 3 16.5156 3H7.48444C4.03556 3 2 4.98459 2 8.33847V15.6615C2 19.0154 4.03556 21 7.48444 21H16.5156C19.9644 21 22 19.0154 22 15.6615V15.3495H17.7689C15.8052 15.3495 14.2133 13.7975 14.2133 11.883C14.2133 9.96849 15.8052 8.41647 17.7689 8.41647V8.3818ZM17.7689 9.87241H21.2533C21.6657 9.87241 22 10.1983 22 10.6004V13.131C21.9952 13.5311 21.6637 13.8543 21.2533 13.8589H17.8489C16.8548 13.872 15.9855 13.2084 15.76 12.2643C15.6471 11.6783 15.8056 11.0736 16.1931 10.6122C16.5805 10.1509 17.1573 9.88007 17.7689 9.87241ZM17.92 12.533H18.2489C18.6711 12.533 19.0133 12.1993 19.0133 11.7877C19.0133 11.3761 18.6711 11.0424 18.2489 11.0424H17.92C17.7181 11.0401 17.5236 11.1166 17.38 11.255C17.2364 11.3934 17.1555 11.5821 17.1556 11.779C17.1555 12.1921 17.4964 12.5282 17.92 12.533ZM6.73778 8.3818H12.3822C12.8044 8.3818 13.1467 8.04812 13.1467 7.63649C13.1467 7.22487 12.8044 6.89119 12.3822 6.89119H6.73778C6.31903 6.89116 5.9782 7.2196 5.97333 7.62783C5.97331 8.04087 6.31415 8.37705 6.73778 8.3818Z"
fill="#0077B5" />
</svg>
<div class="text-sm">
$8k - $15K
</div>
</div>
<div>
<div class="capitalize text-mediumGray text-sm space-x-1 mb-3 flex items-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.5 10.3178C3.5 5.71789 7.34388 2 11.9934 2C16.6561 2 20.5 5.71789 20.5 10.3178C20.5 12.6357 19.657 14.7876 18.2695 16.6116C16.7388 18.6235 14.8522 20.3765 12.7285 21.7524C12.2425 22.0704 11.8039 22.0944 11.2704 21.7524C9.13474 20.3765 7.24809 18.6235 5.7305 16.6116C4.34198 14.7876 3.5 12.6357 3.5 10.3178ZM9.19423 10.5768C9.19423 12.1177 10.4517 13.3297 11.9934 13.3297C13.5362 13.3297 14.8058 12.1177 14.8058 10.5768C14.8058 9.0478 13.5362 7.77683 11.9934 7.77683C10.4517 7.77683 9.19423 9.0478 9.19423 10.5768Z"
fill="darkGray" />
</svg>
<div>
Setif
</div>
</div>
<p class="text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem in.</p>
</div>
<div class="flex space-x-3 py-4">
<button class="w-1/2 border-2 border-blue text-blue rounded-lg
duration-100 hover:bg-blue hover:bg-opacity-10 hover:border-4">
<a href="" class="capitalize">contact</a>
</button>
<button class="bg-blue text-white w-1/2 py-2 rounded-lg border-2 border-blue
duration-150 hover:bg-opacity-75">
<a href="" class="capitalize">apply</a>
</button>
</div>
</div>
<div class="relative border border-gray-300 flex flex-col max-w-xs
space-y-3 p-5 duration-200 hover:border-blue rounded-xl hover:shadow-md bg-white">
<div class="absolute text-mediumGray right-5 top-5">
5 juily
</div>
<div>
<!-- logo -->
<img src="assets/images/meta.svg" class="bg-zinc-100 p-2 rounded-full mb-2" alt="">
<!-- company name -->
</div>
<!-- -->
<div>
<!-- Job title -->
<div class="capitalize font-bold text-md mb-4">
Marketing Coordinator
</div>
<span class="bg-sky-100 px-3 py-1 text-xs text-blue rounded-xl">Full-time</span>
<span class="bg-pink-100 px-3 py-1 text-xs text-pink-900 rounded-xl">Technology</span>
</div>
<!-- -->
<div class="flex items-center space-x-2 text-mediumGray">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.7689 8.3818H22C22 4.98459 19.9644 3 16.5156 3H7.48444C4.03556 3 2 4.98459 2 8.33847V15.6615C2 19.0154 4.03556 21 7.48444 21H16.5156C19.9644 21 22 19.0154 22 15.6615V15.3495H17.7689C15.8052 15.3495 14.2133 13.7975 14.2133 11.883C14.2133 9.96849 15.8052 8.41647 17.7689 8.41647V8.3818ZM17.7689 9.87241H21.2533C21.6657 9.87241 22 10.1983 22 10.6004V13.131C21.9952 13.5311 21.6637 13.8543 21.2533 13.8589H17.8489C16.8548 13.872 15.9855 13.2084 15.76 12.2643C15.6471 11.6783 15.8056 11.0736 16.1931 10.6122C16.5805 10.1509 17.1573 9.88007 17.7689 9.87241ZM17.92 12.533H18.2489C18.6711 12.533 19.0133 12.1993 19.0133 11.7877C19.0133 11.3761 18.6711 11.0424 18.2489 11.0424H17.92C17.7181 11.0401 17.5236 11.1166 17.38 11.255C17.2364 11.3934 17.1555 11.5821 17.1556 11.779C17.1555 12.1921 17.4964 12.5282 17.92 12.533ZM6.73778 8.3818H12.3822C12.8044 8.3818 13.1467 8.04812 13.1467 7.63649C13.1467 7.22487 12.8044 6.89119 12.3822 6.89119H6.73778C6.31903 6.89116 5.9782 7.2196 5.97333 7.62783C5.97331 8.04087 6.31415 8.37705 6.73778 8.3818Z"
fill="#0077B5" />
</svg>
<div class="text-sm">
$80k - $150K
</div>
</div>
<div>
<div class="capitalize text-mediumGray text-sm space-x-1 mb-3 flex items-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.5 10.3178C3.5 5.71789 7.34388 2 11.9934 2C16.6561 2 20.5 5.71789 20.5 10.3178C20.5 12.6357 19.657 14.7876 18.2695 16.6116C16.7388 18.6235 14.8522 20.3765 12.7285 21.7524C12.2425 22.0704 11.8039 22.0944 11.2704 21.7524C9.13474 20.3765 7.24809 18.6235 5.7305 16.6116C4.34198 14.7876 3.5 12.6357 3.5 10.3178ZM9.19423 10.5768C9.19423 12.1177 10.4517 13.3297 11.9934 13.3297C13.5362 13.3297 14.8058 12.1177 14.8058 10.5768C14.8058 9.0478 13.5362 7.77683 11.9934 7.77683C10.4517 7.77683 9.19423 9.0478 9.19423 10.5768Z"
fill="darkGray" />
</svg>
<div>
Batna
</div>
</div>
<p class="text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem in.</p>
</div>
<div class="flex space-x-3 py-4">
<button class="w-1/2 border-2 border-blue text-blue rounded-lg
duration-100 hover:bg-blue hover:bg-opacity-10 hover:border-4">
<a href="" class="capitalize">contact</a>
</button>
<button class="bg-blue text-white w-1/2 py-2 rounded-lg border-2 border-blue
duration-150 hover:bg-opacity-75">
<a href="" class="capitalize">apply</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-16 bg-veryDarkViolet">
<div
class="container px-6 flex flex-col items-center justify-between mx-auto space-y-16 md:flex-row md:space-y-0 md:items-start">
<!-- Logo -->
<h1 class="font-bold text-3xl text-blue">
<a href="">GI</a>
</h1>
<!-- Menus Container -->
<div class="flex flex-col space-y-16 md:space-x-20 md:flex-row md:space-y-0">
<!-- Menu 1 -->
<div class="flex flex-col items-center w-full md:items-start">
<div class="mb-5 font-bold text-white capitalize">Features</div>
<div class="flex flex-col items-center space-y-3 md:items-start">
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Link shortening</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Branded links</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Analytics</a>
</div>
</div>
<!-- Menu 2 -->
<div class="flex flex-col items-center w-full md:items-start">
<div class="mb-5 font-bold text-white capitalize">Resources</div>
<div class="flex flex-col items-center space-y-3 md:items-start">
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Blog</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Developers</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Support</a>
</div>
</div>
<!-- Menu 3 -->
<div class="flex flex-col items-center w-full md:items-start">
<div class="mb-5 font-bold text-white capitalize">Company</div>
<div class="flex flex-col items-center space-y-3 md:items-start">
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">About</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Our Team</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Careers</a>
<a href="#" class="capitalize text-grayishViolet hover:text-cyan">Contact</a>
</div>
</div>
</div>
<!-- Social Container -->
<div class="flex space-x-6">
<a href="#">
<img src="assets/images/facebook.svg" alt="" class="ficon" />
</a>
<a href="#">
<img src="assets/images/meta.svg" alt="" class="ficon" />
</a>
<a href="#">
<img src="assets/images/apple.svg" alt="" class="ficon" />
</a>
<a href="#">
<img src="assets/images/instagram.svg" alt="" class="ficon" />
</a>
</div>
</div>
</footer>
</body>
</html>