🌸 Garden Birthday Letter

Template Web Greeting Card Sederhana & Simpel

---

📖 Deskripsi

Project ini adalah template website ucapan ulang tahun dengan tema taman bunga. Seluruh kode (HTML, CSS, dan JavaScript) berada dalam satu file index.html untuk memudahkan pengelolaan dan kustomisasi aset.

---

✨ Fitur

• Interaksi Bunga: Animasi bunga mekar dan aktivasi audio pada interaksi pertama.
• Partikel Animasi: Efek kelopak bunga yang berguguran di latar belakang secara dinamis.
• Pesan Interaktif: Pop-up pesan yang dapat dikustomisasi melalui klik pada elemen kuncup bunga.
• Layout Responsif: Desain yang telah dioptimalkan untuk perangkat mobile dan desktop.

---

🚀 Panduan Penggunaan

Ikuti langkah-langkah di bawah ini untuk menyesuaikan isi website:

1. Persiapan File

Ada dua cara untuk mendapatkan file proyek ini:

• Cara Mudah: Unduh dalam bentuk ZIP melalui tombol Code di GitHub, lalu ekstrak foldernya.
• Cara Git: Gunakan perintah git clone https://github.com/bintangyow/garden-hbd.git melalui terminal.

2. Cara Melihat Hasil (Preview)

Untuk melihat tampilan website di laptop/komputermu:

• Cara Paling Mudah: Masuk ke folder proyek, lalu Klik dua kali (Double Click) pada file index.html. Browser (Chrome/Edge/Safari) akan otomatis terbuka dan menampilkan hasilnya.
• Cara Programmer (Rekomendasi): Jika kamu menggunakan VS Code, instal ekstensi Live Server. Setelah itu, klik kanan pada file index.html dan pilih Open with Live Server. Keuntungannya, tampilan di browser akan otomatis berubah setiap kali kamu menyimpan (Save) editan kodenya.

3. Cara Mengubah Isi (Kustomisasi)

Kamu bisa mengubah teks, gambar, dan musik dengan langkah berikut:

1. Buka Editor: Klik kanan file index.html > Open With > Pilih editor (misal: VS Code, Sublime Text, atau Notepad).
2. Cari Teks: Tekan Ctrl + F (atau Cmd + F), cari tanda <!-- GANTI DI SINI -->.
   • Ganti teks di dalam kurung kotak [...] dengan pesanmu sendiri.
   • Penting: Jangan hapus tanda kutip atau kode di sekitarnya.
3. Simpan: Tekan Ctrl + S untuk menyimpan perubahan.
4. Cek Hasil: Kembali ke browser tempat kamu membuka index.html tadi, lalu tekan F5 (Refresh).

4. Ganti Gambar & Musik

• Gambar: Cari file lukisan.jpg di folder, hapus, lalu masukkan gambar barumu dan beri nama yang sama persis (lukisan.jpg).
• Musik: Lakukan hal yang sama untuk file tt.mp3. Hapus file lama, masukkan lagu baru, dan beri nama tt.mp3.
• Tips: Jika format file kamu .png atau .wav, kamu harus mengubah kodenya di dalam index.html agar sesuai.

5. Menampilkan Website Secara Online

Jika sudah siap dibagikan ke teman:

• Buka situs Netlify Drop.
• Tarik & Lepas (Drag & Drop) folder proyek ini ke kotak yang tersedia.
• Tunggu beberapa detik, Netlify akan memberikan link unik (misal: happy-birthday-user.netlify.app) yang bisa kamu kirim ke temanmu!

---

📂 Struktur File

├── index.html            # File utama (Struktur, Gaya, & Logika)
├── lukisan.jpg           # File gambar (Background)
├── tt.mp3                # File audio (Musik)
└── README.md             # Dokumentasi panduan

---

Have Fun.