Website Cafe Shop

A. Deskripsi

Website ini bertujuan untuk menampilkan informasi tentang sebuah cafe, mencakup menu makanan dan minuman, galeri interior cafe, promo spesial, serta kontak dan lokasi.

B. Halaman (Statis)

1. Home – Pengantar tentang cafe dan suasana uniknya.
2. Menu – Daftar makanan dan minuman dengan harga.
3. Galeri Cafe – Foto interior, eksterior, dan makanan/minuman.
4. Promo & Event – Informasi diskon spesial dan acara yang sedang berlangsung.
5. Kontak & Lokasi – Formulir reservasi dan peta lokasi cafe.

C. Fitur (Interaktivitas JavaScript)

• Slideshow di Halaman Home – Gambar interior cafe berganti secara otomatis/manual.
• Hover Animasi pada Daftar Menu – Saat kursor diarahkan ke makanan/minuman, akan muncul efek highlight dan deskripsi singkat.
• Filter Menu Berdasarkan Kategori – Pengguna dapat memilih kategori (Makanan, Minuman, Dessert).
• 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 cafe dan tagline unik.
• Slideshow suasana cafe dan rekomendasi makanan populer.
• Tombol "Lihat Menu" yang mengarah ke halaman Menu.

2. Menu (contoh)

• Daftar makanan dan minuman dalam grid layout.
• Filter menu berdasarkan kategori (Makanan, Minuman, Dessert).
• Hover effect untuk memperjelas tampilan dan harga menu.

3. Galeri Cafe

• Tampilan grid responsif untuk menampilkan foto suasana cafe.
• Modal pop-up ketika gambar diklik untuk melihat dalam ukuran besar.

4. Promo & Event

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

5. Kontak & Lokasi

• Form reservasi dengan validasi input menggunakan JavaScript.
• Peta lokasi cafe dalam bentuk gambar statis dengan tooltip.

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