-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
1158 lines (1080 loc) · 67.8 KB
/
Copy pathindex.html
File metadata and controls
1158 lines (1080 loc) · 67.8 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
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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>Hack.INI Website</title>
<meta
content="cybersecurity, algiers, ctf, challenges, shellmates"
name="keywords"
/>
<meta content="Hack.INI is a well known event held by Shellmates club for many years now, it stands for Hack Initiation, which means it is made to introduce beginners to the world of cybersecurity and ethical hacking." />
<meta
property="og:image"
content="https://res.cloudinary.com/shellmates-club/image/upload/v1652729598/hackini/hackini_uberpk.png"
/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<meta property="og:image:alt" content="Hack.INI Logo" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://hackini22.shellmates.club/"
/>
<meta property="og:title" content="Hack.INI Event" />
<meta
property="og:description"
content="Hack.INI is a well known event held by Shellmates club for many years now, it stands for Hack Initiation, which means it is made to introduce beginners to the world of cybersecurity and ethical hacking."
/>
<!-- Favicons -->
<link
href="https://res.cloudinary.com/shellmates-club/image/upload/v1652640958/hackini/hackini_gradient_qykb9g.png"
rel="icon"
/>
<link
href="https://res.cloudinary.com/shellmates-club/image/upload/v1652729598/hackini/hackini_uberpk.png"
rel="apple-touch-icon"
/>
<link
href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/LATEST-VERSION"
/>
<title>Hack.INI Website</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="../public/styles.css" rel="stylesheet" />
<link href="http://fonts.cdnfonts.com/css/gilroy-bold" rel="stylesheet">
<script
src="https://kit.fontawesome.com/1e7114e63e.js"
crossorigin="anonymous"
></script>
</head>
<body class="text-white overflow-x-hidden">
<!-- Navbar Section -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<div class="w-full text-white md:bg-transparent dark-mode:text-gray-200 dark-mode:bg-gray-800 z-50 fixed navbar-fixed-top">
<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto lg:items-center lg:justify-between lg:flex-row md:px-6 lg:px-8">
<div class="p-4 flex flex-row items-center justify-end">
<button class="lg:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open" onclick="addBg()">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="navbar flex-col flex-grow p-4 hidden lg:flex lg:justify-center lg:flex-row">
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#hero">Home</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#sponsors">Sponsors</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#about">About</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#ngallery">Gallery</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#venue">Venue</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#nagenda">Agenda</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#nspeakers">Speakers</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#ngallery">Gallery</a>
<a class="px-6 py-2 mt-2 text-md font-gilroy-regular bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:bg-gradient-to-br hover:from-[#74e250] hover:to-[#24ecca] hover:text-transparent hover:bg-clip-text focus:from-[#74e250] focus:to-[#24ecca] focus:text-transparent focus:bg-clip-text focus:outline-none focus:shadow-outline" href="#faq">FAQ</a>
</nav>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<script>
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
if ($(".navbar").hasClass("hidden")) {
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
}
// $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
function addBg() {
if (
document.body.scrollTop <= 20 &&
document.documentElement.scrollTop <= 20
) {
document.getElementsByClassName("navbar-fixed-top")[0].classList.add("scrolled");
}
}
</script>
<!-- Hero Section -->
<section id="hero" class="flex flex-col pb-40 text-center gap-y-8 relative overflow-hidden" data-aos="fade-up"
data-aos-duration="2000">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_right_mkud7e.svg" class="absolute -top-10 -right-10 w-32 sm:w-44 lg:-top-16 lg:w-48 lg:-right-12 xl:w-56 xl:-right-16 h-auto rotate" alt="">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422478/hackini/assets/hero_bottom_right_armqbz.svg" class="absolute bottom-0 -right-10 w-32 sm:w-44 lg:w-48 lg:-right-12 xl:w-56 xl:-right-16 h-auto rotate" alt="">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_left_ssmri5.svg" class="absolute -top-12 -left-10 w-32 sm:w-44 lg:-top-16 lg:w-48 lg:-left-12 xl:w-56 xl:-left-16 h-auto rotate" alt="">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422511/hackini/assets/shellmate_logo_yb49aj.png" alt="Shellmates logo" class="hero-logo w-8 mt-16 md:mt-20 md:w-14 self-center" >
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper text-center">
<h1 class="title-gradient font-gilroy-heavy text-3xl md:text-6xl typing-demo-event text-center mx-auto">The Annual Hack.INI Event</h1>
</h3>
<div class="grid grid-cols-1 md:grid-cols-1 gap-y-6 gap-x-12 mx-auto">
<!-- md:grid-cols-2 -->
<div class="inline-flex items-center">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/schedule_bom3ob.svg" alt="schedule">
<p class="text-xl text-white ml-4">May 26th-28th, 2022.</p>
</div>
<div class="inline-flex items-center">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422480/hackini/assets/localisation_pqybmj.svg" alt="localisation" class="inline">
<p class="text-xl text-white ml-4">ESI, Oued Smar, Algiers.</p>
</div>
</div>
<p class="text-white text-2xl md:text-3xl font-gilroy-medium capitalize">Starting in :</p>
<!-- Countdown -->
<div class="countdown-about w-full h-full title-gradient font-gilroy-heavy">
<div class="countdown flex flex-row justify-center mb-4 lg:mb-8">
<div class="daysC flex flex-col justify-center align-center text-center">
<p class="daysTXT mb-3.5 lg:text-5xl text-xl">00</p>
<p class="lg:text-3xl text-lg">Days</p>
</div>
<div class="text-center">
<p class="lg:text-3xl mb-3.5 text-lg mx-3 md:mx-8"> - </p>
</div>
<div class="hoursC flex flex-col justify-center align-center text-center">
<p class="hoursTXT lg:text-5xl mb-3.5 text-xl">00</p>
<p class="lg:text-3xl text-lg">Hours</p>
</div>
<div class="text-center">
<p class="lg:text-3xl mb-3.5 text-lg mx-2 md:mx-8"> - </p>
</div>
<div class="minutesC flex flex-col justify-center align-center text-center">
<p class="minutesTXT lg:text-5xl mb-3.5 text-xl">00</p>
<p class="lg:text-3xl text-xl">Minutes</p>
</div>
<div class="text-center">
<p class="lg:text-3xl mb-3.5 text-lg mx-1 md:mx-6"> - </p>
</div>
<div class="secondsC flex flex-col justify-center align-center text-center">
<p class="secondsTXT lg:text-5xl mb-3.5 text-xl">00</p>
<p class="lg:text-3xl text-lg">Seconds</p>
</div>
</div>
</div>
<a href="https://shellmates.typeform.com/HackINIregister" target="_blank" class="text-black px-6 py-3 w-1/5 self-center font-gilroy-bold text-lg md:text-xl lg:text-2xl rounded-full bg-gradient-to-r from-[#74E250] to-[#24ECCA]">
Register now
</a>
</div>
<!-- END COUNTDOWN -->
</section>
<!-- Scrool top button -->
<button class="fixed w-12 h-12 bottom-32 right-10 bg-[#000f23] fill-white ease-out hover:bg-white hover:fill-[#02121F] hover:ease-out px-3 py-3 rounded-full cursor-pointer z-50" onclick="topFunction()" id="myBtn" title="Go to top">
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><title/><path d="M82.6074,62.1072,52.6057,26.1052a6.2028,6.2028,0,0,0-9.2114,0L13.3926,62.1072a5.999,5.999,0,1,0,9.2114,7.6879L48,39.3246,73.396,69.7951a5.999,5.999,0,1,0,9.2114-7.6879Z"/></svg>
</button>
<script>
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
<!-- Partners / Sponsors section -->
<section id="sponsors" class="mb-16 flex flex-col gap-y-8 lg:gap-y-12 relative" data-aos="fade-up"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422478/hackini/assets/hero_bottom_right_armqbz.svg" class="absolute -left-12 bottom-0 w-24 lg:w-40 lg:-left-16 xl:w-56 xl:-left-24 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-1"> Event Sponsors</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Partners / Sponsors
</h2>
</div>
<div class="grid gap-x-8 gap-y-4 grid-cols-1 sm:grid-cols-4 md:grid-cols-3 mx-auto">
<!-- <div class="w-60 h-44 sm:col-span-2 md:col-span-1 border border-white">01</div> -->
<!-- <div class="w-60 h-44 sm:col-span-2 md:col-span-1">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1652639162/hackini/RS_-_Green_oaxwrn.svg" alt="Shellmates logo" class="hero-logo w-24 md:w-40 self-center mx-auto" >
</div> -->
<div class="w-60 h-44 sm:col-span-4 md:col-span-4 self-center">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1652639162/hackini/RS_-_Green_oaxwrn.svg" alt="Shellmates logo" class="hero-logo w-24 md:w-40 self-center mx-auto" >
</div>
<!-- <div class="w-60 h-44 sm:col-start-2 sm:col-span-2 md:col-span-1 border border-white">03</div> -->
</div>
</section>
<!-- End -->
<!-- Who are we section -->
<section id="about" class="py-32 flex flex-col gap-y-8 lg:gap-y-12 relative overflow-hidden" data-aos="fade-right"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_right_mkud7e.svg" class="absolute -right-12 top-6 w-24 sm:w-32 lg:w-40 lg:-right-16 xl:w-56 xl:-right-24 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-2"> Who are we?</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Shellmates
</h2>
</div>
<div class="grid gap-x-6 gap-y-8 grid-cols-1 md:grid-cols-3 mx-auto">
<div class="mx-20 text-center md:text-left md:mx-0 md:w-[34rem] lg:w-[36rem] md:col-span-2">
Shellmates club is a collaboration of Algerian dedicated students that are passionate about computer security and computer science. It was founded on December 19th, 2011 and was formerly known as “OWASP Student Chapter Algeria”; since the group was the first representative of OWASP in Algeria. The main goal of the club is to create a community of InfoSec enthusiasts and encourage knowledge sharing in the IT security field.
</div>
<div class="mx-auto md:mx-0 w-40 sm:w-60 h-44 md:col-span-1 justify-center items-center">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422511/hackini/assets/shellmate_logo_yb49aj.png" alt="Shellmates logo" class="hero-logo w-16 md:w-28 self-center mx-auto" >
</div>
</div>
</section>
<!-- End -->
<!-- About the event section -->
<section class="py-16 flex flex-col gap-y-8 lg:gap-y-12 relative" data-aos="fade-left"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422477/hackini/assets/2_cpkgnn.svg" class="absolute -left-12 bottom-0 w-24 lg:w-40 lg:-left-16 xl:w-56 xl:-left-20 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-3"> About the event</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Hack.INI
</h2>
</div>
<div class="grid gap-x-6 gap-y-8 grid-cols-1 md:grid-cols-3 mx-auto">
<div class="mx-20 text-center md:order-2 md:text-left md:mx-0 md:w-[34rem] lg:w-[36rem] md:col-span-2">
Hack.INI is a well known event held by Shellmates club for many years now, it stands for <span class="title-gradient font-bold">Hack Initiation</span>, which means it is made to introduce beginners to the world of cybersecurity and ethical hacking.
<br><br>
This edition will take almost three consecutive days, there will be plenty of activities that will help you initiate your first steps into the InfoSec field.
<br><br>
The CTF will be up all along the event period and <span class="title-gradient font-bold">challenge based</span>, i.e. the CTF is separated into small tasks that can be solved individually. We are trying our best to give all participants a delightful experience. The topics covered are somewhere around crypto, web security, reverse engineering and binary exploitation.
<br><br>
Also, Hack.INI will be hosting workshops on computer security that are firmly related to the CTF competition. Participants can choose between four different workshops covering approximately all fields of cybersecurity.
</div>
<div class="mx-auto md:order-1 md:mx-0 w-40 sm:w-60 h-44 md:col-span-1 justify-center items-center">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422483/hackini/assets/hackini_gradient_xpyorg.png" alt="Shellmates logo" class="hero-logo w-28 md:w-36 self-center mx-auto my-auto" >
</div>
</div>
</section>
<!-- End -->
<!-- CTF section -->
<section id="ctf" class="py-32 flex flex-col gap-y-8 lg:gap-y-12 relative" data-aos="fade-up"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_right_mkud7e.svg" class="absolute -left-16 bottom-0 w-24 lg:w-40 lg:-left-20 xl:w-56 xl:-left-24 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-4"> What is a CTF?</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
CAPTURE THE FLAG
</h2>
</div>
<div class="mx-20 md:mx-40 text-center">
Capture the Flag in computer security is generally an exercise or as known as <span class="title-gradient font-bold">a challenge</span>, in which <span class="title-gradient font-bold">flags</span> are secretly hidden in purposefully-vulnerable programs or websites, to reach the maximum points and be ranked the highest on the scoreboard.
<br><br>
On the other hand, A CTF competition is a set of challenges of different categories. The teams will work together to try and solve as many challenges as they can against time. Each captured flag gains them a number of points.
<br><br>
Competitors steal flags either from other competitors or in our case from the organisers, Hack.Ini will present several variations, including misc, forensics and pwn. . .
</div>
</section>
<!-- End -->
<!-- Why participating section -->
<section id="whyparticipating" class="mb-32 py-32 flex flex-col gap-y-8 lg:gap-y-12 relative overflow-hidden" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_left_ssmri5.svg" class="absolute -right-16 bottom-0 w-24 lg:w-40 lg:-right-20 xl:w-56 xl:-right-24 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-5"> Reasons to participate in Hack.INI</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Why Participating ?
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-center justify-center text-[#000] px-8 sm:px-40 md:px-12 xl:px-20">
<div class="relative flex flex-col items-center justify-left bg-[#5CE593] rounded-3xl p-6 md:py-10 md:px-8 mx-12 my-12 lg:my-auto"
data-aos="fade-up"
data-aos-offset="100"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="relative w-full flex items-center justify-end mb-3">
<h2 class="right-3 text-5xl opacity-30 text-[#000] font-bold w-fit ">01</h2>
</div>
<div class="w-full">
<h2 class="text-xl md:text-2xl">Learning </h2>
<h1 class="w-1/3 border-b-2 border-[#000] mt-2 mb-3"></h1>
<p class="text-md md:text-lg">
The key benefits of participating will be the great learning experience. You will surely get to learn pretty much new skills. So if you are a curious soul wanting to learn more about being a hacker, you should definitely join us.
</p>
</div>
<div>
</div>
</div>
<div class="text-[#fff] relative flex flex-col items-center justify-left bg-[#2C2C33] rounded-3xl p-6 md:py-10 md:px-8 mx-12 my-12 lg:my-auto"
data-aos="fade-up"
data-aos-offset="200"
data-aos-duration="1000"
data-aos-easing="ease-in-sine"
>
<div class="absolute -left-1 ">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422477/hackini/assets/brightLine_gzviov.png" alt="" class="shadow-lg shadow-[#5CE593]">
</div>
<div class="relative w-full flex items-center justify-end mb-3">
<h2 class="right-3 text-5xl opacity-30 text-[#fff] font-bold w-fit ">02</h2>
</div>
<div class="w-full">
<h2 class="text-xl md:text-2xl">Recognition</h2>
<h1 class="w-1/3 border-b-2 border-[#fff] mt-2 mb-3"></h1>
<p class="text-md md:text-lg">
<span class="title-gradient">Hack.INI</span> will give you the chance to meet other like-minded individuals and fellow cyber security enthusiasts, it is the opportunity to talk about interesting topics, get inspiration and develop a strong professional network.
</p>
</div>
<div>
</div>
</div>
<div class="shadow-card relative text-[#fff] flex flex-col items-center justify-left bg-[#2C2C33] rounded-3xl p-6 md:py-10 md:px-8 mx-12 my-12 lg:my-auto"
data-aos="fade-up"
data-aos-offset="300"
data-aos-duration="1000"
data-aos-easing="ease-in-sine"
>
<div class="absolute -left-1 shadow-lg shadow-[#5CE593] ">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422477/hackini/assets/brightLine_gzviov.png" alt="" class="shadow-lg shadow-[#5CE593]">
</div>
<div class="relative w-full flex items-center justify-end mb-3">
<h2 class="right-3 text-5xl opacity-30 text-[#fff] font-bold w-fit ">03</h2>
</div>
<div class="w-full">
<h2 class="text-xl md:text-2xl">Motivation </h2>
<h1 class="w-1/3 border-b-2 border-[#fff] mt-2 mb-3"></h1>
<p class="text-md md:text-lg">
It’s fun, if you enjoy challenges and competitions, Hack.INI is the place for you! You will meet other talented souls and compete with and against each other to solve the exciting challenges Hack.INI has in store for you.
</p>
</div>
<div>
</div>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Venue Section -->
<section id="venue" class="my-32 flex flex-col gap-y-8 lg:gap-y-12 relative" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422478/hackini/assets/hero_bottom_right_armqbz.svg" class="absolute -left-16 bottom-0 w-24 lg:w-40 lg:-left-20 xl:w-56 xl:-left-28 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-8"> Get Direction</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
EVENT VENUE
</h2>
</div>
<div class="w-[80%] mx-auto leading-loose">
<!-- Two columns -->
<div class=" flex flex-wrap md:flex-nowrap mb-6 gap-1 p-0 md:text-3xl md:leading-10 text-xl leading-6">
<div class="z-0 overflow-hidden relative h-[80vw] w-[100%] md:h-auto md:w-1/2 bg-gray-400">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3198.729818871565!2d3.1717269148095455!3d36.70502987996815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x128e522f3f317461%3A0x215c157a5406653c!2sEcole%20Nationale%20Sup%C3%A9rieure%20d'Informatique!5e0!3m2!1sfr!2sdz!4v1647876037850!5m2!1sfr!2sdz" class="left-0 top-0 h-[100%] w-[100%] absolute" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="md:w-1/2 py-8 md:px-8 flex flex-col justify-center">
<p class="pb-5 font-bold text-1xl mb-4 sm:text-2xl sm:mb-6 md:text-3xl md:mb-8">
École nationale supérieure d'informatique, Algiers
</p>
<p class="text-white font-light text-md sm:text-lg md:text-xl lg:text-2xl">
Formerly the National Institute for Computer Training (INI), is an Algerian higher education institution training state engineers in computer science. It is located in Oued Smar, about 15 km from the city center of the capital Algiers, in Algeria.
</p>
</div>
</div>
<!-- Three columns -->
<div class="flex md:flex-nowrap flex-wrap my-4 gap-2 md:text-3xl md:leading-10 text-xl leading-6">
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266965/bsides_site/venue-gallery/1_gppl7a.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266965/bsides_site/venue-gallery/1_gppl7a.jpg" alt="">
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266956/bsides_site/venue-gallery/2_zpcjni.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266956/bsides_site/venue-gallery/2_zpcjni.jpg" alt="" >
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266965/bsides_site/venue-gallery/3_hxgrs4.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266965/bsides_site/venue-gallery/3_hxgrs4.jpg" alt="">
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266975/bsides_site/venue-gallery/4_votarv.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266975/bsides_site/venue-gallery/4_votarv.jpg" alt="" >
</a>
</div>
</div>
<!-- Three columns -->
<div class="flex md:flex-nowrap flex-wrap my-4 gap-2 md:text-3xl md:leading-10 text-xl leading-6">
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266948/bsides_site/venue-gallery/5_byhiqs.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266948/bsides_site/venue-gallery/5_byhiqs.jpg" alt="" >
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266993/bsides_site/venue-gallery/11_eso4xw.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266993/bsides_site/venue-gallery/11_eso4xw.jpg" alt="" >
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266985/bsides_site/venue-gallery/7_ollkur.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266985/bsides_site/venue-gallery/7_ollkur.jpg" alt="">
</a>
</div>
<div class="w-[100%] md:w-1/4 venue-img">
<a href="https://res.cloudinary.com/shellmates-club/image/upload/v1641266969/bsides_site/venue-gallery/9_sjk9sr.jpg" class="venobox" data-gall="venue-gallery">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1641266969/bsides_site/venue-gallery/9_sjk9sr.jpg" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Content section -->
<section id="content" class="py-16 flex flex-col gap-y-8 lg:gap-y-12 relative overflow-hidden" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422479/hackini/assets/hero_top_right_mkud7e.svg" class="absolute -right-16 top-8 w-24 lg:w-40 lg:-right-20 xl:w-56 xl:-right-28 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-11"> Event's Content</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
CONTENT
</h2>
</div>
<div class="flex flex-wrap mx-auto gap-x-16">
<div class="w-56 h-56 xl:w-72 xl:h-72 sm:col-span-2 md:col-span-1 text-center items-center relative mx-auto my-4">
<img src="./public/assets/contentbg.svg" class="w-full h-full rotate relative" alt="">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<h3 class="title-gradient text-3xl lg:text-4xl xl:text-5xl font-bold">+04</h3>
<p class="title-gradient text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold">Workshops</p>
</div>
</div>
<div class="w-56 h-56 xl:w-72 xl:h-72 sm:col-span-2 md:col-span-1 text-center items-center relative mx-auto my-4">
<img src="./public/assets/contentbg.svg" class="w-full h-full rotate relative" alt="">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<h3 class="title-gradient text-3xl lg:text-4xl xl:text-5xl font-bold">+07</h3>
<p class="title-gradient text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold">Mentors</p>
</div>
</div>
<div class="w-56 h-56 xl:w-72 xl:h-72 sm:col-span-2 md:col-span-1 text-center items-center relative mx-auto my-4">
<img src="./public/assets/contentbg.svg" class="w-full h-full rotate relative" alt="">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<h3 class="title-gradient text-3xl lg:text-4xl xl:text-5xl font-bold">+25</h3>
<p class="title-gradient text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold">Challenges</p>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Speakers section -->
<section id="nspeakers" class="flex flex-col items-center gap-y-8 lg:gap-y-12 relative py-16 overflow-hidden" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<img src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422478/hackini/assets/hero_bottom_right_armqbz.svg" class="absolute -right-16 bottom-8 w-24 lg:w-40 lg:-right-20 xl:w-56 xl:-right-28 h-auto rotate" alt="">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-10"> Get to know our Speakers</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Speakers
</h2>
</div>
<div class="w-4/5 inline-flex justify-between gap-x-8 lg:gap-x-16 relative overflow-x-scroll 2xl:overflow-auto">
<div class="w-60 flex flex-col mx-auto gap-y-4 my-4">
<img class="w-full h-72 object-cover" src="https://cdn.discordapp.com/attachments/844976555670372392/976218266794098788/280186699_1330298554130422_5427442290936090536_n.png"/>
<div class="w-60 flex flex-col mx-auto my-4 justify-between h-44">
<div>
<h4 class="text-xl">Imad Eddine Bourouche</h4>
<p class="font-thin text-sm my-2">1CS student and shellmates member.</p>
</div>
<div class="flex gap-x-4 mt-2">
<a href="https://www.facebook.com/imadbourouche" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.linkedin.com/in/imad-eddine-bourouche-92974521a/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="w-60 flex flex-col mx-auto gap-y-4 my-4">
<img class="w-full h-72 object-cover" src="https://cdn.discordapp.com/attachments/844976555670372392/976223929083523083/IMG_20220425_160600.jpg"/>
<div class="w-60 flex flex-col mx-auto my-4 justify-between h-44">
<div>
<h4 class="text-xl">Amel Khamoum</h4>
<p class="font-thin text-sm my-2">
4th year computer systems engineering student at ESI.
Github Campus Expert.
Cybersecurity Enthusiast and CTF Player.
</p>
</div>
<div class="flex gap-x-4 mt-2">
<a href="https://www.facebook.com/amel.khamoum.5" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.linkedin.com/in/amel-khamoum/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="w-60 flex flex-col mx-auto gap-y-4 my-4">
<img class="w-full h-72 object-cover" src="https://cdn.discordapp.com/attachments/845301707738841108/923278989617950740/bilal.png"/>
<div class="w-60 flex flex-col mx-auto my-4 h-44 justify-between">
<div>
<h4 class="text-xl">Retiat Bilal</h4>
<p class="font-thin text-sm my-2">Cyber Security Specialist at Realistic Security, working on penetration testing and incident response. Elastic Certified Analyst.</p>
</div>
<div class="flex gap-x-4 mt-2">
<a href="https://twitter.com/philomath213" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/bilal-retiat/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="w-60 flex flex-col mx-auto gap-y-4 my-4">
<img class="w-full h-72 object-cover" src="https://cdn.discordapp.com/attachments/844976555670372392/976227853899284541/FB_IMG_1652815756790.jpg"/>
<div class="w-60 flex flex-col mx-auto my-4 h-44 justify-between">
<div>
<h4 class="text-xl">Mohamed Elghazali Kimeche</h4>
<p class="font-thin text-sm my-2">4th year student at ESI, cyber security enthusiast and CTF player with OctaC0re team. Obsessed with Network Security & Digital Forensics.</p>
</div>
<div class="flex gap-x-4 mt-2">
<a href="https://www.facebook.com/M.E.K.elghazali" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://www.linkedin.com/in/gzli/" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Gallery section -->
<section id="ngallery" class="my-48 flex flex-col gap-y-8 lg:gap-y-12"
data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-6"> Photos from previous editions</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Gallery
</h2>
</div>
<div class="slider"
data-aos="fade-up"
data-aos-offset="200"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div id="gallery" class="slide-track">
<!---->
</div>
</div>
</section>
<!-- End -->
<!-- Agenda section -->
<section id="nagenda" class="my-32 flex flex-col gap-y-8 lg:gap-y-12 relative" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<img
src="https://res.cloudinary.com/shellmates-club/image/upload/v1653422477/hackini/assets/2_cpkgnn.svg"
class="absolute -left-12 bottom-0 w-24 lg:w-40 lg:-left-16 xl:w-56 xl:-left-20 h-auto rotate"
alt=""
/>
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4 relative">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-9"> Event timeline</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
Agenda
</h2>
</div>
<div
id="agenda"
class="flex flex-col w-4/5 xl:w-3/5 mx-auto gap-y-8 relative"
>
<div class="flex md:gap-x-16 lg:gap-x-32" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<div class="w-28 md:w-36">
<h4 class="uppercase font-bold title-gradient text-lg md:text-3xl">
Day 01
</h4>
<h5 class="title-gradient text-base md:text-xl lg:text-2xl">
May 26th
</h5>
</div>
<div
class="md:text-lg lg:text-xl xl:text-2xl grad flex flex-col gap-y-2 w-3/5 md:w-auto"
>
<div>17:00 : Check-in</div>
<div>18:30 : Opening ceremony</div>
<div>19:30 : CTF Start</div>
<div>21:00 : Dinner</div>
</div>
</div>
<div class="flex md:gap-x-16 lg:gap-x-32" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<div class="w-28 md:w-36">
<h4 class="uppercase font-bold title-gradient text-lg md:text-3xl">
Day 02
</h4>
<h5 class="title-gradient text-base md:text-xl lg:text-2xl">
May 27th
</h5>
</div>
<div
class="md:text-lg lg:text-xl xl:text-2xl grad flex flex-col gap-y-2 w-3/5 md:w-auto"
>
<div>07:30 : Breakfast</div>
<div>09:00 - 10:30 : Digital forensics</div>
<div>11:00 - 12:30 : Docker security</div>
<div>12:30 : Lunch break</div>
<div>14:30 - 16:30 : Cryptographic Vulnerabilities</div>
<div>16:00 : Coffee Break</div>
<div>16:30 - 18:00 : Intro to Binary Exploitation</div>
<div>21:00 : Dinner</div>
</div>
</div>
<div class="flex md:gap-x-16 lg:gap-x-32" data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<div class="w-28 md:w-36">
<h4 class="uppercase font-bold title-gradient text-lg md:text-3xl">
Day 03
</h4>
<h5 class="title-gradient text-base md:text-xl lg:text-2xl">
May 28th
</h5>
</div>
<div
class="md:text-lg lg:text-xl xl:text-2xl grad flex flex-col gap-y-2 w-3/5 md:w-auto"
>
<div>07:30 : CTF end, Breakfast</div>
<div>08:30 : Closing ceremony</div>
</div>
</div>
</div>
</section>
<!-- End -->
<!-- Reviews section -->
<!-- End -->
<!-- Registration -->
<!-- End -->
<!-- FAQ Sectipn -->
<section id="faq" class="my-32 flex flex-col gap-y-8 lg:gap-y-12">
<div class="flex flex-col items-center gap-y-2 lg:gap-y-4"
data-aos="fade-up"
data-aos-duration="500"
data-aos-easing="ease-in-sine">
<h3 class="text-lg md:text-xl lg:text-2xl font-extralight wrapper">
{ <span class="typing-demo-7"> Frequently Asked Questions</span> }
</h3>
<h2 class="uppercase text-3xl lg:text-4xl font-bold title-gradient">
FAQ
</h2>
</div>
<dl class="mt-8 mx-auto max-w-screen-sm md:max-w-screen-md lg:max-w-screen-xl flex flex-col lg:flex-row lg:flex-wrap">
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="100"
data-aos-duration="1000"
data-aos-easing="ease-in-sine"
>
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
Who can participate?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
Are you a fan of cybersecurity or a professional in this field? or perhaps you are passionate about hacking or you are simply curious? Then <span class="title-gradient">Hack.INI 2022</span> is the opportunity not to miss to satisfy your curiosity, learn and also meet other people addicted to computer security.
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="130"
data-aos-duration="1000"
data-aos-easing="ease-in-sine"
>
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
What other activities do we have aside from the CTF competition?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
There will be non-mandatory workshops about cyber security fields that will help you get along with the challenges!
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="170"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
How can I register?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
Check the link in the home section, you may need to know that you can register either only for the CTF competition, or workshops or both!
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="210"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
How about the snacks?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
Thanks to our sponsors, <span class="title-gradient">Shellmates</span> will provide two dinners, two breakfasts and one lunch for the whole event.
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="250"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
Do I have to confirm my attendance?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
You might risk your place if you don’t!
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="290"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
How many members on a team?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="10.7071068 7.05025253 10 6.34314575 4.34314575 12 5.75735931 13.4142136 10 9.17157288 14.2426407 13.4142136 15.6568542 12"></polygon>
</g>
</g>
</svg>
</div>
</div>
</dt>
<dd class="answer hidden mt-10 leading-snug text-md lg:text-xl text-white">
5 members per team.
</dd>
</div>
</div>
<div class="lg:w-full"
data-aos="fade-up"
data-aos-offset="320"
data-aos-duration="1000"
data-aos-easing="ease-in-sine">
<div class="question-and-answer select-none cursor-pointer border-b mx-8 lg:mx-24 my-3 pr-6 py-4 text-sm group">
<dt class="question">
<div class="flex justify-between">
<div class="text-white font-normal text-xl lg:text-2xl">
Is the CTF onsite or should it be played online?
</div>
<div>
<svg fill=currentColor class="question-chevron h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>
<polygon points="9.29289322 12.9497475 10 13.6568542 15.6568542 8 14.2426407 6.58578644 10 10.8284271 5.75735931 6.58578644 4.34314575 8"></polygon>
</g>
</g>
</svg>
<svg fill=currentColor class="question-chevron hidden h-7 block text-white rounded-full p-1" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill=currentColor fill-rule="evenodd">
<g>