A creative and interactive 404 'Page Not Found' page built with HTML, CSS, and vanilla JavaScript. This project transforms a standard error page into an engaging user experience with a "Lost in Space" theme, complete with multiple animations and interactive features.
You can view the live project here: Live Link
- Animated Space Theme: A dark, space-themed background with a moving starfield created with CSS.
- Floating Astronaut: A CSS-animated astronaut that gently floats in the center of the screen.
- Mouse-Following Comet: An interactive glowing orb that follows the user's cursor, enhancing the space-travel feel.
- Random Funny Messages: Displays a different witty, space-themed error message on each page load using JavaScript.
- Countdown Redirect: Automatically redirects the user to the homepage after a 10-second countdown to guide them back.
- Dark/Light Mode Toggle: Allows users to switch between the default dark theme and a clean light theme. The user's preference is saved in
localStorage. - Responsive Design: The layout is fully responsive and looks great on all devices, from desktops to mobile phones.
- HTML5
- CSS3 (including Keyframe Animations, Flexbox, and Media Queries)
- Vanilla JavaScript (DOM Manipulation, Event Listeners,
localStorage)
To run this project locally, follow these simple steps:
- Clone the repository:
git clone https://github.com/charanepuri/interactive-404-page.git
- Navigate to the project directory:
cd interactive-404-page - Open the
index.htmlfile in your favorite web browser.
That's it! You should now see the 404 page in action.
Charan Teja Epuri