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
Упс! Страница потерялась в космосе.
Страница, которую вы ищете, возможно, была удалена, переименована или временно недоступна. Давайте вернём вас на правильный путь.
Вернуться на главную