Website Villa Booking

A. Deskripsi

Website ini bertujuan untuk menampilkan informasi tentang villa atau penginapan, mencakup daftar villa yang tersedia, fasilitas yang ditawarkan, galeri foto, promo spesial, dan kontak pemesanan.

B. Halaman (Statis)

1. Home – Pengantar tentang villa dan suasana penginapan.
2. Daftar Villa – Informasi tentang berbagai pilihan villa beserta harga dan fasilitas.
3. Galeri – Foto interior dan eksterior villa dalam tampilan grid.
4. Promo & Paket Spesial – Informasi diskon dan paket liburan.
5. Kontak & Reservasi – Formulir reservasi dan peta lokasi villa.

C. Fitur (Interaktivitas JavaScript)

• Slideshow di Halaman Home – Gambar villa terbaik berganti secara otomatis/manual.
• Hover Animasi pada Daftar Villa – Saat kursor diarahkan ke villa, akan muncul efek highlight dan deskripsi singkat.
• Filter Villa Berdasarkan Harga dan Fasilitas – Pengguna dapat memilih villa berdasarkan kategori (Harga, Kolam Renang, Pemandangan).
• Efek Expanding untuk Detail Promo – Klik tombol "Lihat Promo" untuk memperluas informasi diskon.
• Form Reservasi dengan Validasi – Memastikan pengguna mengisi semua input sebelum mengirimkan formulir.

D. Detail Implementasi

1. Home

• Header dengan gambar banner villa dan tagline eksklusif.
• Slideshow villa terbaik dengan fitur navigasi manual.
• Tombol "Lihat Villa" yang mengarah ke halaman Daftar Villa.

2. Daftar Villa (contoh)

• Grid layout untuk daftar villa berdasarkan lokasi dan harga.
• Filter villa berdasarkan kategori (misal: Harga, Kolam Renang, Pemandangan Laut).
• Hover effect untuk memperjelas tampilan villa dan harga.

3. Galeri

• Tampilan grid responsif untuk menampilkan foto villa dan fasilitas.
• Modal pop-up ketika gambar diklik untuk melihat dalam ukuran lebih besar.

4. Promo & Paket Spesial

• Daftar promo spesial dalam format kartu.
• Tombol "Lihat Promo" yang memperluas detail promo dengan efek animasi.

5. Kontak & Reservasi

• Form reservasi dengan validasi input menggunakan JavaScript.
• Peta lokasi villa dalam bentuk gambar statis dengan tooltip yang menampilkan detail lokasi.

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 villa dan efek expanding promo harus berfungsi dengan baik.
• Minimal ada 3 fitur interaktif yang berjalan dengan baik (slideshow, filter villa, efek expanding promo, dll.).