:root { --bg: #0f121c; --navy: #1d2740; --blue: #4d7ef2; --sky: #8fc0ff; --gold: #d8b471; --text: #eef3ff; --muted: #c3d0e5; --line: rgba(238, 243, 255, 0.24); --panel: rgba(24, 34, 56, 0.88); --card: rgba(32, 44, 70, 0.9); --font-head: "DM Serif Display", serif; --font-body: "Manrope", sans-serif; --font-accent: "Space Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); font-family: var(--font-body); background: radial-gradient( circle at 18% 16%, rgba(143, 192, 255, 0.2), transparent 34% ), radial-gradient( circle at 82% 18%, rgba(77, 126, 242, 0.22), transparent 34% ), linear-gradient(180deg, #0a0d14 0%, #12192a 52%, #1a2238 100%); min-height: 100vh; overflow-x: hidden; } body.locked { overflow: hidden; } body.locked .floating { opacity: 0; visibility: hidden; pointer-events: none; } body:not(.locked) .floating { opacity: 1; visibility: visible; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07; background-image: radial-gradient( circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px ); background-size: 3px 3px; } .page { position: relative; z-index: 1; } .cover { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, rgba(8, 10, 14, 0.84), rgba(8, 10, 14, 0.97)), url("https://images.unsplash.com/photo-1519741497674-611481863552?w=1200") center/cover no-repeat; transition: opacity 0.7s ease, transform 0.7s ease; } .cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 40%, rgba(143, 192, 255, 0.16), rgba(0, 0, 0, 0.62) 64% ); pointer-events: none; } .cover.hidden { opacity: 0; transform: scale(1.02); pointer-events: none; } .showcase-stage { position: relative; width: min(940px, calc(100% - 1.4rem)); min-height: 520px; } .carousel-wrap { position: absolute; left: 50%; top: 48%; width: min(620px, 100%); height: min(390px, 54vh); transform: translate(-50%, -50%); perspective: 1300px; } .carousel-orbit { position: absolute; inset: 0; transform-style: preserve-3d; animation: orbit-spin 14s linear infinite; } .cover.reacting .carousel-orbit { animation-duration: 2.1s; } .carousel-card { position: absolute; left: 50%; top: 54%; width: 170px; height: 240px; transform-style: preserve-3d; border-radius: 16px; border: 1px solid rgba(238, 243, 255, 0.34); background: linear-gradient( 160deg, rgba(143, 192, 255, 0.42), rgba(46, 73, 128, 0.84) ); box-shadow: 0 18px 24px rgba(0, 0, 0, 0.35); backface-visibility: hidden; overflow: hidden; display: grid; align-items: end; } .carousel-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 45%), radial-gradient( circle at 30% 28%, rgba(255, 255, 255, 0.2), transparent 42% ); pointer-events: none; } .carousel-card::after { content: ""; position: absolute; inset: 12px; z-index: 3; border-radius: 10px; border: 1px dashed rgba(238, 243, 255, 0.28); pointer-events: none; } .card-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .card-caption { position: relative; z-index: 2; margin: 0.55rem; border-radius: 9px; border: 1px solid rgba(238, 243, 255, 0.24); background: rgba(10, 15, 25, 0.52); padding: 0.34rem 0.42rem; font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; } .card-a { transform: translate(-50%, -50%) rotateY(0deg) translateZ(220px); } .card-b { transform: translate(-50%, -50%) rotateY(72deg) translateZ(220px); } .card-c { transform: translate(-50%, -50%) rotateY(144deg) translateZ(220px); } .card-d { transform: translate(-50%, -50%) rotateY(216deg) translateZ(220px); } .card-e { transform: translate(-50%, -50%) rotateY(288deg) translateZ(220px); } .carousel-base { position: absolute; left: 10%; right: 10%; bottom: 7%; height: 22%; border-radius: 999px; border: 1px solid rgba(238, 243, 255, 0.3); background: radial-gradient( circle at 50% 14%, rgba(238, 243, 255, 0.34), transparent 56% ), linear-gradient(180deg, #2a3f67, #1b2843); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.3), 0 18px 28px rgba(0, 0, 0, 0.44); } .spot-ring { position: absolute; left: 20%; right: 20%; bottom: 2.5%; height: 15%; border-radius: 999px; background: radial-gradient( circle at 50% 40%, rgba(143, 192, 255, 0.34), rgba(143, 192, 255, 0.05) 65%, transparent 70% ); filter: blur(1px); } .switch-btn { position: absolute; right: 4%; top: 8%; width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(238, 243, 255, 0.42); background: radial-gradient( circle at 30% 30%, rgba(255, 255, 255, 0.34), rgba(82, 128, 228, 0.78) 65% ), linear-gradient(180deg, #567fd5, #32549b); color: #eef3ff; display: grid; place-items: center; box-shadow: 0 14px 20px rgba(0, 0, 0, 0.35); cursor: pointer; z-index: 9; animation: switch-pulse 2.1s ease-in-out infinite; } .switch-btn i { font-size: 1.1rem; } .switch-btn.used { animation: none; transform: scale(0.92); opacity: 0.82; } .start-hint { position: absolute; left: 50%; top: 76%; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.52rem 0.78rem; border-radius: 999px; border: 1px solid rgba(238, 243, 255, 0.48); background: rgba(18, 26, 42, 0.72); color: rgba(238, 243, 255, 0.95); font-size: 0.8rem; font-family: var(--font-accent); letter-spacing: 0.04em; white-space: nowrap; transition: opacity 0.35s ease, transform 0.35s ease; animation: start-hint-breathe 1.9s ease-in-out infinite; } .cover.revealed .start-hint { opacity: 0; transform: translateX(-50%) translateY(8px); } .spark { position: absolute; inset: 0; pointer-events: none; z-index: 10; } .spark span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient( circle, #ffffff, #9bc9ff 70%, transparent 80% ); opacity: 0; animation: spark-fly 0.86s ease forwards; } .cover.reacting .carousel-wrap { filter: saturate(1.2) brightness(1.1); } .invite-card { position: absolute; left: 50%; top: 56%; transform: translate(-50%, 22px) scale(0.96); width: min(760px, calc(100% - 0.5rem)); border-radius: 18px; border: 1px solid rgba(238, 243, 255, 0.32); background: linear-gradient( 160deg, rgba(143, 192, 255, 0.26), rgba(22, 33, 56, 0.94) 56%, rgba(12, 18, 32, 0.96) ); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48); backdrop-filter: blur(8px); padding: clamp(1.1rem, 3.2vw, 2rem); opacity: 0; transition: opacity 0.58s ease, transform 0.58s ease; z-index: 7; } .invite-card.revealed { opacity: 1; transform: translate(-50%, 0) scale(1); top: 15%; } .kicker { font-family: var(--font-accent); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; } .cover-title, .hero-title, .section-title, .card-title { margin: 0; font-family: var(--font-head); line-height: 1.08; } .cover-title { margin-top: 0.72rem; font-size: clamp(2rem, 6.3vw, 4rem); } .rule { height: 1px; margin: 0.76rem 0 1rem; background: linear-gradient( 90deg, transparent, rgba(143, 192, 255, 0.88), transparent ); } .chip { display: inline-flex; align-items: center; gap: 0.42rem; border: 1px dashed rgba(238, 243, 255, 0.54); border-radius: 999px; padding: 0.34rem 0.74rem; font-family: var(--font-accent); font-size: 0.74rem; 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.22s ease; } .open-btn { margin-top: 0.95rem; min-height: 46px; padding: 0.78rem 1.2rem; background: linear-gradient(120deg, #8fc0ff, #507fe7); color: #071223; font-weight: 700; opacity: 0.45; pointer-events: none; } .open-btn.ready { opacity: 1; pointer-events: auto; animation: open-cta-pulse 1.7s ease-in-out infinite; } .open-hint { margin: 0.7rem 0 0; color: rgba(238, 243, 255, 0.9); font-size: 0.9rem; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; } .open-hint.show { opacity: 1; transform: translateY(0); } .hero { min-height: 88vh; display: grid; align-items: center; background: linear-gradient(180deg, rgba(8, 11, 18, 0.68), rgba(8, 11, 18, 0.92)), 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: 16px; padding: clamp(1.15rem, 3.2vw, 2rem); } .hero-panel { border: 1px solid rgba(238, 243, 255, 0.3); background: rgba(20, 29, 46, 0.74); } .hero-title { margin-top: 0.64rem; font-size: clamp(2rem, 6vw, 4.1rem); } .hero-sub { margin: 0.84rem 0; color: rgba(238, 243, 255, 0.92); } .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .count-box { border: 1px solid rgba(238, 243, 255, 0.3); border-radius: 12px; background: rgba(238, 243, 255, 0.08); text-align: center; padding: 0.54rem; } .count-value { display: block; font-family: var(--font-head); font-size: clamp(1.25rem, 3.2vw, 1.95rem); font-weight: 700; } .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.9rem, 7.2vw, 4.9rem) 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.5rem; font-size: clamp(1.82rem, 4.8vw, 2.95rem); } .section-rule { height: 1px; margin: 0.74rem 0 1rem; background: linear-gradient( 90deg, rgba(238, 243, 255, 0.08), rgba(143, 192, 255, 0.52), rgba(238, 243, 255, 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.75; } .quote { margin: 0.9rem 0 0; border-left: 4px solid var(--sky); border-radius: 10px; background: rgba(143, 192, 255, 0.14); padding: 0.92rem; font-family: var(--font-head); font-size: clamp(1.02rem, 2.7vw, 1.36rem); } .card, .wish-item { border-radius: 12px; border: 1px solid rgba(238, 243, 255, 0.22); background: var(--card); padding: 0.95rem; } .portrait-grid { display: grid; gap: 0.8rem; } .portrait-card { border-radius: 12px; border: 1px solid rgba(238, 243, 255, 0.22); 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.85rem 0.85rem; } .portrait-name { margin: 0.2rem 0 0; } .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-accent); color: #cfe2ff; } .card-title { margin-top: 0.3rem; font-size: 1.58rem; } .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(143, 192, 255, 0.64); background: rgba(143, 192, 255, 0.16); color: #deebff; border-radius: 999px; padding: 0.3rem 0.66rem; 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.44rem; padding: 0.6rem 0.95rem; color: #eff6ff; background: #3a4b6b; } .map-btn, .submit-btn { color: #071223; background: linear-gradient(120deg, #8fc0ff, #507fe7); } .submit-btn { margin-top: 0.86rem; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-item { position: relative; min-height: clamp(170px, 31vw, 255px); border-radius: 12px; border: 1px solid rgba(238, 243, 255, 0.24); background: #44506a; 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.08); } .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.74rem; } .field label { color: #d4dfef; font-size: 0.88rem; } .field input, .field select, .field textarea { min-height: 44px; border-radius: 10px; border: 1px solid rgba(238, 243, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #eef4ff; padding: 0.58rem 0.74rem; } .field textarea { min-height: 108px; 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(238, 243, 255, 0.26); } .floating { position: fixed; right: 0.86rem; bottom: 1rem; z-index: 40; display: grid; gap: 0.45rem; transition: opacity 0.25s ease, visibility 0.25s ease; } .music-btn.playing { color: #071223; background: linear-gradient(120deg, #8fc0ff, #507fe7); } .footer { padding: 2rem 0 2.38rem; } .footer-inner { text-align: center; color: #d3dff3; } .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 orbit-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes switch-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes spark-fly { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.25); } } @keyframes count-flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-82deg); } 100% { transform: rotateX(0deg); } } @keyframes open-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 192, 255, 0.08); } 50% { box-shadow: 0 0 0 10px rgba(143, 192, 255, 0.22); } } @keyframes start-hint-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 243, 255, 0.05); } 50% { box-shadow: 0 0 0 8px rgba(238, 243, 255, 0.14); } } @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: 640px) { .showcase-stage { min-height: 430px; } .carousel-wrap { height: min(300px, 42vh); transform: translate(-50%, -54%); } .carousel-card { width: 132px; height: 188px; } .card-a { transform: translate(-50%, -50%) rotateY(0deg) translateZ(162px); } .card-b { transform: translate(-50%, -50%) rotateY(72deg) translateZ(162px); } .card-c { transform: translate(-50%, -50%) rotateY(144deg) translateZ(162px); } .card-d { transform: translate(-50%, -50%) rotateY(216deg) translateZ(162px); } .card-e { transform: translate(-50%, -50%) rotateY(288deg) translateZ(162px); } .switch-btn { width: 72px; height: 72px; right: 2.5%; top: 5%; } .invite-card { width: calc(100% - 0.6rem); top: 47%; } .start-hint { top: 79%; font-size: 0.72rem; padding: 0.45rem 0.64rem; max-width: calc(100% - 1rem); white-space: normal; text-align: center; justify-content: center; } .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: Carousel Showcase | Kategori: Wedding
← Kembali ke Gallery ✨ Daftar untuk Menggunakan
The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza

Klik tombol bintang untuk memulai Carousel Showcase

Carousel Showcase

The Wedding of Our Dreams

Bersama Kita Wujudkan Mimpi

Dipersembahkan untuk Ahmad Rizki & Siti Nurhaliza

Keluarga Besar Rahman Yang Terhormat

Showcase aktif. Klik Lihat Undangan.

Showtime Countdown

Ahmad Rizki & Siti Nurhaliza

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

00Days
00Hours
00Minutes
00Seconds
Chapter 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."
Lead One

Ahmad Rizki Suryadi

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

Lead Two

Siti Nurhaliza Rahmat

Nama panggilan: Siti
Putri dari Bapak Rahmat dan Ibu Fatimah

Portrait Lead One

Ahmad Rizki Suryadi

Portrait Lead Two

Siti Nurhaliza Rahmat

Chapter II

Jadwal Acara

Akad Nikah

Main Event

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

Buka Peta Akad

Resepsi

Reception

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

Buka Peta Resepsi
Chapter IV

Hadiah dan Dukungan

Showcase Vault A

Bank Mandiri

No. Rekening: 1234567890
Atas Nama: Ahmad Siti Wedding

Showcase Vault B

GoPay

No. Rekening: 081234567890
Atas Nama: Ahmad Rizki

Chapter V

RSVP dan Ucapan

Form Kehadiran

Guestbook

Contoh Tamu: Selamat menempuh hidup baru, semoga selalu harmonis.
Chapter 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