Full code for the above video is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Page Customization</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #000; /* Darker background */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: 'Arial Black', sans-serif;
}
/* Particle Background */
.background-particles {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(50, 0, 50, 0.3), #000);
overflow: hidden;
}
.particle {
position: absolute;
width: 5px;
height: 5px;
background: rgba(255, 0, 255, 0.7);
border-radius: 50%;
animation: drift 10s infinite ease-in-out;
}
@keyframes drift {
from { transform: translateY(100vh) scale(0.5); opacity: 0.3; }
50% { opacity: 1; }
to { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}
/* 404 Text - Now delayed */
.error-text {
font-size: 18vw;
color: white;
position: relative;
z-index: 2;
animation: pulseGlow 6s infinite, fadeIn 6s ease-in-out 5s; /* Added 5s delay */
text-shadow: 0 0 30px rgba(255, 0, 255, 0.8), 0 0 60px rgba(150, 0, 150, 0.7);
opacity: 0; /* Start invisible */
}
@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 0.5; transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
0%, 100% { text-shadow: 0 0 30px rgba(255, 0, 255, 0.8), 0 0 60px rgba(150, 0, 150, 0.7); }
50% { text-shadow: 0 0 50px rgba(255, 0, 255, 1), 0 0 90px rgba(200, 0, 200, 0.9); }
}
/* Subtext - Also delayed */
.subtext {
color: rgba(255, 255, 255, 0.7);
font-size: 2.5em;
position: absolute;
bottom: 8%;
animation: fadeInText 8s ease-in-out 5.5s; /* Slight delay after 404 */
opacity: 0;
text-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}
@keyframes fadeInText {
0% { opacity: 0; transform: translateY(20px); }
50% { opacity: 0.3; }
100% { opacity: 1; transform: translateY(0); }
}
/* Floating Shapes */
.floaters {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
}
.floaters span {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(100, 0, 150, 0.5);
animation: float 15s infinite ease-in-out;
}
@keyframes float {
0% { transform: translateY(100vh) scale(0.3); opacity: 0.6; }
50% { transform: translateY(50vh) scale(1.2); opacity: 1; }
100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}
</style>
</head>
<body>
<div class="background-particles" id="particles"></div>
<div class="error-text">404</div>
<div class="subtext">Oops!Page Not Found</div>
<div class="floaters" id="floaters"></div>
<script>
// Generate Random Particles for Background
function generateParticles() {
const container = document.getElementById('particles');
for (let i = 0; i < 100; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * window.innerWidth + 'px';
particle.style.top = Math.random() * window.innerHeight + 'px';
particle.style.animationDuration = Math.random() * 10 + 5 + 's';
particle.style.animationDelay = Math.random() * 5 + 's';
container.appendChild(particle);
}
}
function generateFloaters() {
const container = document.getElementById('floaters');
for (let i = 0; i < 40; i++) {
const floater = document.createElement('span');
floater.style.left = Math.random() * window.innerWidth + 'px';
floater.style.animationDuration = Math.random() * 10 + 10 + 's';
floater.style.animationDelay = Math.random() * 8 + 's';
container.appendChild(floater);
}
}
generateFloaters();
generateParticles();
</script>
</body>
</html>
Top comments (1)
this is amazing, thankyou :)