Cyber Container - VexaX
Run Code
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>Cyber Container</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Arial', sans-serif; color: #fff; } .cyber-container { background: #1e272e; border-radius: 15px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); padding: 30px; max-width: 400px; text-align: center; animation: fadeIn 1s ease-in-out; position: relative; overflow: hidden; } .cyber-container::before { content: '🖥️'; font-size: 120px; color: rgba(100, 181, 246, 0.3); position: absolute; top: -50px; left: -50px; animation: flicker 20s linear infinite; } .cyber-container h1 { font-size: 2em; margin-bottom: 10px; animation: fadeIn 2s ease-in-out 1s; } .cyber-container p { margin-bottom: 20px; animation: fadeIn 2s ease-in-out 1.5s; } .cyber-container .button { background: #00a8ff; border: none; border-radius: 50px; color: white; padding: 10px 20px; font-size: 1em; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; animation: fadeIn 2s ease-in-out 2s; } .cyber-container .button:hover { background: #4cd137; color: #00a8ff; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); transform: translateY(-3px); } .cyber-container .icons { margin-top: 20px; animation: fadeIn 2s ease-in-out 2.5s; } .cyber-container .icons i { font-size: 2em; margin: 0 10px; color: #00a8ff; transition: color 0.3s ease; } .cyber-container .icons i:hover { color: #4cd137; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes flicker { from { opacity: 1; } to { opacity: 0.5; } } </style> </head> <body> <div class="cyber-container"> <h1>Cyber Space</h1> <p>Step into the future with this cyber-themed container.</p> <button type="button" class="button">Enter</button> <div class="icons"> <i class="fas fa-robot"></i> <i class="fas fa-laptop-code"></i> <i class="fas fa-microchip"></i> </div> </div> </body> </html>