:root { --color-bg: #fdfdfd; --color-text: #5c5c5c; --color-rose: #d1a3a4; --color-green: #a3b8a2; --color-heading: #7a6e62; --font-heading: 'Sacramento', cursive; --font-body: 'EB Garamond', serif; } body, html { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 18px; scroll-behavior: smooth; overflow-x: hidden; } /* === Cover Splash Screen === */ #cover-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; transition: opacity 1.5s ease-out; } #cover-splash.hidden { opacity: 0; pointer-events: none; } .cover-content { position: relative; } .cover-content .floral-wreath { width: 320px; height: 320px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; animation: bloom 2s ease-out 0.5s forwards; } .cover-text { position: relative; opacity: 0; animation: fadeIn 2s ease-out 1.5s forwards; } .cover-text p { font-size: 1.3rem; margin: 5px 0; } .cover-text h1 { font-family: var(--font-heading); font-size: clamp(3rem, 15vw, 5rem); color: var(--color-heading); font-weight: 400; margin: 0; } #enter-button { background-color: transparent; border: 1px solid var(--color-green); color: var(--color-green); padding: 10px 25px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; border-radius: 50px; cursor: pointer; margin-top: 20px; transition: all 0.3s; opacity: 0; animation: fadeIn 2s ease-out 2.5s forwards; } #enter-button:hover { background-color: var(--color-green); color: var(--color-bg); } /* === Main Content Styling === */ .container { max-width: 700px; margin: 0 auto; padding: 50px 20px; } .floral-bg { position: fixed; width: 200px; z-index: -1; opacity: 0.1; transition: transform 0.8s ease-out; } .floral1 { top: 10%; left: -50px; } .floral2 { top: 50%; right: -60px; transform: scaleX(-1); } .floral3 { bottom: 5%; left: -40px; } section { padding: 40px 0; text-align: center; } .animated { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } .animated.delay-1 { transition-delay: 0.2s; } .animated.delay-2 { transition-delay: 0.4s; } .section-title { font-family: var(--font-heading); font-size: 4rem; font-weight: 400; margin-bottom: 20px; color: var(--color-heading); } .divider-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; } .section-divider { width: 200px; height: auto; opacity: 0.5; margin: 30px auto; text-align: center; } .baby-photo { width: 200px; height: 200px; border-radius: 50%; border: 5px solid var(--color-green); object-fit: cover; margin-top: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .gallery-item { width: 200px; height: 200px; object-fit: cover; } .baby-name { font-family: var(--font-heading); font-size: 3.5rem; color: var(--color-rose); margin: 10px 0; } .parents-name { font-size: 1.5rem; font-style: italic; } .info-card { background: #fafafa; border-left: 5px solid var(--color-green); padding: 30px; margin-top: 20px; text-align: center; border-radius: 0 10px 10px 0; } .info-card ul { list-style: none; padding: 0; font-size: 1.2rem; line-height: 2; } .info-card ul li i { margin-right: 15px; color: var(--color-green); width: 20px; } .btn { display: inline-block; background-color: var(--color-rose); color: var(--color-bg); padding: 12px 25px; font-family: var(--font-body); font-weight: 600; text-decoration: none; border-radius: 50px; margin: 10px 5px; border: none; transition: transform 0.3s; cursor: pointer; } .btn:hover { transform: scale(1.05); } /* [BARU] Countdown */ #countdown { display: flex; justify-content: center; gap: 15px; margin: 20px 0; } .time-box { background-color: #fff; padding: 10px; border-radius: 8px; width: 70px; border: 1px solid #eee; } .time-box span { display: block; font-weight: 700; font-size: 2rem; color: var(--color-heading); } .time-box .label { font-size: 0.8rem; } /* [BARU] Galeri Foto & Lightbox */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; } .gallery-item img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; cursor: pointer; transition: transform 0.3s; } .gallery-item img:hover { transform: scale(1.05); } #lightbox { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; } #lightbox.active { display: flex; } #lightbox img { max-width: 90%; max-height: 80%; border-radius: 5px; } /* [BARU] Buku Tamu & Doa */ #wish-form { max-width: 500px; margin: 20px auto; text-align: left; } .form-group { margin-bottom: 15px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; font-family: var(--font-body); font-size: 1.1rem; } .form-group select { cursor: pointer; } #wish-list { margin-top: 30px; max-height: 300px; overflow-y: auto; padding-right: 10px; } .wish-item { background: #fafafa; border-radius: 10px; padding: 15px; margin-bottom: 10px; text-align: left; border-left: 3px solid var(--color-rose); } .wish-item .wish-name { font-weight: 700; color: var(--color-heading); font-style: italic; } .wish-item .wish-text { margin-top: 5px; } /* [BARU] Music Control */ #music-control { position: fixed; bottom: 20px; right: 20px; z-index: 99; background-color: var(--color-rose); border-radius: 50%; width: 45px; height: 45px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 0.5s; color: var(--color-bg); } #music-control.visible { opacity: 1; } #music-control i { font-size: 1.1rem; } footer { margin-top: 50px; font-size: 1.1rem; font-style: italic; } @keyframes bloom { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
🎨 Preview Template: Taman Doa | Kategori: Aqiqah
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
Akikah Putra Kami: Muhammad Arif
Floral Wreath

Kepada Yth. Keluarga Besar Rahman

Muhammad Arif

Dengan Memohon Ridho Allah SWT

Floral Accent Floral Accent Floral Accent

Bismillah

"Dengan memanjatkan puji syukur kepada Allah SWT atas nikmat yang diberikan"

Foto Muhammad Arif

Dengan rasa syukur yang tak terhingga, kami mengundang Anda untuk turut berbagi kebahagiaan dalam acara Akikah Putra Kami untuk putra/putri kami tercinta:

Muhammad Arif

Anak ke-1 dari Bapak Andi Wijaya & Ibu Sari Dewi

Lahir pada Wednesday, 2026-04-08

Floral Divider

Taman Doa

  • Wednesday, 2026-04-22
  • Pukul 19:00 - 23:00
  • Rumah Keluarga Besar
  • Jl. Senopati No. 88, Jakarta Selatan

Doa Aqiqah:

"Ya Allah, berkahilah anak ini dan jadikanlah dia anak yang sholeh"

Lihat Peta Simpan Tanggal
Floral Divider
Floral Divider

Buku Doa & Konfirmasi Kehadiran

Konfirmasi Kehadiran

Mohon konfirmasi kehadiran Anda untuk membantu persiapan acara yang lebih baik.

Buku Doa

Keluarga Nenek & Kakek

Semoga Muhammad Arif tumbuh menjadi anak yang sholeh/sholehah, cerdas, dan selalu membawa kebahagiaan. Sehat selalu, cucu tersayang!

Floral Divider

Amplop Digital

Doa restu Anda adalah anugerah terindah. Namun jika berkenan memberikan tanda kasih, dapat disalurkan melalui:

GoPay
081234567890
a.n. Ahmad Rizki

Kehadiran dan doa restu Bapak/Ibu/Saudara/i adalah kebahagiaan yang tak ternilai bagi kami.

Keluarga Bapak Andi Wijaya