Skip to content

Commit

Permalink
Contact form created
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dipeshdahiya
Dipeshdahiya committed Oct 28, 2024
1 parent 9673398 commit 680ce86
Showing 1 changed file with 112 additions and 13 deletions.
125 changes: 112 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,21 +542,120 @@ <h2>- Neha Rajput</h2>



<div class="containers" id="sxs">
<div id="contact" class="contact-info">
<div style="padding-left: 30px;">
<h2 style="text-align:left">Contact Us</h2>
<p style="color: white;font-size: 16px;">We value your feedback! We'd love to hear from you! For
inquiries, feedback, or support, please reach out. Your insights help us improve your experience.
</p>

<h4>Localisation</h4>
<p style="color: white;font-size: 16px;">ABC colony, Bangalore Pin: 76896</p>

<h4>Phone No</h4>
<p style="color: white;font-size: 16px;">+91 9685478526</p>
<div id="sxs"
style="display: flex; align-items: center;justify-content: center;flex-direction: column;max-width: 80vw;align-self: center;justify-self:center">
<div id="contact2" class="contact2"
style=" background-color: white; padding: 20px;display: flex; margin: auto; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); width: auto;">
<!-- Left Section -->
<div class="contact2-div1"
style="max-width: 100%; border-radius: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); padding: 30px; color: white; display: flex; flex-direction: column; justify-content: center;">
<h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;">Contact Us</h2>
<p style="color: white;font-size: 16px; line-height: 1.6; margin-bottom: 20px;">We value your feedback!
Reach out for inquiries, feedback, or support. Your insights help us improve your experience.</p>

<div style="display: flex; gap: 10px; margin-top: 20px;">
<!-- Location Icon and Text -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24">
<path
d="M12 2c-3.866 0-7 3.134-7 7 0 4.506 6.24 11.084 6.532 11.384.197.208.473.316.751.316s.554-.108.75-.316c.292-.3 6.533-6.878 6.533-11.384 0-3.866-3.134-7-7-7zm0 9c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z" />
</svg>
<p style="color: white; font-size: 16px;">ABC Colony, Bangalore, Pin: 76896</p>
</div>

<div style="display: flex; gap: 10px; margin-top: 20px;">
<!-- Phone Icon and Text -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24">
<path
d="M6.615 10.193c1.513 3.142 4.05 5.676 7.195 7.193l1.767-1.767c.282-.282.682-.382 1.043-.294 1.149.285 2.37.437 3.64.437.552 0 1 .447 1 1v3.625c0 .552-.448 1-1 1-10.493 0-19-8.507-19-19 0-.553.448-1 1-1h3.625c.552 0 1 .447 1 1 0 1.27.152 2.491.437 3.64.087.361-.012.762-.294 1.043l-1.767 1.767z" />
</svg>
<p style=" color: white; font-size: 16px;">+91 9685478526</p>
</div>


</div>

<!-- Right Section (Contact Form) -->
<div class="contact-form" style="display: flex;align-items: center;justify-content: center;width: 100%;">
<form style="width: 100%;">
<div style=" display: flex; gap: 30px; margin-bottom: 20px;margin-top: 50px;">
<input type="text" placeholder="Name"
style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
<input type="email" placeholder="Email"
style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
</div>
<input type="text" placeholder="Subject"
style="width: 100%; padding: 10px; margin-bottom: 20px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
<textarea placeholder="Message" rows="4"
style="width: 100%; padding: 10px; margin-bottom: 20px;border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;"></textarea>
<button type="submit"
style="width: 100%;margin-bottom: 50px; padding: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Send
Message</button>
</form>
</div>
</div>
<style>
/* Container style for input and textarea */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: none;
border-bottom: 2px solid #ccc;
border-radius: 0;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}

/* Focus style */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-bottom: 2px solid #0077cc;
}

input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover {
border-bottom: 2px solid #0077cc;
}

/* Button styling */
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #b0b0b0;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

/* Button hover effect */
button[type="submit"]:hover {
background-color: #005fa3;

}

@media (max-width: 1000px) {
.contact2 {
flex-direction: column;
}

}
</style>


<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126915.40242030277!2d85.7892607!3d20.2498709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a19a7a3b9692fff%3A0x87cd0a356bbc39ce!2sITER%2C%20Siksha%20'O'%20Anusandhan!5e0!3m2!1sen!2sin!4v1689514124518!5m2!1sen!2sin"
allowfullscreen>
</iframe>
</div>
</div>
</footer>


Expand Down

0 comments on commit 680ce86

Please sign in to comment.