Skip to main content

​
Overview

The 404 error page (404.astro) displays a custom “Level Not Found” message styled like Geometry Dash when users navigate to a non-existent page.

​
Source Code

src/pages/404.astro
---
import Layout from "../layouts/Layout.astro";
---

<Layout title="404 - Page Not Found" description="Page Not Found">
  <div class="gd-container">
    <div class="gd-content">
      <img src="/assets/img/logo - 404.png" alt="404" class="gd-404-img" />
      <img
        src="/assets/img/font1 - Level Not Found.png"
        alt="Level Not Found"
        class="gd-title-img"
      />
      <img
        src="/assets/img/font1 - Looks like this level doesnt exist or wa.png"
        alt="Level doesn't exist"
        class="gd-text-img"
      />
      <a href="/" class="gd-button">
        <img src="/assets/img/ButtonText.png" alt="FONT" class="button-text" />
      </a>
    </div>
  </div>
</Layout>

​
Design Elements

The 404 page uses Geometry Dash-themed visuals:
1

404 Logo

Large animated 404 logo with pulse animation (300px on mobile, 400px on tablet)
2

Error Message

“Level Not Found” title image in Geometry Dash font style (500px width)
3

Description

“Looks like this level doesn’t exist” message (400px width)
4

Home Button

Green gradient button styled like Geometry Dash UI buttons

​
Styling Details

​
Container Layout

.gd-container {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
The container centers all content vertically and horizontally.

​
Pulse Animation

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
The 404 logo pulses continuously to draw attention.

​
Button Styling

The “Return Home” button uses Geometry Dash’s button style: 
.gd-button {
  background: linear-gradient(to bottom, #00c853, #009624);
  border: 3px solid rgb(0, 0, 0);
  border-radius: 8px;
  box-shadow:
    0 0 0 2px #ffffff,
    inset 0 5px 5px rgba(255, 255, 255, 0.3),
    inset 0 -5px 5px rgba(0, 0, 0, 0.2);
}
Features:
  • Green gradient background
  • Black border with white outer glow
  • Inner highlight and shadow for 3D effect
  • Lift on hover with translateY(-2px)

​
Responsive Behavior

The page adapts to different screen sizes:
Breakpoint404 LogoTitleDescriptionButton
Desktop300px500px400px30px text
Tablet (< 768px)400px550px450px30px text
Mobile (< 480px)300px400px350px26px text

​
Required Assets

The page requires these image files in /public/assets/img/:
  • logo - 404.png - The 404 logo graphic
  • font1 - Level Not Found.png - Title text in Geometry Dash font
  • font1 - Looks like this level doesnt exist or wa.png - Description text
  • ButtonText.png - Button label text

​
SEO Configuration

<Layout 
  title="404 - Page Not Found" 
  description="Page Not Found"
>
The page uses minimal SEO since it’s an error page that shouldn’t be indexed.

​
Customization

​
Change Button Destination

To link to a different page instead of home: 
<a href="/blog" class="gd-button">
  <img src="/assets/img/ButtonText.png" alt="Go to Blog" />
</a>

​
Add Text Content

To add text alongside images: 
<div class="gd-content">
  <img src="/assets/img/logo - 404.png" alt="404" />
  <h1 style="color: white;">Oops! Page Not Found</h1>
  <p style="color: white;">The page you're looking for doesn't exist.</p>
  <a href="/" class="gd-button">Return Home</a>
</div>

​
Simplify Without Images

If you don’t have the custom assets: 
<Layout title="404 - Page Not Found" description="Page Not Found">
  <div class="container text-center py-5">
    <h1 class="display-1 text-white">404</h1>
    <h2 class="text-white mb-4">Level Not Found</h2>
    <p class="text-white mb-4">
      Looks like this level doesn't exist or was removed.
    </p>
    <a href="/" class="btn btn-success btn-lg">Return Home</a>
  </div>
</Layout>

​
Testing the 404 Page

To test the 404 page locally:
  1. Start the dev server: npm run dev
  2. Navigate to a non-existent URL: http://localhost:4321/non-existent-page
  3. The 404 page should display automatically
During development, Astro may show its default 404 page. The custom 404 page will work correctly in production builds (npm run build and npm run preview).

Base Layout

Learn about the Layout component structure

Styling Guide

Customize colors and animations

Build docs developers (and LLMs) love

Get started for freeTalk to us