How To Create A 404 Page Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', sans-serif;
    background: #0f172a;
    color: white;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    text-align: center;
  }
  .error-number {
    font-size: clamp(6em, 20vw, 12em);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
  }
  h1 { font-size: 1.8em; margin-bottom: 12px; color: #e2e8f0; }
  p { color: #94a3b8; max-width: 400px; margin: 0 auto 40px; line-height: 1.8; }

.search-box {
    display: flex; gap: 8px; justify-content: center;
    max-width: 420px; margin: 0 auto 36px;
  }
  .search-box input {
    flex: 1; padding: 12px 20px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
  }
  .search-box input::placeholder { color: rgba(255,255,255,0.35); }
  .search-box input:focus { border-color: #6366f1; }
  .search-box button {
    padding: 12px 20px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .search-box button:hover { background: #4f46e5; }

.nav-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
  .nav-links a { color: #94a3b8; font-size: 0.9em; text-decoration: none; transition: color 0.2s; }
  .nav-links a:hover { color: white; }

.home-btn {
    display: inline-block; padding: 14px 32px;
    background: #6366f1; color: white;
    border-radius: 8px; font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }
  .home-btn:hover { background: #4f46e5; transform: translateY(-2px); }
</style>
</head>
<body>

<div>
  <div class="error-number">404</div>
  <h1>Oops! Page Not Found</h1>
  <p>We looked everywhere but couldn't find the page you're looking for. It may have been moved or deleted.</p>

<div class="nav-links">
    <a href="/">Home</a>
    <a href="#">Blog</a>
    <a href="#">Products</a>
    <a href="#">Support</a>
  </div>

<a href="/" class="home-btn">&#8592; Back to Homepage</a>
</div>

</body>
</html>