Skip to content

Commit

Permalink
Enhanced Contact Section: Improved Form Design, Alignment, and Naviga…
Browse files Browse the repository at this point in the history 
…tion Integration new (#72)

Enhanced Contact Section: Improved Form Design, Alignment 

## Description
The font across the "Contact Us" section was changed to a more modern
and clean typeface, providing a consistent and professional look.
Form Alignment:

The contact form was enclosed in a well-defined box with a thin border
and rounded corners, enhancing its visual appeal.
The form now occupies 25% of the screen width on the right side of the
page, creating a balanced layout that leaves space for the Google Maps
integration on the left.
Spacing Adjustments:

The space between the input fields and the "Send Message" button was
reduced to make the form more compact and user-friendly.
Margins and paddings were fine-tuned to ensure proper alignment and
spacing throughout the form.
Google Maps Alignment:

The Google Maps iframe was aligned with the contact form, ensuring that
both elements sit at the same vertical level, creating a harmonious
layout for the page.
Submit Button Customization:

The "Send Message" button was redesigned with a new background color and
more rounded edges. Text alignment was centered perfectly, improving the
visual balance of the button.
Bottom Navigation Bar Integration:

A simplified version of the contact form was added to the bottom
navigation bar, making it easy for users to reach out from any section
of the website.
This form follows the same design principles, with consistent font and
padding adjustments, ensuring a cohesive user experience across the
site.


## Related Issues
#12 

- Closes #

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [ Enhancement] ()



![image](https://github.com/user-attachments/assets/fadc5a17-7cbc-424b-8cbc-1bea976a9bc0)




## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [x ] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [ x] I have updated my branch and synced it with 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.
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 2, 2024
2 parents 376efde + 079d2b4 commit b6a5b01
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 12 deletions.
23 changes: 21 additions & 2 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,9 +383,9 @@ div.deals:hover{
}

form {
padding-top: 20px;
/*padding-top: 20px;*/
display: grid;
padding-bottom: 100px;
/*padding-bottom: 100px;*/
}

label {
Expand Down Expand Up @@ -482,6 +482,24 @@ textarea {
.menu_items .items {
position: relative;
}


.form-control {
border-radius: 15px; /* Adjust the border radius */
padding-left: 40px; /* Space for the icon */
}

.input-icon {
position: relative;
}
.input-icon i {
position: absolute;
left: 10px; /* Positioning the icon */
top: 50%;
transform: translateY(-50%); /* Center the icon vertically */
color: gray; /* Icon color */
}

#contactForm {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -518,3 +536,4 @@ textarea {
cursor: pointer;
margin-top: 5px;
}

134 changes: 124 additions & 10 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
Expand Down Expand Up @@ -208,7 +210,7 @@
<div id="loader"></div>
</div>

<header style="font-family: Georgia;background-color: transparent;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;">
<header style=" font-family: Tahoma, sans-serif;background-color: transparent;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;">
<nav class="navbarbg" style="background-color: transparent;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;">
<ul id="header-items">
<li><a href="../index.html" style="color: hsl(203, 30%, 26%);">Home</a></li>
Expand All @@ -221,14 +223,15 @@

</header>

<!--
<section>
<div class="position-relative overflow-hidden p-0 m-0" style="background-color: transparent;">
<div class="container">
<div class=" text-center mt-5 ">
<h1 style="color: hsl(357, 82%,35%);font-family: Georgia;">Feel Free to Contact Us!</h1>
</div>
<div class="row ">
<div class="row">
<div class="col-lg-7 mx-auto">
<div class="card mt-2 mx-auto mb-5 p-4" style="background-color: transparent;">
<div class="card-body" style="background-color: transparent;">
Expand Down Expand Up @@ -289,15 +292,110 @@ <h1 style="color: hsl(357, 82%,35%);font-family: Georgia;">Feel Free to Contact
</div>
</div>
</div>
</div>
</div><br><br>
<center>
<iframe id="if" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</center>
<br><br><br>
</div>
</section>
-->


<section>
<div class="position-relative overflow-hidden p-0 m-0" style="background-color: transparent;">
<div class="container">
<div class="text-center mt-5">
<h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free to Contact Us!</h1>
</div><br>

<div class="row mt-4">
<!-- Left Column - Contact Form -->
<div class="col-lg-7">
<div class="card mt-2 mx-auto mb-5 p-4" style="background-color: transparent; border: 1px solid black;">
<div class="card-body" style="background-color: transparent;">
<div class="container" style="background-color: transparent;">
<form action="/submit" method="POST" id="contact-form" role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name" 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.">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname" 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.">
</div>
</div>
</div>
</div><br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<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"
data-error="Name is required.">
</div>
</div>
</div>
</div><br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message" style="font-family: Georgia;">Message *</label>

<textarea id="form_message" name="message" class="form-control"
placeholder="Write your message here." style="height: 100px; width: 100%;" required="required"
data-error="Please, leave us a message."></textarea>

</div>
</div>
<div class="col-md-4 mt-4">
<input type="submit" class="btn btn-send btn-block"
value="Send Message" style="background-color: #ffc1b7; color: black; text-align: center; font-family: var(--ff-philosopher); padding: 12px 0; border: 1px solid black; height: 50px; line-height: 26px;">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- Right Column - Google Maps -->
<div class="col-lg-5">
<center>
<iframe id="if" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
style="border:0; width: 100%; height: 440px;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</center>
</div>
</div>
</div>
<br><br>
</div>
</section>

<!-- CSS for the icon and border radius -->


<footer style="font-family: Garamond;">

<footer style="font-family: Tahoma, sans-serif;">


<div class="foot-panel2">
Expand Down Expand Up @@ -332,14 +430,30 @@ <h1 style="color: hsl(357, 82%,35%);font-family: Georgia;">Feel Free to Contact
</ul>


<form id="contactForm" style="color: black;">
<h3>Contact Us!</h3>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<div class="row">
<div class="col-12">
<form id="contactForm" style="color: black; border: 1px solid #ccc; padding: 20px; border-radius: 10px; width: 100%; margin-left: auto;">
<h3 style="text-align: center; margin-bottom: 15px;">Contact Us!</h3>

<!-- Email Input -->
<input type="email" id="email" name="email" placeholder="Your Email" required
style="width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 10px; border: 1px solid #ccc;">

<!-- Message Textarea -->
<textarea id="message" name="message" placeholder="Your Message" required
style="width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 10px; border: 1px solid #ccc; height: 100px;"></textarea>

<!-- Submit Button -->
<button id="butt" type="submit"
style="width: 100%; padding: 10px; background-color: #ffe1d9; color: black; border: 1px; border-radius: 10px; cursor: pointer;">
Send Message
</button>
</form>
</div>
</div>


<textarea id="message" name="message" placeholder="Your Message" required></textarea>

<button id="butt" type="submit">Send Message</button>
</form>

</div>

Expand Down

0 comments on commit b6a5b01

Please sign in to comment.