HTML Template
84 lines
2.9 KB
503 Maintenance 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>503 Maintenance Page</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0a0a0f;
color: #e4e4e7;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.container { text-align: center; max-width: 500px; }
.icon-wrap {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
border-radius: 20px;
background: linear-gradient(135deg, #f59e0b22, #f9731622);
border: 1px solid #f59e0b33;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
h1 { font-size: 4rem; font-weight: 800; color: #f59e0b; margin-bottom: 0.5rem; }
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: #fff; }
p { color: #a1a1aa; line-height: 1.6; margin-bottom: 2rem; }
.progress-bar {
width: 100%;
height: 6px;
background: #27272a;
border-radius: 999px;
overflow: hidden;
margin-bottom: 1rem;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #f59e0b, #f97316);
border-radius: 999px;
animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
.status-text { font-size: 0.85rem; color: #71717a; }
.social { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; }
.social a {
width: 40px; height: 40px;
border-radius: 10px;
background: #18181b;
border: 1px solid #27272a;
display: flex; align-items: center; justify-content: center;
color: #71717a; text-decoration: none;
transition: all 0.3s;
}
.social a:hover { border-color: #f59e0b; color: #f59e0b; }
</style>
</head>
<body>
<div class="container">
<div class="icon-wrap">🛠</div>
<h1>503</h1>
<h2>Under Maintenance</h2>
<p>We're performing scheduled maintenance to improve your experience. We'll be back shortly. Thank you for your patience!</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
<p class="status-text">Estimated time: 30 minutes</p>
<div class="social">
<a href="#">💬</a>
<a href="#">𝕏</a>
<a href="#">📧</a>
</div>
</div>
</body>
</html>