-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (198 loc) · 10 KB
/
index.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NAC</title>
<link rel="icon" href="logo/nac.png" type="image/gif" sizes="16x16">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body x-data="data">
<header class="bg-gradient-to-r from-red-900 to-red-700 flex flex-col md:flex-row justify-center items-center p-3 space-x-3 space-y-3">
<a href="#" class="mr-auto"><img src="logo/nac.png" alt="logo" class="h-10"></a>
<template x-for="link in links">
<span>
<a :href="link.href" x-text="link.nama" class="text-gray-50 md:hover:text-gray-900 md:hover:bg-yellow-500 p-3 transition rounded font-medium underline md:no-underline">Pengumuman Kabid</a>
</span>
</template>
</header>
<main class="px-10 md:px-24 py-5 flxe flex-col space-y-10 bg-gray-900">
<div class="flex flex-row justify-center md:justify-end space-x-3">
<span class=""><img src="logo/bem.png" alt="logo" class="h-10"></span>
<span class=""><img src="logo/nk21.png" alt="logo" class="h-10"></span>
<span class=""><img src="logo/agni.png" alt="logo" class="h-10"></span>
</div>
<div class=" h-5 mt-10">
<h1 class="text-yellow-500 font-bold text-xl md:text-2xl lg:text-3xl">
<span id="judul" class="border-b-2 md:border-b-4 border-yellow-50 border-opacity-50"></span>
</h1>
</div>
<div class="flex items-center flex-col-reverse lg:flex-row space-y-6 space-y-reverse">
<div class="w-full lg:w-1/2">
<div class="bg-gradient-to-r from-yellow-700 to-yellow-500 rounded-2xl relative transform -rotate-3 shadow">
<div class="rounded-2xl class bg-gray-800 rounded p-3 transform rotate-3 text-gray-50 shadow">
<span class="bg-gradient-to-r from-yellow-700 to-yellow-500font-bold">National Accounting Challenge (NAC) 2021</span>
adalah kegiatan yang diadakan oleh BEM PKN STAN berupa kompetisi nasional di bidang akuntansi yang diikuti oleh mahasiswa jurusan Akuntansi dari berbagai perguruan tinggi di seluruh Indonesia. Pada tahun ini, National Accounting Challenge (NAC) akan dilaksanakan penuh secara daring untuk adaptasi dalam situasi dan kondisi di tengah pandemi. National Accounting Challenge (NAC) 2021 akan dikombinasikan dengan kegiatan Seminar Nasional dengan narasumber ahli yang akan membahas topik menarik di bidang Akuntansi. Seminar ini akan dilaksanakan secara daring yang akan dibagi dalam beberapa sesi.
</div>
</div>
</div>
<div class="w-full lg:w-1/2 flex justify-center items-center">
<div class="rounded-2xl w-2/3 overflow-hidden shadow-md">
<img src="nac.jpg" alt="person" class=" shadow">
</div>
</div>
</div>
<!-- Timeline -->
<div class="flex flex-col items-center bg-gradient-to-r from-yellow-700 to-yellow-500 -mx-10 md:-mx-24 text-gray-50 py-10">
<h2 class="text-3xl font-bold mb-10">Timeline</h2>
<div class="flex flex-col md:flex-row">
<template x-for="step in timeline">
<div class="flex flex-row md:flex-col items-center relative py-3 md:px-10">
<div class=" bg-gray-50 rounded-full h-6 w-6 mb-3">
<template x-if="(timeline.length) != step.id">
<div class="h-full w-2 md:w-full md:h-2 bg-gray-50 absolute transform translate-y-3 translate-x-2 md:translate-y-2 md:translate-x-3"></div>
</template>
</div>
<div class="flex flex-col ml-3">
<div x-text="step.nama" class="font-bold text-xl -mb-2"></div>
<div x-text="step.tgl" class="text-sm"></div>
</div>
</div>
</template>
</div>
</div>
<!-- Grouping with WA -->
<div class=" flex flex-col space-y-5">
<!-- Kebutuhan Panitia -->
<div class="text-center"><h2 class="font-bold text-gray-50 text-3xl">Kebutuhan Panitia</h2></div>
<div class="flex flex-col space-y-6">
<!-- for bidang -->
<template x-for="bidang in panitia">
<div class=" shadow rounded-2xl bg-gradient-to-r from-red-900 to-red-700 p-3">
<!-- Nama Bidang -->
<h3 x-text="bidang.nama" class="text-2xl font-semi-bold text-gray-50"></h3>
<h4 class="text-sm text-gray-50">
Kepala Divisi :
<span x-text="bidang.kabid"></span>
-
<a :href="bidang.link" x-text="bidang.wa" class="underline"></a>
</h4>
<!-- for Staf Bidang -->
<template x-for="staf in bidang.staf" :key="staf.id">
<div
class="border border-yellow-700 rounded-lg shadow-lg hover:shadow-xl bg-gray-800 cursor-pointer mt-3"
@click=" staf.show = !staf.show"
@click.outside=" staf.show = false"
>
<div class="m-3 flex flxe-row justify-between items-center">
<h3 class="text-gray-50 font-bold text-xl md:text-lg" x-text="staf.nama"></h3>
<div>
<img
src="arrow.png" alt="arrow"
class="h-4 transform transition"
:class="staf.show ? 'rotate-90' : 'rotate-0' ">
</div>
</div>
<div x-show="staf.show"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-10"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-10"
class="p-3 text-gray-50">
<ol>
<li><span x-text="staf.tugas" class="bg-gradient-to-r from-yellow-700 to-yellow-500 font-bold"></span></li>
<li>Formasi : <span x-text="staf.formasi"></span> orang</li>
<li>Tugas : </li>
<template x-for="fungsi in staf.fungsi">
<li> - <span x-text="fungsi"></span></li>
</template>
<template x-if="staf.nama == 'Staf Web Developer'">
<div>
<li>
Kebutuhan : UI/UX Designer, Frontend Web Developer, dan Backend Web Developer
</li>
<li>
Kualifikasi UI/UX Designer : Minimal menguasai desain grafis
</li>
</div>
</template>
</ol>
</div>
</div>
</template>
</div>
</template>
</div>
<!-- End of Posisi -->
<!-- Penutup -->
<div class="flex flex-col items-center lg:flex-row space-y-6">
<div class="w-full lg:w-1/2 flex justify-center items-center">
<div class="rounded-2xl w-2/3 overflow-hidden shadow-md">
<img src="img-1.jpg" alt="person" class=" shadow">
</div>
</div>
<div class="w-full lg:w-1/2 text-2xl text-gray-50">
<div class="text-center">
"Jangan lewatkan kesempatan untuk menjadi bagian dari <span class="bg-gradient-to-r from-yellow-700 to-yellow-500">NAC 2021</span> !"
</div>
<div class="flex justify-center mt-10">
<a href="https://forms.gle/JRx585RkBU34Fcq38" class="py-2 px-3 rounded-full shadow-lg hover:shadow-xl bg-gradient-to-r from-yellow-700 to-yellow-500"> Daftar sekarang </a>
</div>
</div>
</div>
<!-- WA CP with sticky class -->
<div class="sticky bottom-20 self-end -mr-8 md:-mr-16">
<a href="https://wa.me/6282337470677"><image src="logo/whatsapp.png" class="h-6 md:h-10"></a>
</div>
</div>
</main>
<footer class="flex flex-col md:flex-row justify-between items-center p-3 bg-gray-900 pt-10 space-y-1">
<div class="text-gray-50 text-sm">Developed by PDD NAC 2021</div>
<div class="flex flex-row">
<div class="text-gray-50">
<a href="https://instagram.com/nac_idn" target="_BLANK" class="flex items-center space-x-1">
<span class="rounded-full flex justify-center items-center bg-gray-50 p-1">
<img src="logo/instagram.png" alt="" class="h-3">
</span>
<span>@nac_idn</span>
</a>
</div>
<div class="text-gray-50 ml-3">
<a href="https://twitter.com/NAC_idn?s=20" target="_BLANK" class="flex items-center space-x-1">
<span class="rounded-full flex justify-center items-center bg-gray-50 p-1">
<img src="logo/twitter.png" alt="" class="h-3">
</span>
<span>@nac_idn</span>
</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
<script src="data.js"></script>
<script>
new TypeIt("#judul", {
speed: 75,
deleteSpeed: 40,
lifeLike: true,
cursor: true,
cursorSpeed: 1000,
loopDelay: 2500,
loop: true
})
.type('OPREC Agni Mandala 3', {delay:2000})
.delete('20', {delay:500})
.type("National Acounting", {delay:200})
.move(-8)
.type('c', {delay:50})
.move(9)
.type(' Challenge.')
.go();
document.addEventListener('alpine:init', () => {
Alpine.data('data', () => (data))
})
</script>
</body>
</html>