404-page-collection/index.html at main · PicartWeb/404-page-collection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 Page Collection</title>
  <link rel="stylesheet" href="assets/gallery.css">
</head>
<body>
  <header class="hero">
    <nav class="top" aria-label="Project navigation">
      <a class="brand" href="index.html">404 Page Collection</a>
      <a class="readme" href="README.md">README</a>
    </nav>
    <section class="intro">
      <p>20 premium error pages</p>
      <h1>Beautiful 404 designs built with pure HTML, CSS, and vanilla JavaScript.</h1>
      <p>Each demo is standalone, responsive, animated, and ready to copy into a real project.</p>
    </section>
  </header>
  <main class="grid" aria-label="404 page demos">
    <article class="card"><span>01</span><h2>Minimal Clean</h2><p>A restrained white-space driven layout for modern products.</p><a href="page-01/index.html">Open Demo</a><code>page-01</code></article>
    <article class="card"><span>02</span><h2>Dark Developer</h2><p>Code-editor inspired page with floating syntax tokens.</p><a href="page-02/index.html">Open Demo</a><code>page-02</code></article>
    <article class="card"><span>03</span><h2>Cyberpunk</h2><p>Glitchy neon city energy for futuristic products.</p><a href="page-03/index.html">Open Demo</a><code>page-03</code></article>
    <article class="card"><span>04</span><h2>Space / Astronaut</h2><p>Cosmic lost-route page with orbiting planets.</p><a href="page-04/index.html">Open Demo</a><code>page-04</code></article>
    <article class="card"><span>05</span><h2>Gaming</h2><p>Arcade-style failure state for gaming platforms.</p><a href="page-05/index.html">Open Demo</a><code>page-05</code></article>
    <article class="card"><span>06</span><h2>Luxury Brand</h2><p>Editorial premium page with refined gold accents.</p><a href="page-06/index.html">Open Demo</a><code>page-06</code></article>
    <article class="card"><span>07</span><h2>Glassmorphism</h2><p>Frosted interface with translucent panels and depth.</p><a href="page-07/index.html">Open Demo</a><code>page-07</code></article>
    <article class="card"><span>08</span><h2>Neon</h2><p>Nightclub glow page with reactive light strips.</p><a href="page-08/index.html">Open Demo</a><code>page-08</code></article>
    <article class="card"><span>09</span><h2>Retro Pixel</h2><p>Pixel-art error screen with blocky animation.</p><a href="page-09/index.html">Open Demo</a><code>page-09</code></article>
    <article class="card"><span>10</span><h2>Travel</h2><p>Map and suitcase inspired page for travel products.</p><a href="page-10/index.html">Open Demo</a><code>page-10</code></article>
    <article class="card"><span>11</span><h2>Finance</h2><p>Trust-focused banking error with chart visuals.</p><a href="page-11/index.html">Open Demo</a><code>page-11</code></article>
    <article class="card"><span>12</span><h2>SaaS Startup</h2><p>Friendly startup dashboard-style not-found page.</p><a href="page-12/index.html">Open Demo</a><code>page-12</code></article>
    <article class="card"><span>13</span><h2>E-commerce</h2><p>Shopping-cart lost item page for stores.</p><a href="page-13/index.html">Open Demo</a><code>page-13</code></article>
    <article class="card"><span>14</span><h2>Nature</h2><p>Organic forest composition with calm motion.</p><a href="page-14/index.html">Open Demo</a><code>page-14</code></article>
    <article class="card"><span>15</span><h2>Halloween</h2><p>Spooky seasonal page with moon and bats.</p><a href="page-15/index.html">Open Demo</a><code>page-15</code></article>
    <article class="card"><span>16</span><h2>Christmas</h2><p>Festive snow page for holiday campaigns.</p><a href="page-16/index.html">Open Demo</a><code>page-16</code></article>
    <article class="card"><span>17</span><h2>Cartoon</h2><p>Playful illustrated page with bouncy shapes.</p><a href="page-17/index.html">Open Demo</a><code>page-17</code></article>
    <article class="card"><span>18</span><h2>AI / Robot</h2><p>Robot assistant page for AI applications.</p><a href="page-18/index.html">Open Demo</a><code>page-18</code></article>
    <article class="card"><span>19</span><h2>Terminal / Hacker</h2><p>Command-line not-found message with scan effects.</p><a href="page-19/index.html">Open Demo</a><code>page-19</code></article>
    <article class="card"><span>20</span><h2>Creative Agency</h2><p>Bold poster-style page for studios and agencies.</p><a href="page-20/index.html">Open Demo</a><code>page-20</code></article>
  </main>
</body>
</html>