Create a Custom 404 Page

[Thanhthanh392003]

Create a Custom 404 Page

Purpose: This pull request introduces a custom 404 error page aimed at enhancing user experience. The design is user-friendly and aims to keep users engaged even when they encounter an error. Key features of the new 404 page include:

Changes Made: To solve the problem of user experience when encountering a 404 error, I have developed a custom 404 error page for the website. Here is the step-by-step solution:

1. Design of the Custom 404 Page:
   • User-Friendly Interface: The page is designed to be visually appealing and easy to understand, helping users quickly grasp that the requested page is not available.
   • Clear Messaging: The page includes a prominent error message stating "404 - Page Not Found," along with a friendly suggestion to guide users back to useful areas of the site.
2. Navigation and Engagement:
   • Quick Links: The custom 404 page provides direct links to essential sections such as Home, Events, Team, and Gallery, allowing users to easily navigate the site instead of leaving.
   • Search Functionality: A search bar is included for users to look for specific content on the site, improving overall usability and keeping users engaged. When a user types a query and clicks the search button, they are redirected to a search results page, allowing them to find the content they need without leaving the site.
3. Visual Consistency:
   • Styling and Branding: The page maintains consistent styling with the rest of the website, utilizing similar colors, fonts, and layouts. This ensures a seamless transition for users who might navigate from the error page back to the main site.
4. Implementation Details:
   • HTML Structure: The 404 page is structured using HTML5, with semantic elements for better SEO and accessibility.
   • CSS Styling: Custom CSS is applied to enhance the visual appeal, including hover effects for buttons and a responsive layout to ensure usability across devices.
   • JavaScript Functionality: A small script is included to handle search functionality. When a user enters a query and clicks the search button, they are redirected to a search results page, maintaining a smooth user experience. Testing Instructions:
   • Access a non-existent URL to view the new 404 page.
   • Use the search bar to test its functionality.

Notes:

• Please let me know if there are any improvements needed or if any additional features are required!