WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated 404 Error Page with Heart & Particles
374
ByBy.inc
Open In Editor
Publish Your Code
Recommended
25 February 2025
Developer Landing Page HTML CSS
23 July 2024
Animated login and registration
23 August 2025
Luxury Car Gallery: Premium Motors & Vehicles
HTML
Copy
ERRO 404: Felicidade Não Encontrada
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #141C26; /* Tons de preto para combinar com a estética digital */ display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background:transparent; } .heart { position: absolute; width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 80px solid #F82672; /* Cor vermelha vibrante */ animation: heartbeat 2s linear infinite; } @keyframes heartbeat { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2) rotate(10deg); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } } .error-message { font-family: 'Arial', sans-serif; font-size: 32px; color: #F92672; position: absolute; transform: rotate(-15deg); opacity: 0; animation: fade-in 0.5s ease-in-out forwards; } .particle { position: absolute; width: 10px; height: 10px; background-color: #F8F8F2; border-radius: 50%; animation: pulsate 1.5s ease-in-out infinite; } @keyframes pulsate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */