404 – Page Not Found
/* Reset basic styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Dark space gradient background */
background: #0f0c29;
background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
color: #ffffff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* ----- Floating Glowing Orbs ----- */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px); /* Glow effect */
z-index: 1;
animation: float 8s infinite ease-in-out alternate;
}
.orb-1 {
width: 350px;
height: 350px;
background: #ff00cc;
top: 10%;
left: 15%;
animation-delay: 0s;
}
.orb-2 {
width: 450px;
height: 450px;
background: #333399;
bottom: 5%;
right: 15%;
animation-delay: -4s; /* Staggered animation */
}
/* ----- Glassmorphism Card ----- */
.glass-container {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); /* Safari support */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 60px 80px;
text-align: center;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
animation: float-card 6s infinite ease-in-out; /* Card floating */
}
/* 404 Text */
.error-code {
font-size: 160px;
font-weight: 900;
line-height: 1;
margin-bottom: 10px;
/* Gradient text */
background: linear-gradient(45deg, #00f2fe, #4facfe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 10px 30px rgba(79, 172, 254, 0.3);
user-select: none;
}
.title {
font-size: 32px;
font-weight: 600;
margin-bottom: 15px;
letter-spacing: 1px;
}
.description {
font-size: 16px;
color: #a0a5b1;
margin-bottom: 40px;
max-width: 400px;
line-height: 1.6;
margin-left: auto;
margin-right: auto;
}
/* Back to Home Button */
.home-btn {
display: inline-block;
padding: 16px 45px;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
/* Gradient button */
background: linear-gradient(45deg, #ff0844 0%, #ffb199 100%);
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(255, 8, 68, 0.3);
}
.home-btn:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 15px 25px rgba(255, 8, 68, 0.5);
}
.home-btn:active {
transform: translateY(0);
}
/* ----- Animations ----- */
@keyframes float {
0% { transform: translateY(0px) translateX(0px); }
100% { transform: translateY(60px) translateX(40px); }
}
@keyframes float-card {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
/* ----- Responsive Design for Mobile ----- */
@media (max-width: 768px) {
.glass-container {
padding: 40px 25px;
margin: 20px;
width: 90%;
}
.error-code {
font-size: 100px;
}
.title {
font-size: 24px;
}
.description {
font-size: 14px;
}
.orb-1 { width: 200px; height: 200px; left: 0;}
.orb-2 { width: 250px; height: 250px; right: 0;}
}
404
Oops! Page lost in space.
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Let's get you back on track.
Back to Home