Skip to content

Commit

Permalink
Merge pull request #291 from swathivemula7/contact-form
Browse files Browse the repository at this point in the history 
Contact form
  • Loading branch information
@akbatra567
akbatra567 authored Oct 24, 2024
2 parents 85c36f2 + bf979fa commit 307d82b
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 45 deletions.
174 changes: 130 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,44 @@
}


/* Navigation button styles */

.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
color: var(--primary-color);
padding: 30px;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s ease, opacity 0.3s ease;
}

.swiper-button-prev {
left: 20px;
}

.swiper-button-next {
right: 20px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: rgba(0, 0, 0, 0.3);
opacity: 1;

}



/* General Styles */
.container_1 {
padding: 50px 0;
Expand Down Expand Up @@ -418,8 +456,8 @@

/* General Styles */
#contact {
padding: 50px 0;
background-color: #f9f9f9;
padding: 50px 0;
margin-top: -9rem;
}

.container {
Expand All @@ -431,15 +469,37 @@
.row {
display: flex;
justify-content: space-between;
gap: 13rem;
align-items: flex-start;
flex-wrap: wrap;
}

.contact-left{
margin-top: 130px;
}

.contact-left,
.contact-right {
flex: 1;
min-width: 300px;
margin: 20px;

}

.line {
border: none;
height: 1px;
background-color: #333;
margin: 20px 0;
width: 100%;
}

.contact-left .line {
width: 70%;
margin: 20px auto; /* Center the line */
}

.contact-left p{
margin-bottom: 60px;
}

.sub-title {
Expand All @@ -458,37 +518,58 @@
color: #007bff;
}

form {
display: flex;
flex-direction: column;
/*Form styling*/
.contact-right {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-top: 40px;
}

form input,
form textarea {
.contact-right h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
background-color: #f9f9f9;
}

.contact-form {
background-color: #ffffff;
border-radius: 8px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
margin-bottom: 15px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
border-radius: 4px;
background-color: #e0f7fa;
color: #333;
}

form button {
.contact-form button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
background-color: #007bff !important;
color: #ffffff;
border: none;
border-radius: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}

form button:hover {
background-color: #0056b3;
.contact-form button:hover {
background-color: #0567d0 !important;
color: #fff;
}

#msg {
margin-top: 10px;
margin-top: 15px;
color: green;
font-size: 1rem;
}
Expand All @@ -497,14 +578,14 @@
@media screen and (max-width: 768px) {
.row {
flex-direction: column;
gap: 1rem;
align-items: center;
}

.contact-left,
.contact-right {
max-width: 100%;
margin: 0;
padding: 20px;
margin: 20px 0;
margin-left: -7rem;
}

.sub-title {
Expand Down Expand Up @@ -732,7 +813,8 @@ <h1>Explore Out Top Deals <br> From Top Rated Deaalers</h1>
<div class="services-container">
<div class="box">
<div class="box-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMbcTDQfyKWuPH727d_lUKN6tn_tUimpHg4w&s" alt="Maruti Suzuki Ertiga">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMbcTDQfyKWuPH727d_lUKN6tn_tUimpHg4w&s"
alt="Maruti Suzuki Ertiga">
</div>
<p>2023</p>
<h3>Maruti Suzuki Ertiga - 7 Seater</h3>
Expand All @@ -750,7 +832,8 @@ <h2>Rs.1700 <span>/day</span></h2>
</div>
<div class="box">
<div class="box-img">
<img src="https://imgd.aeplcdn.com/664x374/n/cw/ec/26742/swift-exterior-right-front-three-quarter-2.jpeg?q=80" alt="Maruti Suzuki Swift">
<img src="https://imgd.aeplcdn.com/664x374/n/cw/ec/26742/swift-exterior-right-front-three-quarter-2.jpeg?q=80"
alt="Maruti Suzuki Swift">
</div>
<p>2018</p>
<h3>Maruti Suzuki Swift - 5 Seater</h3>
Expand All @@ -759,7 +842,8 @@ <h2>Rs.1200 <span>/day</span></h2>
</div>
<div class="box">
<div class="box-img">
<img src="https://imgd-ct.aeplcdn.com/664x415/n/dzet6ra_1421855.jpg?q=80" alt="Toyota Innova Crysta">
<img src="https://imgd-ct.aeplcdn.com/664x415/n/dzet6ra_1421855.jpg?q=80"
alt="Toyota Innova Crysta">
</div>
<p>2016</p>
<h3>Toyota Innova Crysta - 7 Seater</h3>
Expand All @@ -768,7 +852,8 @@ <h2>Rs.4000 <span>/day</span></h2>
</div>
<div class="box">
<div class="box-img">
<img src="https://stimg.cardekho.com/images/carexteriorimages/630x420/Honda/Honda-City-2011-2013/2754/front-left-side-47.jpg" alt="Honda City">
<img src="https://stimg.cardekho.com/images/carexteriorimages/630x420/Honda/Honda-City-2011-2013/2754/front-left-side-47.jpg"
alt="Honda City">
</div>
<p>2013</p>
<h3>Honda City - 5 Seater</h3>
Expand Down Expand Up @@ -1024,6 +1109,9 @@ <h3>Rohan Gupta</h3>
<div class="swiper-pagination"></div>

</div>
<!-- Add Navigation -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>

Expand Down Expand Up @@ -1180,33 +1268,31 @@ <h2 class="accordion-header">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>

<p>If you have any questions, suggestions, feel free to contact us via the form or through any of the social media platforms below. We are always happy to connect and assist!</p>
<!-- Horizontal line before social icons -->
<hr class="line">
<div class="social-icon">
<a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>
<!-- Horizontal line after social icons -->
<hr class="line">
</div>
<div class="contact-right">
<h2>Any Queries?</h2>
<form name="submit-to-google-sheet" class="contact-form" method="post">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
</div>

</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
</div>


</section>


Expand Down Expand Up @@ -1370,4 +1456,4 @@ <h2>Words from Our Clients <span class="highlight">Inspiring Testimonials of Sat



</html>
</html>
5 changes: 5 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ var swiper = new Swiper(".review-slider", {
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next", // Link to the "next" button
prevEl: ".swiper-button-prev", // Link to the "prev" button
},
});
AOS.init({
Expand Down
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1140,7 +1140,7 @@ FAQ Section */ .container_1 {
font-weight: 700;
color: #242e4c;
text-align: center;
margin-bottom: 4rem;
margin-bottom: 2rem;
}

.accordion {
Expand Down

0 comments on commit 307d82b

Please sign in to comment.