Skip to content

Commit

Permalink
Merge pull request #2913 from iking07/bug-alignment
Browse files Browse the repository at this point in the history 
Alignment of Contact-Us and Address section Updated
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Oct 5, 2024
2 parents 9c7415d + 5a1daf2 commit 8399a60
Showing 1 changed file with 101 additions and 36 deletions.
137 changes: 101 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3139,50 +3139,48 @@ <h3>Rate Us</h3>



<section class="section-contact" id="contact" aria-label="contact">
<section class="section-contact" id="contact" aria-label="contact">

<h1 class="ctc">CONTACT US!</h1>
<p class="p">Have a Question?</p>


<div class="flexi">

<div class="contact">
<h3 style="text-align: center; color: #A30F17;" >Get in touch</h3>
<div class="contact-container">

<form class="contact-form" id="contactForm">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<h1 class="ctc">CONTACT US!</h1>
<p class="p">Have a Question?</p>

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<div class="flexi">
<div class="contact">
<h3 style="text-align: left; color: #A30F17;">Get in touch</h3>
<div class="contact-container">
<form class="contact-form" id="contactForm">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>

<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>

<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject" required>

<button type="submit">Send Message</button>
</form>
<div class="image-fader">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>

<button type="submit">Send Message</button>
</form>
<div class="image-fader">
<img src="/assets/images/ctc1.png" alt="ctc1">
<img src="/assets/images/ctc5.png" alt="ctc5">
<img src="/assets/images/ctc3.png" alt="ctc3">
<img src="/assets/images/ctc4.png" alt="ctc4">
</div>
</div>
</div>
<div class="cardi">
</div>

<div class="address-side">
<div class="contact-card white-border-card">
<li>
<p class="card-title address-title">
<lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
Address :
</p><br>
<address class="address">
12, Nayabad <br>
12, Nayabad, <br>
Kolkata, India 700054
</address>
</li>
Expand All @@ -3201,8 +3199,78 @@ <h3 style="text-align: center; color: #A30F17;" >Get in touch</h3>
<a href="mailto:[email protected]" class="card-link">[email protected]</a>
</li>
</div>
</div>
</div>
</div>
<style>
.flexi {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: -100px; /* Shift both sections further left */
}

.contact {
flex: 0.75;
margin-right:-60px;
margin-top: 0;
margin-bottom: 17px;
}
.address-side {
flex: 0.25; /* Reduced flex value to make the address section narrower */
margin-left: -150px; /* Keep the left shift to bring it closer to the center */
margin-top: 0;
margin-right: 100px;
margin-bottom: 17px;

}


h1.ctc, p.p {
margin-bottom: 0;
}

.contact-container, .address-side {
margin-top: 0;
}

.contact-form {
display: flex;
flex-direction: column;
}

.contact-form input, .contact-form textarea {
margin-bottom: 20px;
padding: 10px;
font-size: 14px;
}

.contact-form button {
padding: 10px;
background-color: palevioletred;
color: #fff;
border: none;
cursor: pointer;
}

.image-fader img {
width: 100px;
margin: 5px;
}

.white-border-card {
border: 1px solid #fff;
padding: 20px;
}

.card-title {
font-weight: bold;
}

.card-link {
color:palevioletred;
text-decoration: none;
}
</style>
<style>
.map-container {
position: relative;
Expand All @@ -3217,17 +3285,14 @@ <h3 style="text-align: center; color: #A30F17;" >Get in touch</h3>
.map-container:hover iframe {
pointer-events:auto;
}
</style>
</style>
<iframe
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: 10px;padding: 1%; margin-bottom:20px; margin-top:10px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</section>

<div class="map-container">
<iframe
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; margin-bottom:30px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>


</section>

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script>
Expand Down

0 comments on commit 8399a60

Please sign in to comment.