HTML Template
91 lines
3.4 KB
404 Error Page
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Error Page</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #09090b;
color: #e4e4e7;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
overflow: hidden;
}
.container { text-align: center; z-index: 1; }
.glitch {
font-size: 8rem;
font-weight: 900;
color: #6366f1;
position: relative;
line-height: 1;
margin-bottom: 1rem;
}
.glitch::before, .glitch::after {
content: '404';
position: absolute;
top: 0; left: 0;
width: 100%;
}
.glitch::before {
color: #ef4444;
animation: glitch-1 2s infinite linear alternate-reverse;
}
.glitch::after {
color: #3b82f6;
animation: glitch-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-1 {
0% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 0); }
20% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
40% { clip-path: inset(40% 0 40% 0); transform: translate(-1px, 0); }
60% { clip-path: inset(10% 0 75% 0); transform: translate(1px, 0); }
80% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
100% { clip-path: inset(30% 0 50% 0); transform: translate(2px, 0); }
}
@keyframes glitch-2 {
0% { clip-path: inset(60% 0 20% 0); transform: translate(2px, 0); }
20% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 0); }
40% { clip-path: inset(50% 0 30% 0); transform: translate(1px, 0); }
60% { clip-path: inset(70% 0 10% 0); transform: translate(-1px, 0); }
80% { clip-path: inset(25% 0 55% 0); transform: translate(2px, 0); }
100% { clip-path: inset(45% 0 35% 0); transform: translate(-2px, 0); }
}
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
p { color: #71717a; margin-bottom: 2rem; }
.btn {
display: inline-block;
padding: 0.875rem 2rem;
background: #6366f1;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s;
}
.btn:hover { background: #4f46e5; transform: translateY(-2px); }
.links { margin-top: 1.5rem; display: flex; gap: 1.5rem; justify-content: center; }
.links a { color: #71717a; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.links a:hover { color: #6366f1; }
</style>
</head>
<body>
<div class="container">
<div class="glitch">404</div>
<h2>Page Not Found</h2>
<p>The page you're looking for doesn't exist or has been moved.</p>
<a href="/" class="btn">Back to Home</a>
<div class="links">
<a href="#">Search</a>
<a href="#">Sitemap</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>