<style>
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #111827, #1e293b);
color: #fff;
}
.container404 {
text-align: center;
padding: 20px;
max-width: 380px;
width: 90%;
background: rgba(255,255,255,0.06);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
animation: fadeIn .8s ease;
}
@keyframes fadeIn {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.number404 {
font-size: 80px;
font-weight: 800;
background: linear-gradient(90deg,#60a5fa,#a855f7);
-webkit-background-clip: text;
color: transparent;
}
.message404 {
font-size: 17px;
line-height: 1.5;
margin-top: -10px;
opacity: .85;
}
.btn404 {
margin-top: 22px;
display: inline-block;
padding: 12px 26px;
font-size: 16px;
border-radius: 40px;
background: linear-gradient(90deg,#6366f1,#8b5cf6);
color: #fff;
text-decoration: none;
font-weight: 600;
letter-spacing: .5px;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
transition: .25s;
}
.btn404:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.illustration {
margin: 20px auto;
}
.illustration svg {
width: 120px;
height: auto;
opacity: 0.9;
}
</style>
<div class="container404">
<div class="illustration">
<!-- SVG Android Style -->
<svg fill="none" stroke="#93c5fd" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M12 2L15 6H9L12 2Z"></path>
<rect x="4" y="8" width="16" height="12" rx="2"></rect>
<circle cx="9" cy="14" r="1.5"></circle>
<circle cx="15" cy="14" r="1.5"></circle>
</svg>
</div>
<div class="number404">404</div>
<div class="message404">
Halaman tidak ditemukan.<br>
Mungkin link sudah berubah atau tidak tersedia.
</div>
<a href="/" class="btn404">Kembali ke Beranda</a>
</div>
No comments:
Post a Comment