Skip to content

Commit

Permalink
Update index.html with get in touch, address and map
Browse files Browse the repository at this point in the history 
Made Get in touch, address and map conatiner responsive and aligned neatly
  • Loading branch information
@divyalakshmi0
divyalakshmi0 authored Oct 6, 2024
1 parent d467b01 commit a025041
Showing 1 changed file with 208 additions and 72 deletions.
280 changes: 208 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -893,6 +893,146 @@
.subscribe:hover {
background-color: #2980b9; }

.section-contact {
padding: 60px 0;
background-color: #f9f9f9;
margin-bottom: 10px;
}

.ctc {
text-align: center;
color: #333;
font-size: 36px;
margin-bottom: 5px;
}

.p {
text-align: center;
color: #666;
margin-bottom: 10px;
}

.flexi {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}

/* Contact and Address Box */
.contact, .cardi {
flex-basis: 48%;
margin-bottom: 0;
}

/* Contact Form */
.contact {
background-color: #fff;
padding: 30px; /* Increased padding for better appearance */
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 600px; /* Set max width for larger screens */
width: 100%; /* Full width within the flex container */
height: fit-content;
transition: transform 0.3s; /* Smooth transition for hover effect */
}

.contact:hover {
transform: scale(1.02); /* Slightly enlarge on hover */
}

/* Contact Form Contents */
.contact-container {
display: flex;
flex-direction: column;
}

/* Form Fields */
.contact-form label {
font-weight: bold;
margin-bottom: 5px;
color: #333;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px; /* Increased padding for form fields */
margin-bottom: 15px; /* Reduced margin */
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}

.contact-form button {
background-color: #A30F17;
justify-content: center;
color: white;
padding: 12px 15px; /* Increased padding */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s; /* Smooth transition for hover */
}

.contact-form button:hover {
background-color: #811214;
}

/* Contact Card */
.contact-card {
display: flex;
justify-content: center;
background-color: white;
padding: 10px; /* Adjusted to reduce height */
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center; /* Center text inside the address box */
margin-left: 30%;
margin-top: 20px; /* Space above the card */
height: 310px;
}

/* Image Fader Section */
.image-fader img {
max-width: 150px; /* Increased width */
margin: 0 10px; /* Increased spacing */
justify-content: center;
transition: opacity 0.5s ease-in-out;
}

/* Google Map Section */
.map-container {
display: flex; /* Added to center */
justify-content: center; /* Center the map */
margin-top: 30px;
width: 100%;
}

.map-container iframe {
width: 100%;
height: 300px;
border-radius: 10px;
border: none;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
.flexi {
flex-direction: column;
align-items: center; /* Center items */
margin-bottom: 20px;
}

.contact, .cardi {
flex-basis: 130%;
max-width: 90%; /* Set max-width for smaller screens */
margin-bottom: 30px;
}

.map-container iframe {
height: 100px;
}


</style>
Expand Down Expand Up @@ -2999,85 +3139,81 @@ <h3>Rate Us</h3>
</div>

<script src="/assets/js/rate.js"></script>





<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>

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="your-email@example.com" required>

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

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

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

<!-- Image Fader Section -->
<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>

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="your-email@example.com" required>

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

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

<button type="submit">Send Message</button>
</form>
<!-- Image Fader Section -->
<center>
<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>
<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>
</center>
</div>
</div>

<!-- Contact Information Section -->
<div class="cardi">
<div class="contact-card white-border-card">
<ul>
<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>
<address class="address">
12, Nayabad<br>
Kolkata, India 700054
</address>
</li>
<li>
<p class="card-title phone-title">
<lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
Phone:
</p>
<a href="tel:9124421980" class="card-link">+91 9124421980</a>
</li>
<li>
<p class="card-title email-title">
<lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
Email:
</p>
<a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
</li>
</ul>
</div>
</div>

<!-- Google Map 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>
<!-- Contact Information Section -->
<div class="cardi">
<div class="contact-card white-border-card">
<ul>
<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>
<address class="address">
12, Nayabad<br>
Kolkata, India 700054
</address>
</li>
<li>
<p class="card-title phone-title">
<lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
Phone:
</p>
<a href="tel:9124421980" class="card-link">+91 9124421980</a>
</li>
<li>
<p class="card-title email-title">
<lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
Email:
</p>
<a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
</li>
</ul>
</div>
</div>

<!-- Google Map 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>
</div>
</section>


Expand Down Expand Up @@ -4232,4 +4368,4 @@ <h1>Privacy Notice</h1>
</script>
</body>

</html>
</html>

0 comments on commit a025041

Please sign in to comment.