Demo Template - Y2k Throwback

:root { --color-pink: #ff00ff; --color-lime: #00ff00; --color-blue: #00ffff; --color-silver: #c0c0c0; --font-pixel: 'VT323', monospace; } body, html { background-color: #000020; background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200'); color: var(--color-lime); font-family: var(--font-pixel); font-size: 20px; overflow: hidden; height: 100vh; margin: 0; cursor: url('../assets/img/cursor.png'), auto; } /* === Splash Screen === */ #splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; transition: opacity 0.5s ease-out; } #splash-screen.hidden { opacity: 0; pointer-events: none; } .progress-bar { width: 80%; max-width: 300px; height: 20px; border: 2px solid var(--color-lime); margin: 15px 0; } .progress { width: 0; height: 100%; background-color: var(--color-lime); animation: loading 2s linear forwards; } @keyframes loading { from { width: 0; } to { width: 100%; } } #enter-button { display: none; background-color: var(--color-silver); color: #000; border: 2px outset var(--color-silver); padding: 10px 20px; font-family: var(--font-pixel); font-size: 22px; cursor: pointer; margin-top: 20px; } #enter-button:active { border-style: inset; } /* === Konten Utama & Desktop === */ #main-desktop { display: none; width: 100%; height: 100%; padding-top: 50px; } .desktop-header { position: fixed; top: 0; left: 0; width: 100%; text-align: center; background: linear-gradient(90deg, #ff00ff, #00ffff, #00ff00, #ff00ff); background-size: 200% 100%; animation: holographic 2s infinite linear; padding: 5px 0; } .main-title { font-size: 3rem; font-weight: bold; -webkit-background-clip: text; background-clip: text; color: black; } @keyframes holographic { from { background-position: 200% 0; } to { background-position: 0 0; } } /* === Jendela Aplikasi (Widget) === */ .widget { position: absolute; width: 90%; max-width: 450px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); border: 2px outset var(--color-silver); box-shadow: 5px 5px 0px var(--color-pink); display: none; /* Awalnya tersembunyi */ animation: pop-in 0.3s forwards; } @keyframes pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .widget-header { background: linear-gradient(90deg, #000080, #1e90ff); color: #fff; padding: 5px 10px; font-size: 22px; border-bottom: 2px outset var(--color-silver); display: flex; justify-content: space-between; align-items: center; cursor: move; } .widget-body { padding: 20px; } .widget-body ul { list-style-type: '>>'; padding-left: 20px; } .widget-body ul li { padding-left: 10px; margin-bottom: 10px; } .widget img { max-width: 100%; border: 2px solid var(--color-blue); } /* [BARU] Countdown Timer */ #countdown { display: flex; justify-content: center; gap: 10px; margin: 15px 0; font-size: 2rem; } #countdown div { background-color: #000; padding: 5px 10px; border: 1px solid var(--color-lime); } /* [BARU] Music Player (Winamp) */ .winamp-player { background-color: #333; padding: 10px; border: 2px outset var(--color-silver); text-align: center; } #song-title { background-color: #000; color: var(--color-lime); padding: 5px; margin-bottom: 10px; } .winamp-controls button { background-color: var(--color-silver); border: 2px outset var(--color-silver); margin: 0 5px; font-size: 1.5rem; } /* [BARU] Guestbook (Friendster) */ #wish-list { margin-top: 15px; max-height: 150px; overflow-y: auto; background: #222; padding: 10px; border: 1px inset var(--color-lime); } .wish-item { border-bottom: 1px dashed var(--color-pink); padding-bottom: 5px; margin-bottom: 5px; } .wish-name { color: var(--color-blue); } /* [BARU] Clippy */ #clippy-container { position: fixed; bottom: 20px; right: 20px; display: none; animation: slide-up 0.5s forwards; } #clippy-speech-bubble { background: #ffffe1; color: #000; padding: 15px; border-radius: 10px; border: 1px solid #000; margin-bottom: 10px; position: relative; } #clippy-img { width: 60px; display: block; margin-left: auto; } @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .btn-submit, .btn { background-color: var(--color-pink); color: #000; border: 2px outset var(--color-pink); padding: 10px 20px; font-family: var(--font-pixel); font-size: 20px; cursor: pointer; } .btn:active, .btn-submit:active { border-style: inset; } /* Lightbox for gallery */ #lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; } #lightbox img { max-width: 90%; max-height: 90%; border: 3px solid var(--color-lime); } #lightbox:target { display: flex; }

🎨 Preview Template: Y2k Throwback | Kategori: Birthday

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

Undangan Ulang Tahun Sarah Amanda - Y2K Party!

Dengan sukacita kami mengundang Anda untuk merayakan ulang tahun yang istimewa

Sarah - 25 PARTY ZONE

THE DEETS!

LEAVE A COMMENT 4 Sarah!

MEMORY LANE

SEND UR GIFT!