<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Clouds Background */
.clouds {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.6);
border-radius: 100px;
animation: float 20s infinite ease-in-out;
}
.cloud:nth-child(1) {
width: 120px;
height: 40px;
top: 20%;
left: -120px;
animation-delay: 0s;
}
.cloud:nth-child(2) {
width: 180px;
height: 60px;
top: 40%;
left: -180px;
animation-delay: 5s;
}
.cloud:nth-child(3) {
width: 150px;
height: 50px;
top: 60%;
left: -150px;
animation-delay: 10s;
}
@keyframes float {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw + 200px));
}
}
/* Header */
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 24px;
font-weight: 600;
color: white;
text-decoration: none;
}
.logo-icon {
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
display: inline-block;
}
.login-btn {
background: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Main Content */
.container {
text-align: center;
z-index: 5;
padding: 20px;
}
.error-code {
font-size: 280px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
line-height: 1;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Monster Character */
.monster {
width: 180px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
}
.monster-body {
width: 120px;
height: 160px;
background: linear-gradient(135deg, #4A9FD8 0%, #2E7AA8 100%);
border-radius: 60px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 10px 30px rgba(46, 122, 168, 0.3);
}
.monster-fur {
position: absolute;
width: 100%;
height: 100%;
background: repeating-radial-gradient(
circle at 0 0,
transparent 0,
rgba(255, 255, 255, 0.1) 2px,
transparent 4px
);
border-radius: 60px;
}
.monster-head {
width: 100px;
height: 90px;
background: linear-gradient(135deg, #4A9FD8 0%, #2E7AA8 100%);
border-radius: 50px;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.monster-eye {
width: 28px;
height: 32px;
background: white;
border-radius: 50%;
position: absolute;
top: 25px;
animation: blink 3s infinite;
}
.monster-eye.left {
left: 20px;
}
.monster-eye.right {
right: 20px;
}
.monster-pupil {
width: 14px;
height: 16px;
background: #1a1a2e;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.monster-mouth {
width: 30px;
height: 15px;
background: #1a1a2e;
border-radius: 0 0 15px 15px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.monster-arm {
width: 30px;
height: 70px;
background: linear-gradient(135deg, #4A9FD8 0%, #2E7AA8 100%);
border-radius: 15px;
position: absolute;
top: 50px;
}
.monster-arm.left {
left: -10px;
transform: rotate(-20deg);
}
.monster-arm.right {
right: -10px;
transform: rotate(20deg) scaleX(-1);
animation: scratch 2s infinite ease-in-out;
}
.monster-leg {
width: 25px;
height: 50px;
background: linear-gradient(135deg, #4A9FD8 0%, #2E7AA8 100%);
border-radius: 12px;
position: absolute;
bottom: -10px;
}
.monster-leg.left {
left: 35px;
}
.monster-leg.right {
right: 35px;
}
.monster-tail {
width: 40px;
height: 60px;
background: linear-gradient(135deg, #4A9FD8 0%, #2E7AA8 100%);
border-radius: 20px;
position: absolute;
bottom: 30px;
left: -20px;
transform: rotate(-30deg);
}
@keyframes blink {
0%, 96%, 100% { transform: scaleY(1); }
98% { transform: scaleY(0.1); }
}
@keyframes scratch {
0%, 100% { transform: rotate(20deg) scaleX(-1) translateY(0); }
50% { transform: rotate(30deg) scaleX(-1) translateY(-10px); }
}
.message {
margin-top: 240px;
z-index: 5;
}
.message h1 {
font-size: 32px;
color: #2c3e50;
margin-bottom: 10px;
font-weight: 600;
}
.message p {
font-size: 16px;
color: #7f8c8d;
margin-bottom: 30px;
}
.home-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
border: 1px solid #ddd;
padding: 12px 28px;
border-radius: 8px;
font-size: 15px;
color: #2c3e50;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.home-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.home-btn svg {
width: 16px;
height: 16px;
}
/* Responsive */
@media (max-width: 768px) {
.error-code {
font-size: 180px;
}
.monster {
width: 140px;
height: 170px;
}
.monster-body {
width: 90px;
height: 120px;
}
.monster-head {
width: 75px;
height: 70px;
}
.message h1 {
font-size: 24px;
}
.message p {
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- Clouds -->
<div class="clouds">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>
<!-- Header -->
<div class="header">
<a href="#" class="logo">
<span class="logo-icon">✦</span>
<span>Muin</span>
</a>
<button class="login-btn">Log in</button>
</div>
<!-- Main Content -->
<div class="container">
<div class="error-code">
<span>4</span>
<!-- Monster Character -->
<div class="monster">
<div class="monster-tail"></div>
<div class="monster-arm left"></div>
<div class="monster-arm right"></div>
<div class="monster-body">
<div class="monster-fur"></div>
</div>
<div class="monster-head">
<div class="monster-eye left">
<div class="monster-pupil"></div>
</div>
<div class="monster-eye right">
<div class="monster-pupil"></div>
</div>
<div class="monster-mouth"></div>
</div>
<div class="monster-leg left"></div>
<div class="monster-leg right"></div>
</div>
<span>4</span>
</div>
<div class="message">
<h1>Oops, i think we're lost</h1>
<p>Let's get you back somewhere familiar...</p>
<a href="/" class="home-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Back to home
</a>
</div>
</div>
<script>
// Add interactivity to monster eyes
document.addEventListener('mousemove', (e) => {
const pupils = document.querySelectorAll('.monster-pupil');
const rect = document.querySelector('.monster').getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX);
const distance = Math.min(5, Math.hypot(e.clientX - centerX, e.clientY - centerY) / 20);
const x = Math.cos(angle) * distance;
const y = Math.sin(angle) * distance;
pupils.forEach(pupil => {
pupil.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;
});
});
</script>
</body>
</html>