Demo Template - The Marauders Map

/* === Gaya Dasar & Global === */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Lora', serif; background-color: #f0e8d9; } /* === Halaman Cover Peta === */ #cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f3e9d8; background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); z-index: 9999; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1s ease-in-out; } #cover.is-hidden { opacity: 0; pointer-events: none; } #cover .prompt { font-family: 'Cinzel', serif; font-size: 1.2rem; color: #6b5a4b; border: 2px solid #6b5a4b; padding: 10px 20px; opacity: 1; transition: opacity 0.5s; } #cover.is-revealing .prompt { opacity: 0; } .magic-words { font-family: 'Lora', serif; font-style: italic; font-size: 1.5rem; color: #4e4034; position: absolute; } .magic-words span { opacity: 0; } #cover.is-revealing .magic-words span { animation: fadeIn 0.8s forwards; } #cover.is-revealing .magic-words span:nth-child(2) { animation-delay: 0.8s; } #cover.is-revealing .magic-words span:nth-child(3) { animation-delay: 1.6s; } #cover.is-revealing .magic-words span:nth-child(4) { animation-delay: 2.4s; } #cover.is-revealing .magic-words span:nth-child(5) { animation-delay: 3.2s; } @keyframes fadeIn { to { opacity: 1; } } /* === Kontainer Peta Utama === */ .map-container { position: relative; width: 100%; height: 100%; } #map-bg { width: 100%; height: 100%; object-fit: contain; object-position: right center; opacity: 0; transition: opacity 1s ease-in; } .map-container.revealed #map-bg { opacity: 1; } @keyframes drawPath { to { stroke-dashoffset: 0; } } /* === Titik Interaktif (Jejak Kaki) === */ .map-marker { position: absolute; background: none; border: none; cursor: pointer; transform: translate(-50%, -50%); width: 100px; opacity: 0; transition: opacity 0.5s, transform 0.2s; } .map-marker:hover { transform: translate(-50%, -50%) scale(1.1); } .map-container.revealed .map-marker { animation: markerFadeIn 1s forwards; } /* Delay disesuaikan dengan animasi garis */ #marker-1 { animation-delay: 1s; } #marker-2 { animation-delay: 3.5s; } #marker-3 { animation-delay: 4.5s; } #marker-4 { animation-delay: 6s; } #marker-5 { animation-delay: 7s; } @keyframes markerFadeIn { to { opacity: 1; } } .map-marker .footprints { width: 50px; height: 50px; fill: #4e4034; animation: walk 1s infinite; } @keyframes walk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .marker-label { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background-color: #f3e9d8; border: 1px solid #4e4034; color: #4e4034; padding: 3px 8px; border-radius: 5px; white-space: nowrap; font-family: 'Cinzel', serif; font-size: 11px; box-shadow: 2px 2px 0px #c5bba9; } /* === Jendela Pop-up (Modal) === */ .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; background-color: #fdfaf3; background-image: url('https://www.transparenttextures.com/patterns/old-old-moon.png'); border: 2px solid #4e4034; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); width: 90%; max-width: 500px; max-height: 80vh; z-index: 1001; display: flex; flex-direction: column; opacity: 0; pointer-events: none; } .modal.active { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .modal-header { padding: 10px 20px; border-bottom: 2px dotted #4e4034; } .modal-title { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #4e4034; text-align: center; } .close-button { position: absolute; top: 5px; right: 10px; cursor: pointer; border: none; background: none; font-size: 2rem; font-weight: bold; color: #6b5a4b; } .modal-body { padding: 20px; overflow-y: auto; color: #3d3229; text-align: center; } .modal-body h3 { font-family: 'Cinzel', serif; color: #4e4034; } .modal-body p { line-height: 1.6; } .modal-body .couple-name { font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 10px 0; } .modal-body img { max-width: 80%; border-radius: 5px; margin: 10px 0; border: 3px solid #dcd1c1; } .action-button { display: inline-block; background-color: #8b6b4a; color: white !important; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 10px; font-family: 'Cinzel', serif; transition: background-color 0.2s; border: 2px solid #5a4a3a; } .action-button:hover { background-color: #5a4a3a; } .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .photo-gallery img { width: 100%; border: 2px solid #dcd1c1; border-radius: 4px; } .gift-section { border: 2px dashed #bca892; padding: 15px; margin-top: 15px; } #countdown-timer { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #4e4034; margin: 20px 0; } /* === Overlay Latar Belakang & Kontrol Suara === */ #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; } #overlay.active { opacity: 1; pointer-events: auto; } #sound-control { position: fixed; bottom: 20px; right: 20px; z-index: 1002; background-color: #8b6b4a; border: 2px solid #5a4a3a; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s; pointer-events: none; } #sound-control.active { opacity: 1; pointer-events: auto; } #sound-control svg { fill: white; width: 24px; height: 24px; } @media screen and (max-width: 768px) { #map-container { padding: 10px; } #map-bg { object-fit: cover; } .map-marker { width: 80px; } .marker-label { font-size: 10px; } }

🎨 Preview Template: The Marauders Map | Kategori: Wedding

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

The Wedding of Our Dreams: Ahmad Rizki & Siti Nurhaliza