Enhance 404 Not Found Page with Modern Animations and Glassmorphism Design #43
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
Hi @MD-IRFAN-RAJ 
|
MD-IRFAN-RAJ
added
good first issue
Collaborator
|
@KunjMaheshwari Commit message must follow the guidelines. |
Collaborator
|
KunjMaheshwari
force-pushed
the
notFoundBranch
branch
from
a2d8c78 to
c306e62
Compare
Contributor
Author
|
Hi @MD-IRFAN-RAJ can you please check now. |
KunjMaheshwari
force-pushed
the
notFoundBranch
branch
from
c306e62 to
e4ea4ff
Compare
Collaborator
|
@all-contributors please add @KunjMaheshwari for code |
Contributor
|
I've put up a pull request to add @KunjMaheshwari! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Enhance 404 Not Found Page UI
🔧 Overview
This PR revamps the existing 404 Not Found page with a modern, interactive, and visually appealing design to improve the user experience when visiting invalid routes.
💡 What’s New
🎨 Added a floating “404” animation for a more engaging visual effect.
🧊 Implemented a glassmorphism-style card with soft blur and shadow effects.
🌈 Applied a gradient background for depth and vibrancy.
🪄 Introduced fade-in and float animations using CSS keyframes.
🔘 Enhanced button design with hover scaling and smooth transitions.
📱 Ensured responsive layout for all screen sizes.
🧠 Technical Details
Built using React and CSS-in-JS (inline styling for self-contained design).
Utilized keyframes (float, fadeIn) for smooth animation effects.
No external libraries or dependencies added.
Maintains clean, lightweight, and maintainable code structure.
🖼️ Before vs After
🚀 Result
Users now experience a polished and engaging 404 page that enhances the overall professionalism and aesthetic appeal of the website while keeping performance optimized.