Website Kursus Musik

A. Deskripsi

Website ini berisi informasi tentang kursus musik yang ditawarkan, termasuk daftar alat musik yang dapat dipelajari, profil instruktur, jadwal kursus, dan kontak.

B. Halaman (Statis)

1. Home – Pengantar tentang kursus musik dan alat musik yang tersedia.
2. Kelas Musik – Daftar alat musik yang bisa dipelajari (gitar, piano, drum, dll.).
3. Jadwal Kursus – Informasi jadwal kelas yang tersedia.
4. Instruktur – Profil pengajar dengan pengalaman mereka.
5. Pendaftaran – Formulir pendaftaran kursus (tanpa backend).

C. Fitur (Interaktivitas JavaScript)

• Audio Player Interaktif – Pengguna bisa mendengar contoh suara alat musik dengan menekan tombol "Dengarkan".
• Hover Animasi pada Daftar Kelas – Saat kursor diarahkan ke kelas musik, akan muncul deskripsi singkat.
• Filter Berdasarkan Jenis Alat Musik – Pengguna dapat menyaring daftar kelas berdasarkan jenis alat musik (senar, tiup, perkusi).
• Efek Expanding untuk Profil Instruktur – Klik tombol "Lihat Profil" untuk membuka/mengurangi detail instruktur.
• Form Pendaftaran dengan Validasi – Memastikan pengguna mengisi semua input sebelum mengirimkan formulir.

D. Detail Implementasi

1. Home

• Header dengan banner kursus musik dan tagline inspiratif.
• Gambar dan deskripsi singkat tentang berbagai alat musik yang tersedia.
• Tombol "Pelajari Sekarang" yang mengarah ke halaman Kelas Musik.

2. Kelas Musik (contoh)

• Grid layout untuk daftar kelas berdasarkan alat musik.
• Tombol "Dengarkan" yang memainkan suara alat musik menggunakan JavaScript Audio API.
• Filter alat musik berdasarkan kategori.

3. Jadwal Kursus

• Tabel berisi jadwal kursus dengan efek hover pada setiap baris.
• Efek transisi saat memilih jenis kursus.

4. Instruktur

• Daftar profil pengajar dalam format kartu.
• Tombol "Lihat Profil" yang memperluas detail instruktur dengan efek animasi.

5. Pendaftaran

• Form pendaftaran kursus dengan validasi input menggunakan JavaScript.
• Tombol "Kirim" yang menampilkan notifikasi sukses (tanpa backend).

E. Syarat yang Harus Dipenuhi

• Minimal memiliki 5 halaman HTML yang saling terhubung.
• Menggunakan CSS Grid atau Flexbox untuk tampilan yang rapi dan responsif.
• Navigasi antar halaman harus jelas dan mudah digunakan.
• Filter alat musik dan efek expanding profil instruktur harus berfungsi dengan baik.
• Minimal ada 3 fitur interaktif yang berjalan dengan baik (audio player, filter, efek expanding, dll.).