-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
341 lines (322 loc) · 17.8 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap-5.2.2-dist/css/bootstrap.css">
<link rel="stylesheet" href="./assets/styles/style.css">
<link rel="icon" type="img/x-con" href="./assets/icon/coding.png">
<title>Web Development Student Club | Belajar pengembangan web bersama komunitas</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-md-8 px-3 sticky-top shadow-sm">
<a class="navbar-brand text-center main-brand-text" href="#">
<img src="./assets/icon/coding.png" alt="web development Student club logo" class="pe-3">
<span class="hide-in-smartphone"><span class="webdev-span">WEBDEV </span>Student Club</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-1 flex-nowrap" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto flex-nowrap">
<a class="nav-link mx-1" href="#about-us-content">Tentang kami</a>
<a class="nav-link mx-1" href="./assets/pages/registration.html">Daftar Anggota Baru</a>
<a class="nav-link mx-1" href="./assets/pages/learning-path.html">Jalur Belajar</a>
<a class="nav-link mx-1" href="./assets/pages/event.html">Event</a>
<a class="nav-link mx-1" href="./assets/pages/careers.html">Karir</a>
</div>
</div>
</div>
</nav>
<!-- <div class="position-fixed" style="z-index: 3;">
<p class="h1">
Hello World
</p>
</div> -->
<main class="">
<!-- first main content -->
<div class="px-sm-8 py-5">
<article class="row">
<section class="col-lg-6 text-lg-start text-xs-center">
<p class="h1-main-content">Maju</p>
<p class="h1-main-content"><span class="growing-text">Berkembang</span></p>
<p class="h1-main-content">Bersama <span class="wsc-text">WDSC</span></p>
<p class="text-muted h5 py-3">Kamu punya ketertarikan di bidang pengembangan web? bergabung besama
kami dan kembangkan skill pengembangan web kamu</p>
<!-- <section class="row">
<p class="col-md-4 text-body text-muted pb-3"><span class="text-dark">Frontend web</span> development</p>
<p class="col-md-4 text-body text-muted pb-3"><span class="text-dark">Backend web</span> development</p>
<p class="col-md-4 text-body text-muted pb-3"><span class="text-dark">Fullstack web</span> Development</p>
</section> -->
<section class="mt-3">
<a href="./assets/pages/registration.html" class="btn btn-wsc mx-2 mt-2">Bergabung</a>
<a href="#about-us-content" class="btn btn-read-more mx-2 mt-2">Baca tentang kami</a>
</section>
</section>
<section class="col-lg-6">
<img src="./assets/illustration/team-spirit-pana-pink.png" alt="" class="hide-in-lg">
</section>
</article>
</div>
<!-- second main content -->
<article class="row px-5 px-md-8" id="about-us-content">
<section class="col-12">
<p class="text-center h1 mt-1 mb-5">Tentang kami</p>
</section>
<div class="row second-main-content">
<section class="col-lg-6">
<img src="./assets/illustration/concept-of-business-team-working-in-different-departments.png"
alt="" class="img-fluid second-main-image">
</section>
<section class="col-lg-5 ms-3">
<p class="h2 mb-4 mt-md-3">Web Development Student Club</p>
<p class="second-main-paragraph">
kami <b>Web Development Student Club</b>,
kami membangun komunitas ini karena kami merasa bahwa akan lebih baik jika kamu berkembang di
lingkungan dan dengan dukungan yang tepat untuk mengembangkan skill kamu
</p>
<p class="second-main-paragraph">
dengan kurikulum yang terstruktur dan mentor yang profesional,
kami dapat membantu kamu mengembangkan skill pengembangan web kamu.
</p>
</p>
</section>
</div>
</article>
<!-- third content -->
<article class="row px-5 px-md-8 py-5 my-5" style="background-color: #FFD372;">
<section class="col-12">
<p class="text-center h1 mt-1 mb-5">Mengapa harus bergabung dengan kami?</p>
</section>
<video width="400px" controls class="mb-5">
<source src="./assets/videos/videoplayback.mp4" type="video/mp4">
</video>
<section class="row">
<!-- content 1 -->
<article class="col-lg-3 col-md-6 col-12 my-md-2">
<div class="card h-100">
<img src="./assets/icon/konten-3-icon-1-meeting.png" class="card-img-top h-100 p-5" alt="...">
<div class=" text-center py-3 px-3">
<p class="card-title h4">Berjejaring</p>
<p class="card-text">Berkoneksi dan berjejaring bersama dengan seluruh pelajar dan
profesional di seluruh indonesa</p>
</div>
</div>
</article>
<!-- content 2 -->
<article class="col-lg-3 col-md-6 col-12 my-2">
<div class="card h-100">
<img src="./assets/icon/konten-3-icon-2-mentor.png" class="card-img-top h-100 p-5" alt="...">
<div class=" text-center py-3 px-3">
<p class="card-title h4">Mentor profesional</p>
<p class="card-text">Mentor profesional yang sudah berpengalaman panjang di industri
pengembangan web</p>
</div>
</div>
</article>
<!-- content 3 -->
<article class="col-lg-3 col-md-6 col-12 my-2">
<div class="card h-100">
<img src="./assets/icon/konten-3-icon-3-projek.png" class="card-img-top h-100 p-5" alt="...">
<div class=" text-center py-3 px-3">
<p class="card-title h4">Proyek nyata</p>
<p class="card-text">Menambah pengalaman dengan mengerjakan proyek dengan level industri
profesional</p>
</div>
</div>
</article>
<!-- content 4 -->
<article class="col-lg-3 col-md-6 col-12 my-2">
<div class="card h-100">
<img src="./assets/icon/konten-3-icon-4-promotion.png" class="card-img-top h-100 p-5" alt="...">
<div class=" text-center py-3 px-3">
<p class="card-title h4">Dukungan karir</p>
<p class="card-text">Dapatkan informasi seputar karir dan tips memulai karir di
bidang pengembangan web.</p>
</div>
</div>
</article>
</section>
</article>
<!-- fourth content -->
<article class="row px-5 px-md-8">
<section class="col-12">
<p class="text-center h1 mt-1 mb-3">Struktur organisasi</p>
<p class="text-center text-muted h4">"Tumbuh bersama dengan saling <span
class="growing-text">berbagi</span> dan <span class="wsc-text">merangkul</span>"</p>
</section>
<!-- struktur organisasi -->
<article class="row mb-5">
<!-- card ketua -->
<section class="col-12 my-5">
<div class="card card-structure-org">
<img src="./assets/icon/man-structure-org-1.png"
class="card-img-top align-self-center structure-org-icon" alt="...">
<div class=" text-center py-3 px-1">
<p class="card-title h4">Fadela Numah Kadenza</p>
<p class="card-text text-muted h5">Ketua</p>
</div>
</div>
</section>
<!-- kepala bagian -->
<section class="col-12 col-lg-4">
<div class="card card-structure-org">
<img src="./assets/icon/man-structure-org-4.png"
class="card-img-top align-self-center structure-org-icon" alt="...">
<div class=" text-center py-3 px-1">
<p class="card-title h4">Muhammad Yusuf Siregar</p>
<p class="card-text text-muted px-5 h5">Kepala Bagian Relasi dan Kerjasama</p>
</div>
</div>
</section>
<section class="col-12 col-lg-4">
<div class="card card-structure-org">
<img src="./assets/icon/man-structure-org-5.png"
class="card-img-top align-self-center structure-org-icon" alt="...">
<div class=" text-center py-3 px-1">
<p class="card-title h4">Ryan Zaputra</p>
<p class="card-text text-muted px-5 h5">Kepala Bagian Pengembangan Kurikulum dan Produk</p>
</div>
</div>
</section>
<section class="col-12 col-lg-4">
<div class="card card-structure-org">
<img src="./assets/icon//man-structur-org-2.png"
class="card-img-top align-self-center structure-org-icon" alt="...">
<div class=" text-center py-3 px-1">
<p class="card-title h4">Arif Nur Iman</p>
<p class="card-text text-muted px-5 h5">Kepala Bagian Pemasaran</p>
</div>
</div>
</section>
</article>
<!-- kepala bagian penutup tag -->
</article>
<!-- struktur organisasi penutup tag -->
<!-- fivth content -->
<article class="row px-5 px-md-8 py-5">
<section class="col-12">
<p class="text-center h1 mt-1 mb-5">Kegiatan kami</p>
</section>
<article class="col-lg-4 col-md-6 col-12 my-2">
<div class="card fivth-content-img">
<img src="./assets/photo/pexels-jane-doan-1024248-visit.jpg" class="card-img-top h-75" alt="...">
<div class=" text-center py-2 px-2">
<p class="card-title h5 text-muted">Company Visit</p>
</div>
</div>
</article>
<article class="col-lg-4 col-md-6 col-12 my-2">
<div class="card fivth-content-img">
<img src="./assets/photo/pexels-fauxels-3183197-discussion.jpg" class="card-img-top h-75" alt="...">
<div class=" text-center py-2 px-2">
<p class="card-title h5 text-muted">Focus Group Discussion</p>
</div>
</div>
</article>
<article class="col-lg-4 col-md-12 my-2">
<div class="card fivth-content-img">
<img src="./assets/photo/pexels-pixabay-159775-exercise.jpg" class="card-img-top h-75" alt="...">
<div class=" text-center py-2 px-2">
<p class="card-title h5 text-muted">Meetup and Learn Together</p>
</div>
</div>
</article>
</article>
<!-- sixth cotnent, FAQ -->
<article class="row mt-2 px-md-8 mb-5 mt-5">
<section class="col-12 text-center my-5">
<p class="h1">FAQ</p>
</section>
<!-- FAQ content -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Apakah komunitas ini terbuka untuk umum?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Ya, komunitas ini terbuka untuk umum, semua kalangan dapat bergabung mulai dari pelajar,
mahasiswa, atau masyarakat umum, yang terpenting adalah
minat kamu di bidang pengembangan web.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Apa saja yang akan saya pelajari ketika mengikuti komunitas ini?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Kamu akan belajar seputar pengembangan web, teknologi yang digunakan, dan perkembangannya di
dunia industri.
untuk melihat lebih detail tentang apa yang akan kamu dapatkan, Kunjungi halaman <a
href="./assets/pages/learning-path.html" style="text-decoration: none; color: pink;">Jalur Belajar</a>.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Apakah kegiatan komunitas akan dilakukan online?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Ya, komunitas ini berfokus pada kegiatan online. namun nantinya akan ada event - event
offile yang menarik yang dapat kamu ikuti
seperti event gathering, workshop, dan lomba.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Apakah kegiatan komunitas ini berbayar?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Seluruh kegiatan komunitas baik yang offline dan online dapat kamu ikuti dengan gratis
</div>
</div>
</div>
</div>
</article>
<!-- seventh content, pendaftaran -->
<article class="row mt-2 px-md-8 px-5 mb-5">
<section class="col-12 text-center" style="background-color: pink; border-radius: 50px;">
<p class="h1 pt-5 pt-5">Tunggu apa lagi?</p>
<p class="h1 py-3">Daftarkan dirimu sekarang!</p>
<a href="./assets/pages/registration.html" class="btn btn-read-more mb-5">Daftar Sekarang</a>
</section>
</article>
</main>
<footer>
<div class="px-sm-3 text-center">
<p class="h6 text-center">
Music :)
</p>
<audio controls autoplay loop>
<source src="./assets/music/ptr-daydream-music.mp3" type="audio/mpeg">
</audio>
</div>
<p class="text-center text-muted h6 p-5" style="margin: auto;">WDSC 2023</p>
</footer>
<script src="./bootstrap-5.2.2-dist/js/bootstrap.js"></script>
</body>
</html>