# 🚧 404 Page Collection

> A premium collection of **20 completely different responsive 404 page designs** built with **HTML, CSS, and Vanilla JavaScript** — created for developers who want polished, reusable, and memorable error pages without frameworks or dependencies.

![HTML](https://img.shields.io/badge/HTML5-100%25-orange?style=for-the-badge&logo=html5)
![CSS](https://img.shields.io/badge/CSS3-Modern-blue?style=for-the-badge&logo=css3)
![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla-yellow?style=for-the-badge&logo=javascript)
![Responsive](https://img.shields.io/badge/Responsive-Mobile%20First-success?style=for-the-badge)
![Accessibility](https://img.shields.io/badge/Accessibility-Friendly-success?style=for-the-badge)
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)

---

# 📸 Collection Preview

| Minimal Clean | Dark Developer |
|---|---|
| ![Minimal Clean 404 Page](PREVIEW/Minimal%20Clean.png) | ![Dark Developer 404 Page](PREVIEW/Dark%20Developer.png) |

| Cyber Punk | Space |
|---|---|
| ![Cyber Punk 404 Page](PREVIEW/Cyber%20Punk.png) | ![Space 404 Page](PREVIEW/Space.png) |

| Gaming | Luxury Brand |
|---|---|
| ![Gaming 404 Page](PREVIEW/Gaming.png) | ![Luxury Brand 404 Page](PREVIEW/Luxury%20Brand.png) |

| Glassmorphism | Neon |
|---|---|
| ![Glassmorphism 404 Page](PREVIEW/Glassmorphism.png) | ![Neon 404 Page](PREVIEW/Neon.png) |

| Retro Pixel | Travel |
|---|---|
| ![Retro Pixel 404 Page](PREVIEW/Retro%20Pixel.png) | ![Travel 404 Page](PREVIEW/Travel.png) |

| Finance | SaaS Startup |
|---|---|
| ![Finance 404 Page](PREVIEW/Finance.png) | ![SaaS Startup 404 Page](PREVIEW/SaaS%20Startup.png) |

| E-commerce | Nature |
|---|---|
| ![E-commerce 404 Page](PREVIEW/E-commerce.png) | ![Nature 404 Page](PREVIEW/Nature.png) |

| Halloween | Christmas |
|---|---|
| ![Halloween 404 Page](PREVIEW/Halloween.png) | ![Christmas 404 Page](PREVIEW/Christmas.png) |

| Cartoon | Robot |
|---|---|
| ![Cartoon 404 Page](PREVIEW/Cartoon.png) | ![Robot 404 Page](PREVIEW/Robot.png) |

| Terminal Hacker | Creative Agency |
|---|---|
| ![Terminal Hacker 404 Page](PREVIEW/Terminal%20Hacker.png) | ![Creative Agency 404 Page](PREVIEW/Creative%20Agency.png) |

---

# ✨ Overview

Creating a memorable 404 page from scratch takes time.

Most websites settle for a plain message, a basic button, and a large `404` in the center of the screen.

This collection provides **20 visually distinct not-found page designs**, each with its own layout, theme, animation style, typography, illustration, and interaction treatment.

Every page is fully independent and can be copied directly into another website.

No frameworks.

No dependencies.

No build tools.

No installation.

Just clean, reusable frontend code.

---

# 🎯 What Is Included

✔ 20 Completely Different 404 Designs

✔ Responsive Desktop Layouts

✔ Tablet Optimization

✔ Mobile-Friendly Interfaces

✔ Animated Illustrations

✔ CSS and SVG Artwork

✔ Smooth Hover Effects

✔ Vanilla JavaScript Interactions

✔ Accessible Markup

✔ Semantic HTML

✔ Standalone Demo Folders

✔ Copy-and-Paste Ready Code

✔ No External Frameworks

✔ No Package Installation

✔ MIT License

---

# 🎨 Included Themes

| # | Design |
|---|---|
| 01 | Minimal Clean |
| 02 | Dark Developer |
| 03 | Cyber Punk |
| 04 | Space |
| 05 | Gaming |
| 06 | Luxury Brand |
| 07 | Glassmorphism |
| 08 | Neon |
| 09 | Retro Pixel |
| 10 | Travel |
| 11 | Finance |
| 12 | SaaS Startup |
| 13 | E-commerce |
| 14 | Nature |
| 15 | Halloween |
| 16 | Christmas |
| 17 | Cartoon |
| 18 | Robot |
| 19 | Terminal Hacker |
| 20 | Creative Agency |

---

# ⚡ Features

- 📱 Fully responsive
- 🎨 Twenty unique visual identities
- ⚙️ Vanilla JavaScript
- 🚀 Lightweight and fast
- ♿ Accessible controls
- 🖱️ Smooth animations
- 💻 Clean project structure
- 🧩 Independent components
- 🔥 Easy to customize
- 📦 Copy-and-paste ready
- 🛠 Beginner friendly
- 🌐 Browser compatible
- 📈 Suitable for real projects
- 🚫 No frameworks or dependencies

---

# 🛡 Accessibility

The collection uses accessibility-friendly frontend practices, including:

- Semantic HTML structure
- Clear page headings
- Accessible navigation links
- Visible keyboard focus states
- Readable color contrast
- Responsive text sizing
- Descriptive button labels
- Reduced-motion support where appropriate
- Logical content order
- Keyboard-accessible interactions

When integrating a page into your own website, keep the focus styles and semantic elements intact.

---

# 📂 Project Structure

```text
404-page-collection/
│
├── index.html
├── README.md
├── LICENSE
├── PREVIEW/
│   ├── Minimal Clean.png
│   ├── Dark Developer.png
│   ├── Cyber Punk.png
│   ├── Space.png
│   ├── Gaming.png
│   ├── Luxury Brand.png
│   ├── Glassmorphism.png
│   ├── Neon.png
│   ├── Retro Pixel.png
│   ├── Travel.png
│   ├── Finance.png
│   ├── SaaS Startup.png
│   ├── E-commerce.png
│   ├── Nature.png
│   ├── Halloween.png
│   ├── Christmas.png
│   ├── Cartoon.png
│   ├── Robot.png
│   ├── Terminal Hacker.png
│   └── Creative Agency.png
│
├── assets/
│   └── gallery.css
│
├── page-01/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── page-02/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── page-03/
├── page-04/
├── page-05/
├── page-06/
├── page-07/
├── page-08/
├── page-09/
├── page-10/
├── page-11/
├── page-12/
├── page-13/
├── page-14/
├── page-15/
├── page-16/
├── page-17/
├── page-18/
├── page-19/
│
└── page-20/
    ├── index.html
    ├── style.css
    └── script.js
```

Each page folder contains:

```text
index.html
style.css
script.js
```

Every design works independently.

---

# 🚀 Getting Started

Clone the repository:

```bash
git clone https://github.com/PicartWeb/404-page-collection.git
```

Move into the project folder:

```bash
cd 404-page-collection
```

Open:

```text
index.html
```

in your browser.

You can also open an individual page directly:

```text
page-04/index.html
```

No server is required.

No npm installation is required.

No build command is required.

---

# 📋 How to Use a Page

1. Choose the page design you want.
2. Open its folder.
3. Copy the HTML from `index.html`.
4. Copy the matching `style.css`.
5. Copy the matching `script.js`.
6. Update the logo, message, button text, and links.
7. Point the Back Home button to your real home page.
8. Configure your hosting provider to use the page as the website’s 404 route.

Each design is self-contained, so you only need the files from the selected folder.

---

# 🔗 Setting Up a Real 404 Page

The exact setup depends on your hosting environment.

For a static host, configure the platform’s custom 404 page option.

For Apache hosting, you can use:

```apache
ErrorDocument 404 /404.html
```

For GitHub Pages, create or rename your selected file to:

```text
404.html
```

Place it in the repository root.

---

# 🎨 Customization

You can quickly change:

- Error message
- Button labels
- Home-page URL
- Brand name
- Logo
- Colors
- Typography
- Backgrounds
- Animations
- Illustrations
- Spacing
- Border radius
- Shadows
- Responsive breakpoints

Most visual properties are located inside the matching `style.css` file.

---

# 🌐 Browser Support

The collection targets current versions of:

- ✅ Google Chrome
- ✅ Microsoft Edge
- ✅ Mozilla Firefox
- ✅ Apple Safari

The pages use standard modern web features, including:

- CSS Grid
- Flexbox
- CSS custom properties
- CSS transitions
- CSS transforms
- Keyframe animations
- Vanilla JavaScript DOM APIs

---

# 🤝 Contributing

Contributions are welcome.

You can contribute by:

- Adding a new 404 design
- Improving responsiveness
- Improving accessibility
- Fixing bugs
- Optimizing animations
- Improving documentation
- Reporting broken links
- Suggesting new themes

Please keep every contribution:

- Self-contained
- Responsive
- Accessible
- Dependency-free
- Visually distinct
- Easy to understand

Open an issue or submit a pull request.

---

# ⭐ Support the Project

If you found this collection useful:

⭐ Star the repository

🍴 Fork the project

📢 Share it with other developers

🐛 Report issues

💡 Suggest new designs

Every star helps support future free developer resources.

---

# 📄 License

This project is licensed under the **MIT License**.

You may use, modify, distribute, and include these designs in:

- Personal projects
- Portfolio projects
- Freelance projects
- Client websites
- Commercial products
- Open-source projects

Attribution is appreciated but not required.

See the `LICENSE` file for complete details.

---

# 👨‍💻 About the Author

Hi! I'm **Korab**, a full-stack web developer passionate about building modern web applications, SaaS platforms, admin dashboards, booking systems, CRM solutions, and reusable developer resources.

I enjoy creating free open-source projects that help developers learn faster and build better websites.

If this project helped you, consider giving it a ⭐ and following my work.

---

# 🌍 Connect With Me

🌐 **Website:** https://picartweb.com

💻 **GitHub:** https://github.com/PicartWeb

💼 **LinkedIn:** https://www.linkedin.com/in/korab-ahmeti-06916b348/

📸 **Instagram:** https://www.instagram.com/picart_web/

🎵 **TikTok:** https://www.tiktok.com/@picartweb

▶️ **YouTube:** https://www.youtube.com/@Picart_web

💬 **Discord Community:** https://discord.gg/2enUxfQRr

📧 **Email:** [info@picartweb.com](mailto:info@picartweb.com)

---

# ❤️ Support My Work

If you enjoy this project and want more free developer resources:

⭐ Star my repositories

🍴 Fork the projects

📢 Share them with your community

🐛 Report problems

💡 Send new collection ideas

Your support helps me continue building free resources for developers.

---

# 🚀 More Free Collections

- Responsive Navbar Collection ✅
- Login & Register UI Collection ✅
- 404 Page Collection ✅
- Contact Form Collection
- Footer Collection
- Hero Section Collection
- Pricing Table Collection
- Modal Collection
- Toast Notification Collection
- Skeleton Loader Collection
- FAQ Collection
- Button Collection
- Card Collection
- Dashboard Component Collection
- Admin Dashboard Templates

More releases are coming soon.

---

### Built with ❤️ by Picart Web

**Picart Web** — Building modern websites, SaaS platforms, dashboards, and digital solutions for businesses worldwide.

🌐 https://picartweb.com