Merge pull request #291 from swathivemula7/contact-form

akbatra567 · web-flow · commit 307d82bb1abf · 2024-10-24T11:28:20.000+05:30
Contact form
diff --git a/index.html b/index.html
@@ -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;
@@ -418,8 +456,8 @@
 
         /* General Styles */
         #contact {
-            padding: 50px 0;
-            background-color: #f9f9f9;
+            padding:  50px 0;
+            margin-top: -9rem;
         }
 
         .container {
@@ -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 {
@@ -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;
         }
@@ -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 {
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
 
@@ -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>
 
 
@@ -1370,4 +1456,4 @@ <h2>Words from Our Clients <span class="highlight">Inspiring Testimonials of Sat
 
 
 
-</html>
+</html>
diff --git a/main.js b/main.js
@@ -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({
diff --git a/style.css b/style.css
@@ -1140,7 +1140,7 @@ FAQ Section */ .container_1 {
   font-weight: 700;
   color: #242e4c;
   text-align: center;
-  margin-bottom: 4rem;
+  margin-bottom: 2rem;
 }
 
 .accordion {

Original file line number	Diff line number	Diff line change
`@@ -1140,7 +1140,7 @@ FAQ Section */ .container_1 {`
`1140`	`1140`	`font-weight: 700;`
`1141`	`1141`	`color: #242e4c;`
`1142`	`1142`	`text-align: center;`
`1143`		`- margin-bottom: 4rem;`
	`1143`	`+ margin-bottom: 2rem;`
`1144`	`1144`	`}`
`1145`	`1145`
`1146`	`1146`	`.accordion {`