404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page not found - Code Orange Dev School</title>
<meta name="robots" content="noindex">
<meta name="theme-color" content="#F7931A">
<link rel="icon" type="image/svg+xml" href="/assets/favicon-co.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Instrument+Serif:ital@1&display=swap" rel="stylesheet">
<style>
  html, body { margin: 0; padding: 0; background: #0A0A0A; }
  body { font-family: 'Inter', system-ui, sans-serif; color: #F5F5F5; min-height: 100vh; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; }
  a { transition: color 120ms, border-color 120ms, background 120ms; }
  .btn-solid:hover { background: #FFB347 !important; }
  .btn-ghost:hover { border-color: #F7931A !important; color: #F7931A !important; }
</style>
<link rel="stylesheet" href="/assets/theme.css?v=20261015d">
<script src="/assets/site-menu.js?v=20261004b" defer></script>
</head>
<body>
  <div style="text-align: center; padding: 40px 24px; max-width: 560px;">
    <img src="/assets/logo-dot-wordmark.svg" alt="Code Orange Dev School" style="height: 44px; width: auto; margin-bottom: 36px;">
    <div style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #F7931A; margin-bottom: 16px;"><span>/</span>404<span>_</span></div>
    <h1 style="font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: clamp(32px, 5vw, 48px); margin: 0 0 18px;">This page doesn't exist. <span style="color: #F7931A;">Yet.</span></h1>
    <p style="font-size: 16px; line-height: 1.6; color: #858585; margin: 0 0 32px;">Wrong link, typo, or a page that moved. The school is still in session — here's the way back.</p>
    <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
      <a href="/" class="btn-solid" style="background: #F7931A; color: #0A0A0A; text-decoration: none; font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: 8px;">Back to home</a>
      <a href="/portal" class="btn-ghost" style="color: #F5F5F5; text-decoration: none; font-size: 15px; font-weight: 600; padding: 13px 26px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;">Student portal</a>
      <a href="https://discord.gg/ZtvA79paWa" target="_blank" rel="noopener" class="btn-ghost" style="color: #F5F5F5; text-decoration: none; font-size: 15px; font-weight: 600; padding: 13px 26px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;">Discord</a>
    </div>
  </div>
</body>
</html>