Title: Improve Accessibility and Layout of 404 Error Page

[tamannaaaaa]

Is your feature request related to a problem? Please describe.

The current 404 error page lacks proper accessibility features and could benefit from an improved layout to provide a better user experience. This issue aims to enhance the page's accessibility by using semantic HTML elements and improving the overall layout to ensure that users of all abilities can easily understand and navigate the error page.

Describe the solution you'd like.

1. Semantic HTML and Accessibility: Introduce a container

   around the content of the error page. Utilize flexbox to center align the content both horizontally and vertically on the page. This will ensure a more accessible and visually appealing design.

2. Margin and Padding: Apply margin and padding settings to establish space between the content and the edges of the page. This will enhance the content's readability and prevent it from appearing cramped.

3. Adjust Styling for Headings and Paragraphs: Remove unnecessary margin from the

   and

   elements to maintain proper spacing and alignment. This will help improve the hierarchy of headings and enhance overall visual consistency.

Describe alternatives you've considered.

Enhanced user experience through a more visually appealing and well-structured layout.
Better alignment of headings and text to create a cohesive design.

Add any other context or screenshots about the feature request here.

No response

Record

• I agree to follow this project's Code of Conduct
• I have checked the existing issues
• I'm a GSSoC'23 contributor
• I want to work on this issue