Retro Box - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retro Box</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background-color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; } .retro-box { width: 380px; padding: 20px; border-radius: 10px; background: linear-gradient(145deg, #1e1e1e, #2e2e2e); box-shadow: 8px 8px 20px #1a1a1a, -8px -8px 20px #2e2e2e; position: relative; text-align: center; color: #fff; } .retro-box h1 { margin: 0; font-size: 2em; font-family: 'Courier New', Courier, monospace; } .retro-box p { margin: 10px 0; font-family: 'Courier New', Courier, monospace; } .retro-box .icon { font-size: 2em; margin: 10px; color: #ff80ab; } .retro-box .emoji { font-size: 3em; margin: 10px; color: #80deea; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .icon-blink { animation: blink 1s infinite; } .emoji-blink { animation: blink 1s infinite; } button { margin-top: 20px; padding: 10px 20px; font-size: 1em; color: #fff; background-color: #ff80ab; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #80deea; } </style> </head> <body> <div class="retro-box"> <div class="icon icon-blink">🎮</div> <h1>Retro Box</h1> <p>This container brings a retro vibe.</p> <div class="emoji emoji-blink">🕹️</div> <button type="button">Play Now</button> </div> </body> </html>