[Enhancement]: Improve 404 Page Design and Mobile Responsiveness

[AR21SM]

Description

The current 404 error page functions correctly but feels visually dated and lacks proper mobile responsiveness.

update this page to be more welcoming, accessible, and visually consistent with the rest of the DISCOVER Cookbook (like index page).

File Location: DISCOVER/404.html

[gauriagwl864]

Hi, I would like to work on improving the 404 page design and its mobile responsiveness.
Please assign this issue to me.
Thankyou!

[Suraj-kummar]

hyy can you assign this issue to me.... i feel effervescent of this project....

appreciate it

[anushkakedari]

I have gone through this issue, and I am willing to solve this issue. Can u assign it to me?

[Aditya30ag]

I had create the PR Please review

[Adrija-verse]

Hi team! I've submitted a PR to address this issue with comprehensive improvements to the 404 page. Key improvements implemented:

• Mobile Responsiveness - Added responsive breakpoints for tablets (768px), mobile phones (480px), and small phones (320px) with optimized layouts for each screen size

• Enhanced Design - Improved color scheme, gradient effects, glassmorphism, and visual hierarchy for a more professional appearance

-Accessibility - Added proper ARIA labels, security attributes for external links, and prefers-reduced-motion support

• Bug Fixes - Fixed emoji encoding and improved overall contrast for better readability

The page has been tested across multiple viewports and is now fully responsive. Would love to get your feedback on the implementation!
Thank you for the opportunity to contribute!

[Divyanshudevtalla]

Hi, @AR21SM I’ve updated the 404 page UI to better align with the design and layout used in index.html, focusing on visual consistency and responsiveness.

While working on this, I had a couple of ideas for possible further improvements, such as:

• Highlighting the “404 / Not Found” text more clearly (for example, using a stronger color like red)
• Adding or improving language/microcopy to make the error message more helpful or user-friendly

I didn’t include these changes yet to avoid expanding the scope without confirmation. Please let me know if you think these would be useful additions, and I’d be happy to work on them.

[Sanika123-art]

previous page

After changes

The Netlify deploy failure appears unrelated to the 404 page UI changes. what should i do please guide me