HTML 404 Lost in Space

Personal
4.0 (24 reviews)
Verified Asset
HTML 404 Lost in Space

Halman 404 dengan desain baru yang lebih modern, immersive, dan fully responsive dengan tema "Lost in Space"

1. Visual Identity 

  • Menggunakan Orbitron untuk angka 404 dan heading (font futuristik), dan Space Grotesk untuk body text
  • Warna palette: Deep space blue (#050510), dengan accent cyan (#00e5ff) dan magenta (#ff0080)
  • Gradient background dengan efek nebula yang bergerak halus

2. Responsivitas 

  • Menggunakan clamp() untuk font-size yang adaptive
  • Layout berubah dari vertikal di mobile menjadi horizontal di desktop
  • Button group berubah dari column ke row saat lebar layar > 400px
  • Testing di 375px (mobile), 768px (tablet), dan 1440px (desktop)

3. Interaksi & Animasi 

  • Glitch effect pada angka 404 dengan CSS clip-path
  • Floating astronaut dengan animasi halus
  • Twinkling stars dengan timing random
  • Shooting stars yang muncul berkala
  • Parallax effect saat mouse bergerak
  • Hover effects pada tombol dengan glow
  • Semua animasi respect prefers-reduced-motion

4. Accessibility 

  • Semantic HTML dengan <main>, <footer>
  • ARIA labels pada elemen interaktif
  • Focus-visible states untuk keyboard navigation
  • Color contrast yang memenuhi standar WCAG

5. Performance 

  • Pure CSS animations (tidak ada library)
  • Minimal JavaScript untuk efek dinamis
  • requestAnimationFrame untuk parallax yang smooth

Related Templates

Aset serupa untuk proyek Anda.