Fixed Icon Overlap and Alphabet Input Allowed in Phone Number Field (#87

)

### [bug]: Icon Overlap and Alphabet Input Allowed in Phone Number Field

## Description
This pull request fixes the following issues:
1. **Icon overlap**: The input text was overlapping with the icons in
the email, phone number, and name fields. Padding has been adjusted to
ensure proper alignment between the icons and the input text.
2. **Alphabet input in the phone number field**: The phone number field
was previously accepting alphabetic characters. The input type has been
changed to `tel`, and a validation pattern has been added to restrict
input to only numeric characters.

## Related Issues
- Closes #82

## Type of PR
- [X] Bugfix

## Screenshots / Videos (if applicable)
*Before Fix:*

![image](https://github.com/user-attachments/assets/9a408c95-762e-471d-912c-f8e89f75e6d7)

*After Fix:*

![image](https://github.com/user-attachments/assets/18c54bb5-e8a6-4fea-a002-8228cfb5ab0f)

## Checklist
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with the project `main`
branch before making this PR.
- [X] I have performed a self-review of my code.
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.

## Additional Context:
None

Css-files/content.css

@@ -499,6 +499,10 @@ textarea {
         transform: translateY(-50%); /* Center the icon vertically */
         color: gray; /* Icon color */
     }
+.input-icon input, 
+.input-icon textarea {
+      padding-left: 30px; /* Adjust padding to create space for the icon */
+}
 
 #contactForm {
   display: flex;

Html-files/contact.html

@@ -320,23 +320,23 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                         <div class="row">
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_name" style="font-family: Georgia;">Email *</label>
+                                                    <label for="form_email" style="font-family: Georgia;">Email *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-envelope"></i>
-                                                        <input id="form_name" type="text" name="name" class="form-control"
-                                                            placeholder="     Please enter your Email*" required="required"
-                                                            data-error="  Valid Email is required.">
+                                                        <input id="form_email" type="email" name="email" class="form-control"
+                                                            placeholder="Please enter your email*" required="required"
+                                                            data-error="Valid Email is required.">
                                                     </div>
                                                 </div>
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="form-group">
-                                                    <label for="form_lastname" style="font-family: Georgia;">Phone number *</label>
+                                                    <label for="form_phone" style="font-family: Georgia;">Phone number *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-phone"></i>
-                                                        <input id="form_lastname" type="text" name="surname" class="form-control"
-                                                            placeholder="     Please enter your Phone number*" required="required"
-                                                            data-error="  Phone number is required.">
+                                                        <input id="form_phone" type="tel" name="phone" class="form-control"
+                                                            placeholder="Please enter your phone number*" required="required"
+                                                            pattern="[0-9]{10}" data-error="Phone number is required.">
                                                     </div>
                                                 </div>
                                             </div>
@@ -347,8 +347,8 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
                                                     <label for="form_email" style="font-family: Georgia;">Name *</label>
                                                     <div class="input-icon">
                                                         <i class="fas fa-user"></i>
-                                                        <input id="form_email" type="email" name="email" class="form-control"
-                                                            placeholder="     Please enter your Name*" required="required"
+                                                        <input id="form_name" type="text" name="name" class="form-control"
+                                                            placeholder="Please enter your name*" required="required"
                                                             data-error="Name is required.">
                                                     </div>
                                                 </div>