:root { --bg: #17130f; --panel: rgba(36, 27, 20, 0.9); --card: rgba(54, 40, 28, 0.92); --line: rgba(240, 219, 184, 0.25); --accent: #d8b37a; --ink: #f5ecdf; --muted: #dac9b0; --font-head: "Prata", serif; --font-body: "Manrope", sans-serif; --font-accent: "Space Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--font-body); background: radial-gradient( circle at 12% 14%, rgba(216, 179, 122, 0.14), transparent 35% ), radial-gradient( circle at 84% 84%, rgba(250, 236, 201, 0.1), transparent 32% ), #17130f; overflow-x: hidden; } body.locked { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.08; background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px ); } .page { position: relative; z-index: 1; } .cover { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, rgba(11, 9, 7, 0.68), rgba(11, 9, 7, 0.93)), url("https://images.unsplash.com/photo-1519741497674-611481863552?w=1200") center/cover no-repeat; transition: opacity 0.6s ease, transform 0.6s ease; } .cover.hidden { opacity: 0; transform: scale(1.02); pointer-events: none; } .ticket { width: min(820px, 100%); border-radius: 18px; border: 1px solid var(--line); background: linear-gradient( 160deg, rgba(216, 179, 122, 0.16), rgba(36, 27, 20, 0.9) ); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45); padding: clamp(1.2rem, 3.2vw, 2rem); } .kicker { font-family: var(--font-accent); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: #e9d4b2; } .cover-title, .hero-title, .section-title, .card-title { margin: 0; font-family: var(--font-head); line-height: 1.08; } .cover-title { font-size: clamp(2.1rem, 6vw, 4.2rem); margin-top: 0.55rem; } .rule { height: 1px; margin: 0.7rem 0 1rem; background: linear-gradient( 90deg, transparent, rgba(216, 179, 122, 0.88), transparent ); } .chip { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px dashed rgba(245, 236, 223, 0.55); border-radius: 999px; padding: 0.34rem 0.7rem; font-family: var(--font-accent); font-size: 0.73rem; text-transform: uppercase; } .open-btn, .map-btn, .copy-btn, .submit-btn, .music-btn, .top-btn { border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.2s ease; } .open-btn { margin-top: 0.9rem; min-height: 46px; padding: 0.75rem 1.18rem; background: linear-gradient(120deg, #d8b37a, #9f7a44); color: #1c140d; font-weight: 700; } .hero { min-height: 88vh; display: grid; align-items: center; background: linear-gradient(180deg, rgba(18, 12, 8, 0.62), rgba(18, 12, 8, 0.9)), url("https://images.unsplash.com/photo-1606216794074-735e91aa2c92?w=1200") center/cover no-repeat; } .hero-inner, .section-inner, .footer-inner { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } .hero-panel, .section-panel { border-radius: 14px; padding: clamp(1.1rem, 3vw, 1.9rem); } .hero-panel { border: 1px solid var(--line); background: rgba(43, 31, 23, 0.72); } .hero-title { margin-top: 0.62rem; font-size: clamp(1.95rem, 5.8vw, 4rem); } .hero-sub { margin: 0.8rem 0; color: #e3d1b7; } .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .count-box { border: 1px solid rgba(245, 236, 223, 0.32); border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-align: center; padding: 0.52rem; } .count-value { display: block; font-family: var(--font-head); font-size: clamp(1.25rem, 3.2vw, 1.95rem); font-weight: 700; transform-origin: center; } .count-value.tick { animation: count-flip 0.22s ease; } .count-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; font-family: var(--font-accent); } section { padding: clamp(2.7rem, 6.8vw, 4.6rem) 0; } .section-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.35); } .section-title { margin-top: 0.48rem; font-size: clamp(1.8rem, 4.6vw, 2.8rem); } .section-rule { height: 1px; margin: 0.7rem 0 1rem; background: linear-gradient( 90deg, rgba(245, 236, 223, 0.08), rgba(245, 236, 223, 0.46), rgba(245, 236, 223, 0.08) ); } .story-grid, .family-grid, .schedule-grid, .gallery-grid, .gift-grid, .rsvp-grid, .wish-list { display: grid; gap: 1rem; } .copy, .meta { color: var(--muted); line-height: 1.72; } .quote { margin: 0.85rem 0 0; border-left: 4px solid var(--accent); border-radius: 9px; background: rgba(216, 179, 122, 0.14); padding: 0.9rem; font-family: var(--font-head); font-size: clamp(1rem, 2.7vw, 1.32rem); } .card, .wish-item { border-radius: 11px; border: 1px solid rgba(245, 236, 223, 0.2); background: var(--card); padding: 0.92rem; } .label { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; font-family: var(--font-accent); color: #e2cda9; } .card-title { margin-top: 0.3rem; font-size: 1.56rem; } .portrait-grid { display: grid; gap: 0.8rem; } .portrait-card { border-radius: 11px; border: 1px solid rgba(245, 236, 223, 0.2); background: var(--card); overflow: hidden; } .portrait-photo { aspect-ratio: 4/5; background-size: cover; background-position: center; } .portrait-pria { background-image: url("https://images.unsplash.com/photo-1459204137123-238c569e22bd?w=400"); } .portrait-wanita { background-image: url("https://images.unsplash.com/photo-1596092882833-4a5417bc7ac7?w=400"); } .portrait-meta { padding: 0.7rem 0.84rem 0.84rem; } .portrait-name { margin: 0.2rem 0 0; } .schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .badge { display: inline-flex; align-items: center; border: 1px solid rgba(216, 179, 122, 0.62); background: rgba(216, 179, 122, 0.14); color: #f0dfc3; border-radius: 999px; padding: 0.28rem 0.64rem; font-family: var(--font-accent); font-size: 0.72rem; text-transform: uppercase; } .map-btn, .copy-btn, .submit-btn, .music-btn, .top-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; padding: 0.58rem 0.92rem; color: #f6efe4; background: #5f4a36; } .map-btn, .submit-btn { color: #1a140d; background: linear-gradient(120deg, #d8b37a, #9f7a44); } .submit-btn { margin-top: 0.84rem; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-item { position: relative; min-height: clamp(168px, 31vw, 252px); border-radius: 11px; border: 1px solid rgba(245, 236, 223, 0.24); background: #6a543c; overflow: hidden; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease, filter 0.45s ease; } .gallery-item:hover img { transform: scale(1.05); filter: contrast(1.08) saturate(1.05); } .gallery-tag { position: absolute; right: 0.55rem; bottom: 0.55rem; font-family: var(--font-accent); font-size: 0.7rem; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 0.24rem 0.5rem; } .field { display: grid; gap: 0.35rem; margin-top: 0.72rem; } .field label { color: #decfb8; font-size: 0.88rem; } .field input, .field select, .field textarea { min-height: 44px; border-radius: 10px; border: 1px solid rgba(245, 236, 223, 0.24); background: rgba(255, 255, 255, 0.06); color: #f5ecdf; padding: 0.56rem 0.72rem; } .field textarea { min-height: 106px; resize: vertical; } .wish-list { max-height: 320px; overflow-y: auto; } .private-card { border-style: dashed; } .private-grid { display: grid; gap: 0.8rem; margin-top: 0.8rem; } .private-code { font-family: var(--font-accent); word-break: break-all; } .private-qr { width: min(136px, 100%); aspect-ratio: 1; border-radius: 10px; object-fit: cover; border: 1px solid rgba(245, 236, 223, 0.26); } .floating { position: fixed; right: 0.86rem; bottom: 1rem; z-index: 40; display: grid; gap: 0.45rem; } .music-btn.playing { color: #1a140d; background: linear-gradient(120deg, #d8b37a, #9f7a44); } .footer { padding: 2rem 0 2.3rem; } .footer-inner { text-align: center; color: #d6c5ab; } .lightbox { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.86); } .lightbox.active { display: grid; } .lightbox img { width: min(900px, 100%); max-height: 88vh; object-fit: contain; border-radius: 12px; } .fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.show { opacity: 1; transform: translateY(0); } .open-btn:hover, .copy-btn:hover, .map-btn:hover, .submit-btn:hover, .music-btn:hover, .top-btn:hover { transform: translateY(-2px); } @keyframes count-flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-82deg); } 100% { transform: rotateX(0deg); } } @media (min-width: 760px) { .story-grid { grid-template-columns: 1.25fr 0.75fr; } .schedule-grid, .gift-grid, .rsvp-grid, .private-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .countdown, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
🎨 Preview Template: Museum Of Us | Kategori: Wedding
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza

Museum of Us • Private Exhibition

The Wedding of Our Dreams

Bersama Kita Wujudkan Mimpi

Curated by Ahmad Rizki & Siti Nurhaliza

Keluarga Besar Rahman Yang Terhormat

Gallery Opening Countdown

Ahmad Rizki & Siti Nurhaliza

Friday, 2026-05-15 - Masjid Al-Ikhlas

00Days
00Hours
00Minutes
00Seconds

Gallery I

Kisah Kami

Kami bertemu pertama kali di kampus dan sejak saat itu hubungan kami terus berkembang hingga akhirnya memutuskan untuk menjalani hidup bersama.

"Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu isteri-isteri dari jenismu sendiri."
Curator A

Ahmad Rizki Suryadi

Nama panggilan: Rizki
Putra dari Bapak Suryadi dan Ibu Siti Aminah

Curator B

Siti Nurhaliza Rahmat

Nama panggilan: Siti
Putri dari Bapak Rahmat dan Ibu Fatimah

Portrait Curator A

Ahmad Rizki Suryadi

Portrait Curator B

Siti Nurhaliza Rahmat

Gallery II

Jadwal Acara

Akad Nikah

Main Hall

Friday, 2026-05-15
09:00 - 11:00
Masjid Al-Ikhlas
Jl. Masjid Raya No. 456, Jakarta Pusat

Buka Peta Akad

Resepsi

Grand Gallery

Friday, 2026-05-15
19:00 - 22:00
Gedung Serbaguna Menteng
Jl. Menteng Raya No. 123, Jakarta Pusat

Buka Peta Resepsi

Gallery IV

Hadiah dan Dukungan

Collection 01

Bank Mandiri

No. Rekening: 1234567890
Atas Nama: Ahmad Siti Wedding

Collection 02

GoPay

No. Rekening: 081234567890
Atas Nama: Ahmad Rizki

Gallery V

RSVP dan Ucapan

Form Kehadiran

Guestbook

Contoh Tamu: Selamat menempuh hidup baru, semoga selalu harmonis.

Gallery VI

Akses Undangan Privat

Gunakan kode ini untuk verifikasi akses tamu.

Kode Undangan
WED2025001
QR Code Undangan

Terima kasih atas doa dan kehadiran Anda untuk Ahmad Rizki & Siti Nurhaliza.

Atas