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
Chà! Trang bị mất trong không gian.
Trang bạn đang tìm kiếm có thể đã bị xóa, đã đổi tên hoặc hiện đang không khả dụng. Hãy đưa bạn trở lại đúng hướng.
Trở về Trang chủ