Berikut prompt final yang bisa kamu gunakan untuk membuat landingpage kopi kenangan.
Prompt:
Buatkan sebuah halaman website HTML untuk "Kopi Kenangan" dengan desain elegan dan responsif. Berikut detail yang harus ada:
1. Struktur Halaman
- Header:
- Logo "Kopi Kenangan" di sebelah kiri.
- Menu navigasi (Home, Tentang Kami, Produk, FAQ, Hubungi Kami).
- Burger menu untuk tampilan mobile.
- Hero Section:
- Background gambar kopi.
- Judul utama "Selamat Datang di Kopi Kenangan".
- Subjudul: "Rasakan cita rasa kopi terbaik dari kami, langsung dari petani hingga ke cangkir Anda".
- Tombol CTA "Lihat Produk" yang mengarah ke bagian produk.
- Tentang Kami Section:
- Judul: "Tentang Kami".
- Paragraf yang menjelaskan Kopi Kenangan dan keunggulannya.
- Produk Section:
- Judul: "Produk Kami".
- Grid produk dengan 3 jenis kopi: Kopi Hitam, Kopi Susu, dan Kopi Latte.
- Setiap produk memiliki gambar, nama, harga, dan tombol "Beli Sekarang".
- Tombol pembelian menambahkan item ke keranjang.
- FAQ Section:
- Judul: "FAQ - Pertanyaan yang Sering Diajukan".
- Daftar pertanyaan yang bisa diklik untuk menampilkan jawaban.
- Checkout & Bubble Chat:
- Keranjang belanja dengan tombol checkout.
- Bubble chat yang bisa diklik untuk mengirim pesanan via WhatsApp.
- Footer:
- Informasi singkat dan hak cipta.
2. Desain & Warna*
- **Warna utama: #3e2a47 (ungu tua), #c17b4f (coklat kopi), #f4f4f4 (abu-abu muda).
- Font: Gunakan Arial, sans-serif.
- Header background: Gambar kopi dari Pexels.
- Produk dengan border radius 10px dan shadow untuk tampilan modern.
- Tata letak responsif:
- Navigasi berubah menjadi dropdown pada layar kecil.
- Produk tersusun dalam grid fleksibel.
3. Fitur Tambahan
- JavaScript untuk menampilkan/menyembunyikan menu burger.
- Fungsi JavaScript untuk menambahkan item ke keranjang dan checkout via WhatsApp.
- Animasi hover pada tombol untuk efek interaktif.
Buatkan HTML, CSS, dan JavaScript yang mengimplementasikan desain dan fitur di atas dengan tampilan profesional.
Inilah hasilnya : https://solehdhea.digivibes.biz.id/kopi-kenangan