404 Page – Animated Error Page Not Found Template

17 0 Websites codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

404 Page – Animated Error Page Not Found Template

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); color: #fff; font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }
.sky { position: fixed; inset: 0; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: tw 3s infinite alternate; }
@keyframes tw { from { opacity: .2; } to { opacity: 1; } }
.shoot { position: absolute; width: 120px; height: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-30deg); animation: shoot 1.2s linear forwards; }
@keyframes shoot { to { transform: rotate(-30deg) translateX(-600px); opacity: 0; } }
main { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 16px; }
.num { display: flex; align-items: center; gap: 10px; font-size: clamp(6rem, 22vw, 11rem); font-weight: 900; line-height: 1; }
.num span { background: linear-gradient(180deg, #fff, #8ec5fc); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(142,197,252,.3); }
.planet { width: .8em; height: .8em; border-radius: 50%; position: relative; background: radial-gradient(circle at 30% 30%, #ffb199, #ff0844 70%); box-shadow: inset -12px -12px 30px rgba(0,0,0,.4), 0 0 50px rgba(255,8,68,.4); animation: float 6s ease-in-out infinite; }
.ring { position: absolute; left: -25%; right: -25%; top: 42%; height: 16%; border-radius: 50%; border: 6px solid rgba(255,220,200,.7); transform: rotate(-18deg); }
@keyframes float { 50% { transform: translateY(-14px) rotate(8deg); } }
.astro { position: absolute; font-size: 3.2rem; top: 15%; left: 12%; animation: drift 14s ease-in-out infinite; cursor: grab; user-select: none; }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(60vw, 50vh) rotate(200deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
h1 { font-size: clamp(1.5rem, 4.5vw, 2.4rem); }
main p { max-width: 460px; opacity: .7; line-height: 1.6; }
.find { display: flex; width: min(420px, 100%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 4px; }
.find input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; padding: 10px 16px; font: inherit; }
.find button { border: 0; border-radius: 99px; padding: 10px 18px; background: #8ec5fc; color: #0b1220; font-weight: 700; cursor: pointer; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btns a { padding: 12px 24px; border-radius: 99px; text-decoration: none; font-weight: 700; transition: transform .2s; }
.btns a:hover { transform: translateY(-3px); }
.home { background: #ff0844; color: #fff; box-shadow: 0 10px 30px rgba(255,8,68,.4); }
.ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }

// 404 page: twinkling stars, shooting stars, parallax planet, floating astronaut, search and go-back
var sky = document.getElementById('sky');
for (var i = 0; i < 160; i++) {
  var s = document.createElement('i'); s.className = 'star';
  s.style.left = Math.random() * 100 + '%'; s.style.top = Math.random() * 100 + '%';
  s.style.animationDelay = Math.random() * 3 + 's'; var z = Math.random() * 2 + 1; s.style.width = s.style.height = z + 'px';
  sky.appendChild(s);
}
setInterval(function () {
  var sh = document.createElement('i'); sh.className = 'shoot';
  sh.style.left = 40 + Math.random() * 60 + '%'; sh.style.top = Math.random() * 40 + '%';
  sky.appendChild(sh); setTimeout(function () { sh.remove(); }, 1300);
}, 2500);
addEventListener('mousemove', function (e) {
  var x = e.clientX / innerWidth - .5, y = e.clientY / innerHeight - .5;
  sky.style.transform = 'translate(' + x * -20 + 'px,' + y * -20 + 'px)';
  document.getElementById('planet').style.marginLeft = x * 30 + 'px';
});
document.getElementById('back').onclick = function (e) { e.preventDefault(); if (history.length > 1) history.back(); else location.href = '/'; };
document.getElementById('find').onsubmit = function (e) { e.preventDefault(); var q = this.querySelector('input').value.trim(); if (q) location.href = '/?q=' + encodeURIComponent(q); };
document.getElementById('astro').onclick = function () { this.textContent = this.textContent === '🧑‍🚀' ? '👋' : '🧑‍🚀'; };

Comments 0

…

404 Page – Animated Error Page Not Found Template

Recommended

Comments 0