[BUG] Poor Layout in Contact Us Section

[shantanu020]

Description

Description:

The "Contact Us" section of the project currently has a layout that affects user experience negatively. Below are the specific problems observed:

1. Alignment Issues: The form fields and buttons are misaligned, making the page look cluttered and unprofessional.
2. Mobile Responsiveness: The section is not optimized for mobile devices, leading to text overlapping and improper scaling.
3. Inconsistent Styling: The design of the "Submit" button does not match the theme of the rest of the website, leading to a disjointed look.
4. Spacing Problems: There is inconsistent padding and margin around form elements, which makes it difficult for users to easily navigate the section.
5. Missing Accessibility Features: The section does not follow accessibility best practices (e.g., labels for inputs are not properly associated).

Screenshots

Any additional information?

Expected Behavior:

• The layout should be responsive, with proper alignment of form fields and buttons on both desktop and mobile devices.
• Styling should be consistent with the overall theme of the website.
• Adequate padding and margins should be applied for a clean and organized appearance.
• Accessibility features such as properly labeled form fields should be included.

What browser are you seeing the problem on?

Microsoft Edge

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[shantanu020]

@ankit071105 Please assign me this issue