-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathforkafest.html
436 lines (408 loc) · 28.2 KB
/
forkafest.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
<!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">
<title>TI</title>
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2250%22 fill=%22%232da6ff%22></rect><path d=%22M60.80 22.73L60.80 22.73Q61.25 23.45 61.65 24.66Q62.06 25.88 62.06 27.32L62.06 27.32Q62.06 29.75 60.93 31.01Q59.81 32.27 57.83 32.27L57.83 32.27L45.41 32.27L45.41 77.27Q44.69 77.45 43.16 77.72Q41.63 77.99 40.01 77.99L40.01 77.99Q36.59 77.99 35.15 76.73Q33.71 75.47 33.71 72.50L33.71 72.50L33.71 32.27L18.59 32.27Q18.14 31.46 17.73 30.29Q17.33 29.12 17.33 27.68L17.33 27.68Q17.33 25.16 18.45 23.95Q19.58 22.73 21.56 22.73L21.56 22.73L60.80 22.73ZM77.27 77.99L77.27 77.99Q73.85 77.99 72.41 76.73Q70.97 75.47 70.97 72.50L70.97 72.50L70.97 22.73Q71.78 22.55 73.31 22.28Q74.84 22.01 76.37 22.01L76.37 22.01Q79.61 22.01 81.14 23.18Q82.67 24.35 82.67 27.50L82.67 27.50L82.67 77.27Q81.86 77.45 80.38 77.72Q78.89 77.99 77.27 77.99Z%22 fill=%22%23fff%22></path></svg>" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsif.css">
<link rel="stylesheet" href="slider.css">
<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=Lilita+One&display=swap" rel="stylesheet">
<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=Mukta:wght@500&display=swap" rel="stylesheet">
<!-- font -->
<style>
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-track {
background: #242424;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #846c5b;
}
.scrolled {
background-color: #f8f8f8;
width: auto;
margin: 5px 20px 0 20px !important;
border-radius: 40px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar" style="z-index: 999;">
<div class="logo" style="margin-right: 30px;">
<img src="assets/img/teknik.png" style="height: 50px; width: 50px;">
</div>
<ul class="nav-links">
<li><a href="index.html" style="color: #0d47a1;">Beranda</a></li>
<li><a href="profil.html" style="color: #0d47a1;">Tentang kami</a></li>
<li><a href="prestasi.html" style="color: #0d47a1;">Prestasi</a></li>
<li><a href="forkafest.html" style="color: #0d47a1;">Forkafest</a></li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<!-- NAVBAR -->
<!-- SECTION 1 -->
<main>
<section class="about" style="background-color: #f8f8f8 !important;">
<div class="inventory-fluid"
style="min-height: 100vh; display: flex; justify-content: center; align-items: center;">
<div class="wor" style="width: 90%; padding: 10px; min-height: 100% !important;">
<div class="good-md-6">
<h1 class="forkafest">Forkafest 2023</h1>
<div id="countdown" class="time-content">
</div>
<p class="forkafest-sub">"Meningkatkan kreativitas generasi muda dengan teknologi digital dalam menghadapi
era society 5.0"</p>
<div style="text-align: center; margin-top: 50px;">
<button class="cta">
<span><a href="#rangkaian" style="text-decoration: none; color: #000;">Daftarkan tim anda !</a></span>
<svg viewBox="0 0 13 10" height="10px" width="15px">
<path d="M1,5 L11,5"></path>
<polyline points="8 1 12 5 8 9"></polyline>
</svg>
</button>
</div>
</div>
<div class="good-md-6" style="text-align: center; ">
<img src="assets/img/forkafest.svg" alt="forkafest" class="image-fluid img-f" style="width: 100%; height: 100%;">
</div>
</div>
</div>
</section>
<!-- SECTION 1 END-->
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 490" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,125 0,125 C 42.0908430040445,120.22951968066828 84.181686008089,115.45903936133655 128,128 C 171.818313991911,140.54096063866345 217.3640989716884,170.39336223532212 268,166 C 318.6359010283116,161.60663776467788 374.36191810515743,122.96751169737503 432,113 C 489.63808189484257,103.03248830262497 549.188228607682,121.73659097517778 593,119 C 636.811771392318,116.26340902482222 664.8851674641148,92.08612440191388 702,85 C 739.1148325358852,77.91387559808612 785.2711015358589,87.91891141716671 838,101 C 890.7288984641411,114.08108858283329 950.0304263924502,130.23822992941925 1006,132 C 1061.9695736075498,133.76177007058075 1114.6071928943404,121.12816886515634 1167,129 C 1219.3928071056596,136.87183113484366 1271.5408020301884,165.24909460995534 1317,168 C 1362.4591979698116,170.75090539004466 1401.2295989849058,147.87545269502232 1440,125 C 1440,125 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="0.4"
class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,250 0,250 C 39.19044912633164,235.8437838695181 78.38089825266329,221.68756773903618 135,211 C 191.6191017473367,200.31243226096382 265.66685611567846,193.09351291337336 312,208 C 358.33314388432154,222.90648708662664 376.951677284623,259.93838060747044 415,277 C 453.048322715377,294.06161939252956 510.5264347458299,291.1529646567448 566,286 C 621.4735652541701,280.8470353432552 674.9425837320575,273.44976076555025 726,273 C 777.0574162679425,272.55023923444975 825.7032303259402,279.0479922810542 874,269 C 922.2967696740598,258.9520077189458 970.2444949641811,232.35827011023295 1017,239 C 1063.755505035819,245.64172988976705 1109.3187898173358,285.5189272780142 1149,291 C 1188.6812101826642,296.4810727219858 1222.4803457664755,267.5660207777102 1270,255 C 1317.5196542335245,242.4339792222898 1378.7598271167622,246.2169896111449 1440,250 C 1440,250 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,375 0,375 C 41.794403764307816,382.2990166274551 83.58880752861563,389.59803325491026 135,386 C 186.41119247138437,382.40196674508974 247.43917364984532,367.9068836078141 292,377 C 336.5608263501547,386.0931163921859 364.65449787200305,418.7744323138333 417,418 C 469.34550212799695,417.2255676861667 545.9428348621427,382.9953871368527 594,370 C 642.0571651378573,357.0046128631473 661.5741626794259,365.24401913875596 701,370 C 740.4258373205741,374.75598086124404 799.7605144201538,376.0285363081234 852,375 C 904.2394855798462,373.9714636918766 949.3837796399589,370.6418356287504 996,368 C 1042.616220360041,365.3581643712496 1090.704367020011,363.4041211768749 1143,355 C 1195.295632979989,346.5958788231251 1251.798752279997,331.74167966375 1302,334 C 1352.201247720003,336.25832033625 1396.1006238600016,355.629160168125 1440,375 C 1440,375 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>
<!-- SECTION 2 -->
<section style="background-color: #0d47a1;; margin-top: -20px;">
<div class="inventory"
style="min-height: 70vh; display: flex; justify-content: center; align-items: center; flex-direction: column;">
<div class="wor aos">
<h2 class="brothree" style="color: #FFB703;; padding: 10px; font-size: 54px;">Forkafest 2023</h2>
</div>
<div class="brofour aos" class="good-md-12" style="font-size: 24px;">
<p style="color: #f8f8f8;">ForkaFest (Informatika Festival)
adalah sebuah festival yang
berkaitan dengan bidang informatika. Festival ini dirancang untuk menyatukan para profesional, penggiat, dan
pecinta informatika untuk merayakan dan mengapresiasi perkembangan terbaru dalam dunia teknologi dan
komputasi. </p>
</div>
<div class="good-md-12 aos" style="text-align: center; margin-top: 75px;">
<img src="assets/img/winner.svg" alt="forkafest" class="image-fluid ">
</div>
</div>
</div>
</section>
<!-- SECTION 2 END -->
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 490" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,125 0,125 C 47.383951465806675,121.76800867059663 94.76790293161335,118.53601734119327 144,110 C 193.23209706838665,101.46398265880673 244.31233973935338,87.62393930582357 287,83 C 329.6876602606466,78.37606069417643 363.98273811097306,82.96822543551244 410,101 C 456.01726188902694,119.03177456448756 513.7567078167543,150.50315895212668 575,145 C 636.2432921832457,139.49684104787332 700.9904306220096,97.01913875598086 742,89 C 783.0095693779904,80.98086124401914 800.2815696952072,107.42028602394987 839,114 C 877.7184303047928,120.57971397605013 937.883290597161,107.29971714821963 990,100 C 1042.116709402839,92.70028285178037 1086.1852679161489,91.38084538317163 1131,92 C 1175.8147320838511,92.61915461682837 1221.375637738243,95.17690131909382 1273,101 C 1324.624362261757,106.82309868090618 1382.3121811308783,115.91154934045309 1440,125 C 1440,125 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="0.4"
class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 250)"></path>
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,250 0,250 C 58.1485236194454,260.90693647730575 116.2970472388908,271.81387295461155 158,278 C 199.7029527611092,284.18612704538845 224.96033466388224,285.6514446588596 272,289 C 319.03966533611776,292.3485553411404 387.8616141055804,297.58034840995003 448,294 C 508.1383858944196,290.41965159004997 559.5932089137963,278.0271617013402 597,260 C 634.4067910862037,241.97283829865975 657.7655502392345,218.311004784689 707,206 C 756.2344497607655,193.688995215311 831.344590129266,192.72881915990376 890,216 C 948.655409870734,239.27118084009624 990.856089243702,286.7737185756959 1034,293 C 1077.143910756298,299.2262814243041 1121.2310528959265,264.1763065373126 1171,259 C 1220.7689471040735,253.82369346268737 1276.2196991725925,278.5210552750535 1322,282 C 1367.7803008274075,285.4789447249465 1403.8901504137039,267.73947236247324 1440,250 C 1440,250 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 250)"></path>
<path style="background-color: #0d47a1;"
d="M 0,500 C 0,500 0,375 0,375 C 59.600214121441226,358.10191916254723 119.20042824288245,341.2038383250945 168,347 C 216.79957175711755,352.7961616749055 254.79850114991143,381.2865658621692 303,381 C 351.20149885008857,380.7134341378308 409.6055671574718,351.6498982262286 457,347 C 504.3944328425282,342.3501017737714 540.7792302202014,362.11384123291657 579,359 C 617.2207697797986,355.88615876708343 657.2775119617226,329.89473684210526 704,333 C 750.7224880382774,336.10526315789474 804.1107219329086,368.30721139866245 856,390 C 907.8892780670914,411.69278860133755 958.2796003066433,422.87641756324507 1001,410 C 1043.7203996933567,397.12358243675493 1078.7708768405191,360.1871183483571 1134,341 C 1189.2291231594809,321.8128816516429 1264.6368923312805,320.3751090433266 1319,329 C 1373.3631076687195,337.6248909566734 1406.6815538343599,356.3124454783367 1440,375 C 1440,375 1440,500 1440,500 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-2" transform="rotate(-180 720 250)"></path>
</svg>
<style>
.icon-f {
width: 100px;
}
</style>
<!-- SECTION 3 -->
<section style="background-color: #f8f8f8;" id="rangkaian">
<div class="inventory"
style="min-height: 70vh; display: flex; justify-content: center; align-items: center; flex-direction: column;">
<div class="wor aos">
<h2 style="color: #0d47a1; padding: 10px; font-size: 54px; text-align: center;">Rangkaian Acara Perlombaan
</h2>
</div>
<div class="wor aos">
<div class="good-md-4" style="padding: 30px;">
<!-- card 1 -->
<div class="card show-shadow">
<div class="pubg">
<img src="assets/img/icon card/pubg.png" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open1">PUBG MOBILE</button>
</div>
<!-- 1 end -->
</div>
<div class="good-md-4" style="padding: 30px;">
<!-- card 2 -->
<div class="card show-shadow">
<div class="mobile-legend">
<img src="assets/img/icon card/mobilelegend.png" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open2">MOBILE LEGEND</button>
</div>
<!-- 2 end -->
</div>
<div class="good-md-4" style="padding: 30px;">
<!-- card 3 -->
<div class="card show-shadow">
<div class="desain">
<img src="assets/img/icon card/desain.png" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open3">DESAIN UI/UX</button>
</div>
<!-- 3 end -->
</div>
</div>
<div class="wor aos">
<div class="good-md-4" style="padding: 30px;">
<!-- card 4 -->
<div class="card show-shadow">
<div class="cyber-security">
<img src="assets/img/icon card/cyber.png" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open4">CYBER SECURITY</button>
</div>
<!-- 4 end -->
</div>
<div class="good-md-4" style="padding: 30px;">
<!-- card 5 -->
<div class="card show-shadow">
<div class="web-development">
<img src="assets/img/icon card/web.png" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open5">WEB DEVELOPMENT</button>
</div>
<!-- 5 end -->
</div>
<div class="good-md-4" style="padding: 30px;">
<!-- card 6 -->
<div class="card show-shadow">
<div class="computer-network">
<img src="assets/img/icon card/computernetwork.png" style="width: 100%; height: 100% !important;" alt="" class="icon-f">
</div>
<button class="to-show-modal" id="open6" style="font-size: 13px !important;">COMPUTER NETWORK</button>
</div>
<!-- 6 end -->
</div>
</div>
</div>
</section>
<!-- SECTION 3 END -->
<section>
<!-- MODAL 1 -->
<div class="modal-container" id="modal_container1">
<div class="modal">
<h1>PUBG MOBILE</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 PUBG MOBILE. Hai
Gamers, Yuk ikut lomba PUBG Mobile
dalam mengembangkan bakat dan minat para pemain PUBG. Tema : "The Dreams of Teamwork"</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_PUBG_MOBILE" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close1">Close</button>
</div>
</div>
<!-- MODAL 1 END-->
<!-- MODAL 2 -->
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>MOBILE LEGEND</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 Mobile Legend. Hai
Gamers, Yuk ikut lomba Mobile
Legend dalam mengembangkan bakat dan minat para pemain ML. Tema : "Moment of Win"</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_MOBILE_LEGENDS" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close2">Close</button>
</div>
</div>
<!-- MODAL 2 END-->
<!-- MODAL 3 -->
<div class="modal-container" id="modal_container3">
<div class="modal">
<h1>DESAIN UI/UX</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 DESAIN UI/UX. Hai
Designers, Yuk ikut lomba Desain UI/UX
dalam mengapresiasi karya pelajar dan mahasiswa untuk mewujudkan mimpi.
Tema : "Meningkatkan kreativitas generasi muda dengan teknologi digital dalam menghadapi era society 5.0"
</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_UIUX_DESIGN" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close3">Close</button>
</div>
</div>
<!-- MODAL 3 END-->
<!-- MODAL 4 -->
<div class="modal-container" id="modal_container4">
<div class="modal">
<h1>CYBER SECURITY</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 CYBER SECURITY.
Hello guys, Yuk ikut lomba CRYPTOGRAPHIC
sebagai ajang untuk meningkatkan pengalaman di bidang KEAMANAN INFORMASI.
Tema : "Bersatu Membangun Peradaban Digital Yang Cerdas, Beradab, dan Berbudaya"
</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_CYBER_SECURITY" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close4">Close</button>
</div>
</div>
<!-- MODAL 4 END-->
<!-- MODAL 5 -->
<div class="modal-container" id="modal_container5">
<div class="modal">
<h1>WEB DEVELOPMENT</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 WEB DEVELOPMENT.
Hello guys, Yuk ikut lomba Web Development
sebagai ajang untuk meningkatkan pengalaman di bidang Website Development.
Tema : "To Get Better in Developing"
</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_WEB_DEVELOPMENT" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close5">Close</button>
</div>
</div>
<!-- MODAL 5 END-->
<!-- MODAL 6 -->
<div class="modal-container" id="modal_container6">
<div class="modal">
<h1>COMPUTER NETWORK</h1>
<p class="desc" style="padding: 20px 0;">HUMANIKA Unmuh Jember PROUDLY PRESENT FORKAFEST 3.0 COMPUTER NETWORK.
Whats up guys, Yuk ikut lomba Computer Network
sebagai ajang untuk meningkatkan pengalaman di bidang Networking.
Tema : "Explore the World With Internet"</p>
<button class="close-modal" id=""><a href="https://bit.ly/FORKAFEST_COMPUTER_NETWORK" style="text-decoration: none; color: #fff;">Link Pendaftaran</a></button>
<button class="close-modal" id="close6">Close</button>
</div>
</div>
<!-- MODAL 6 END-->
</section>
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg"
class="transition duration-300 ease-in-out delay-150">
<path
d="M 0,400 C 0,400 0,100 0,100 C 24.944825676614613,87.33536466133806 49.889651353229226,74.67072932267612 94,68 C 138.11034864677077,61.32927067732388 201.38622026369768,60.65244737063358 238,66 C 274.6137797363023,71.34755262936642 284.56546759198005,82.7194811947896 312,99 C 339.43453240801995,115.2805188052104 384.35190936838217,136.46962785020804 429,137 C 473.64809063161783,137.53037214979196 518.0268949344912,117.4020074043783 562,100 C 605.9731050655088,82.5979925956217 649.5405108936529,67.92234253227883 685,68 C 720.4594891063471,68.07765746772117 747.8110614908967,82.90862246650637 779,87 C 810.1889385091033,91.09137753349363 845.2152431427604,84.44316760169573 879,78 C 912.7847568572396,71.55683239830427 945.3279659380612,65.31870712671069 982,67 C 1018.6720340619388,68.68129287328931 1059.4728931049947,78.28200389146149 1100,93 C 1140.5271068950053,107.71799610853851 1180.78046164196,127.5532773074433 1223,129 C 1265.21953835804,130.4467226925567 1309.4052603271646,113.50488687876526 1346,109 C 1382.5947396728354,104.49511312123474 1411.5984970493814,112.42717517749564 1426,113 C 1440.4015029506186,113.57282482250436 1440.2007514753093,106.78641241125217 1440,100 C 1440,100 1440,400 1440,400 Z"
stroke="none" stroke-width="0" fill="#0d47a1 " fill-opacity="0.4"
class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<path
d="M 0,400 C 0,400 0,200 0,200 C 33.52775551734378,184.29346120550278 67.05551103468756,168.58692241100556 105,163 C 142.94448896531244,157.41307758899444 185.30571137859357,161.9457715614806 218,175 C 250.69428862140643,188.0542284385194 273.72164345093796,209.62999134307205 314,204 C 354.27835654906204,198.37000865692795 411.80771481765476,165.53426306623126 449,170 C 486.19228518234524,174.46573693376874 503.0474972784433,216.23295639200282 536,229 C 568.9525027215567,241.76704360799718 618.0022960685718,225.5339113657575 658,223 C 697.9977039314282,220.4660886342425 728.9433184472691,231.63139814496736 768,223 C 807.0566815527309,214.36860185503264 854.2244301423519,185.94049605437306 889,187 C 923.7755698576481,188.05950394562694 946.1589609833225,218.60661763754032 976,219 C 1005.8410390166775,219.39338236245968 1043.1397259243583,189.6330333954657 1088,176 C 1132.8602740756417,162.3669666045343 1185.2821353192444,164.86124878059684 1227,177 C 1268.7178646807556,189.13875121940316 1299.731732798665,210.921971482147 1337,217 C 1374.268267201335,223.078028517853 1417.7909334860958,213.45086529081516 1436,208 C 1454.2090665139042,202.54913470918484 1447.104533256952,201.27456735459242 1440,200 C 1440,200 1440,400 1440,400 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="0.53"
class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
<path
d="M 0,400 C 0,400 0,300 0,300 C 48.02112900893914,298.8455253438959 96.04225801787828,297.69105068779174 131,304 C 165.95774198212172,310.30894931220826 187.85209693742604,324.08132259272884 219,319 C 250.14790306257396,313.91867740727116 290.54935423241744,289.983658941293 334,288 C 377.45064576758256,286.016341058707 423.95048613290413,305.98404164209916 455,305 C 486.04951386709587,304.01595835790084 501.6487012359662,282.08017449031024 536,272 C 570.3512987640338,261.91982550968976 623.454708923231,263.6952603966598 662,265 C 700.545291076769,266.3047396033402 724.5324630711096,267.13878392305054 765,275 C 805.4675369288904,282.86121607694946 862.4154387923304,297.7496039111382 900,296 C 937.5845612076696,294.2503960888618 955.8057817595682,275.86280043239674 992,275 C 1028.1942182404318,274.13719956760326 1082.3614341693974,290.79919435927485 1123,305 C 1163.6385658306026,319.20080564072515 1190.748481562842,330.94042213050363 1222,330 C 1253.251518437158,329.05957786949637 1288.6446395792348,315.43911711871056 1329,308 C 1369.3553604207652,300.56088288128944 1414.6729601202187,299.30310939465414 1434,299 C 1453.3270398797813,298.69689060534586 1446.6635199398906,299.3484453026729 1440,300 C 1440,300 1440,400 1440,400 Z"
stroke="none" stroke-width="0" fill="#0d47a1" fill-opacity="1"
class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>
<!-- SECTION 4 -->
<section
style="background-color: #0d47a1; margin-top: -10px; min-height: 70vh; display: flex; flex-direction: column;">
<div class="inventory">
<div class="rowo aos" style="margin: 30px;">
<h2 style="color: #fff; padding: 10px;">Timeline Kegiatan</h2>
</div>
<div class="timeline aos">
<div class="timeline-container right-container">
<div class="timeline-text-box">
<i class="fa-solid fa-calendar-days fa-3x"></i>
<h2>PENDAFTARAN DAN PENGERJAAN</h2>
<small>1 Mei - 12 Juni 2023</small>
<span class="right-container-arrow"></span>
</div>
</div>
<div class="timeline-container left-container">
<div class="timeline-text-box">
<i class="fa-solid fa-file fa-3x"></i>
<h2>BATAS PENGUMPULAN KARYA</h2>
<small>13 Juni - 17 Juni 2023</small>
<span class="left-container-arrow"></span>
</div>
</div>
<div class="timeline-container right-container">
<div class="timeline-text-box">
<i class="fa-solid fa-list-check fa-3x"></i>
<h2>TAHAP PENJURIAN</h2>
<small>18 Juni - 23 Juni 2023</small>
<span class="right-container-arrow"></span>
</div>
</div>
<div class="timeline-container left-container">
<div class="timeline-text-box">
<i class="fa-solid fa-award fa-3x"></i>
<h2>PENGUMUMAN PEMENANG</h2>
<small>24 Juni 2023</small>
<span class="left-container-arrow"></span>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 4 END -->
</main>
<!-- footer -->
<section style="background-color: #0D47A1;">
<footer style="background-color: #0d47a1; margin-top: -5px; padding: 20px; color: #f8f8f8;">
<div class="inventory-fluid">
<div class="wor" style="display: flex; justify-content: space-between; align-items: end; flex-direction: row;">
<div class="good-md-4">
<h3>Sekretariat HMD TE</h3>
<div class="alamat icon">
<i class="fas fa-map-marker-alt"></i>
<p>Jl. Karimata No. 49 Jember - Jawa Timur - Indonesia</p>
</div>
<!-- email -->
<div class="email icon">
<i class="fas fa-envelope"></i>
<p>kantorpusat@unmuhjember.ac.id</p>
</div>
<!-- telp -->
<div class="telp icon">
<i class="fas fa-phone-alt"></i>
<p>(0331) 336728</p>
</div>
<!-- sosmed -->
<div class="sosmed">
<a href="https://www.instagram.com/unmuhjember_ofc/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/profile.php?id=100012524498447" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/unmuhjember_ofc?lang=en" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCleKMJMJhS_3HwgSLW0Ywfw" target="_blank"><i
class="fab fa-youtube"></i></a>
</div>
</div>
<div class="good-md-4">
<!-- copyright -->
<p style="text-align: end;">© 3 Angels Team</p>
</div>
</div>
</div>
</footer>
</section>
<!-- footer end -->
<script src="script.js"></script>
<script src="model.js"></script>
<script src="assets/js/aos.js"></script>
<script type="text/javascript" src="assets/js/countdown.js"></script>
</body>
</html>