Website Panduan Memasak

A. Deskripsi

Website ini berisi resep dan panduan memasak berbagai hidangan, mencakup makanan utama, makanan ringan, dan minuman. Pengguna dapat melihat langkah-langkah memasak dalam format teks maupun video (statis).

B. Halaman (Statis)

1. Home – Rekomendasi resep terbaru dan terpopuler.
2. Makanan Berat – Daftar resep makanan utama seperti nasi goreng, rendang, dll.
3. Makanan Ringan – Resep camilan seperti kue dan gorengan.
4. Minuman – Resep minuman dingin dan hangat.
5. Tips Memasak – Panduan dasar memasak untuk pemula.

C. Fitur (Interaktivitas JavaScript)

• Slideshow Resep Populer – Gambar-gambar resep terbaik berganti secara otomatis/manual di halaman Home.
• Hover Animasi pada Resep – Saat kursor diarahkan ke resep, akan muncul highlight dan deskripsi singkat.
• Filter Resep Berdasarkan Kategori – Memungkinkan pengguna memilih resep berdasarkan kategori (misal: makanan vegetarian, pedas, manis).
• Efek Expanding untuk Langkah-Langkah Memasak – Pengguna bisa mengklik langkah-langkah resep untuk melihat detailnya.
• Audio Player untuk Narasi Resep (Opsional) – Memainkan rekaman suara penjelasan resep saat tombol play ditekan.

D. Detail Implementasi

1. Home

• Header dengan banner rekomendasi resep hari ini.
• Slideshow makanan terbaik di minggu ini.
• Tombol "Jelajahi Resep" yang mengarah ke halaman kategori makanan.

2. Makanan

• Daftar makanan utama dalam grid layout dengan gambar dan nama resep.
• Filter berdasarkan bahan utama atau tingkat kesulitan memasak.
• Hover effect untuk menampilkan preview bahan makanan.

3. Minuman

• Resep minuman dengan tampilan kartu interaktif.
• Efek transisi antar kategori (minuman panas/dingin).

4. Resep Memasak / Membuat (contoh)

• Foto masakan serta daftar bahan-bahan dengan efek highlight saat mouse hover.
• Langkah-langkah dengan efek accordion untuk melihat detail langkah.
• Audio narasi memasak.

5. Tips Memasak

• Daftar teknik memasak dalam format accordion/dropdown.
• Simulasi "timer memasak" sederhana dengan JavaScript.

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 dan efek expanding pada langkah-langkah memasak harus berfungsi dengan baik menggunakan JavaScript.
• Minimal ada 3 fitur interaktif yang berjalan dengan baik (slideshow, filter resep, efek expanding langkah memasak, dll.).