Website Wisata Kota

A. Deskripsi

Website ini bertujuan untuk memberikan informasi mengenai tempat wisata di suatu kota, mencakup destinasi populer, kuliner khas, galeri foto, dan kontak wisata.

B. Halaman (Statis)

1. Home – Ringkasan tempat wisata utama dan highlight destinasi terbaik.
2. Destinasi – Informasi detail tentang tempat wisata (alam, sejarah, budaya).
3. Kuliner Lokal – Daftar makanan khas daerah dengan deskripsi dan gambar.
4. Galeri Foto – Koleksi foto tempat wisata dalam tampilan grid.
5. Kontak & Lokasi – Informasi kontak dinas pariwisata dan peta lokasi wisata.

C. Fitur (Interaktivitas JavaScript)

• Image Slider di Halaman Home – Menampilkan tempat wisata unggulan dalam format carousel otomatis/manual.
• Hover Animasi pada Destinasi Wisata – Saat kursor diarahkan ke gambar destinasi, muncul deskripsi singkat.
• Filter Destinasi Berdasarkan Kategori – Pengguna dapat memilih kategori (alam, sejarah, budaya) untuk menyaring daftar wisata.
• Tooltip Peta Wisata – Saat pengguna mengarahkan kursor ke ikon lokasi di peta, akan muncul informasi singkat tentang tempat tersebut.
• Smooth Scrolling untuk navigasi antar bagian dalam halaman.

D. Detail Implementasi

1. Home

• Header dengan gambar banner kota dan tagline wisata.
• Carousel dengan destinasi populer dan highlight event wisata.
• Bagian "Kenapa Harus ke Kota Ini?" dengan ikon interaktif.

2. Destinasi (contoh)

• Grid layout berisi daftar tempat wisata dengan gambar, nama, dan kategori.
• Filter berdasarkan kategori wisata (Alam, Budaya, Sejarah).
• Hover effect pada gambar destinasi untuk menampilkan deskripsi singkat.

3. Kuliner Lokal

• Daftar makanan khas dalam format kartu dengan animasi saat di-scroll.
• Tombol "Lihat Detail" yang memperluas informasi tentang makanan khas.

4. Galeri Foto

• Tampilan grid responsif untuk menampilkan foto tempat wisata.
• Modal pop-up ketika gambar diklik untuk menampilkan gambar dalam ukuran lebih besar.

5. Kontak & Lokasi

• Form kontak dengan validasi input menggunakan JavaScript.
• Peta kota statis dengan tooltip yang muncul saat kursor diarahkan ke ikon lokasi wisata.

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 destinasi harus berfungsi dengan baik menggunakan JavaScript.
• Minimal ada 3 fitur interaktif yang berfungsi (carousel, hover effect, tooltip peta, dll.).