updated

index.html

@@ -70,7 +70,7 @@
                                             </div>
                                         </li>
                                         <li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
-                                            <a class="nav-link" href="contact.html">Contacts</a>
+                                            <a class="nav-link" href="#contact">Contacts</a>
                                         </li>
                                     </ul>
                                 </div>
@@ -559,37 +559,34 @@ <h1></h1>
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="mt-6">
+    <section id="contact" class="mt-6 ">
         <div class="container">
-            <div class="row">
-                <h1 class="title mt-4 col-5 offset-6"><b>Get in Touch</b></h1>
-                <p class="col-7 offset-5">If you have any questions or inquiries, feel free to Ask us</p>
-            </div>
-        </div>
-        <div class="row">
-            <form class="col-5 offset-6">
-                <div>
-                    <label for="name" class="form-label"></label>
-                    <input type="text" class="form-control" id="name" placeholder="Your Name" required>
-                </div>
-                <div>
-                    <label for="email" class="form-label"></label>
-                    <input type="text" class="form-control" placeholder="Email address" id="email">
-                </div>
-                <div>
-                    <label for="number" class="form-label"></label>
-                    <input type="number" class="form-control" placeholder="Phone number" id="number" required>
-                </div>
-                <div>
-                    <label for="name" class="form-label"></label>
-                    <textarea type="text" class="form-control" placeholder="Your message" id="name" rows="4"
-                        required></textarea>
+            <div class="row justify-content-center">
+                <!-- Image goes on the left -->
+                <div class="col-md-5 ">
+                    <img src="assets/contactus.png" alt="Contact Image" class="img-fluid mb-4" />
                 </div>
-                <div class="col-4 offset-4 mb-3 mt-4">
-                    <button type="submit" class="btn btn-primary"
-                        style="align-items: center;"><span>Submit</span></button>
+                <!-- Contact form content on the right -->
+                <div class="col-md-7 ">
+                    <h1 class="title mt-4"><b>Get in Touch</b></h1>
+                    <p>If you have any questions or inquiries, feel free to Ask us</p>
+                    <form class="mt-4">
+                        <div class="mb-4">
+                            <input type="text" class="form-control" id="name" placeholder="Name" required>
+                        </div>
+                        <div class="mb-4">
+                            <input type="email" class="form-control" placeholder="Your Email" id="email" required>
+                        </div>
+                        <div class="mb-4">
+                            <textarea class="form-control" placeholder="Your Message" id="message" rows="4"
+                                required></textarea>
+                        </div>
+                        <div class="d-flex justify-content-center mb-3">
+                            <button type="submit" class="btn btn-primary btn-lg"><span>Submit</span></button>
+                        </div>
+                    </form>
                 </div>
-            </form>
+            </div>
         </div>
     </section>
     <!-- Footer Section -->

styles.css

@@ -733,73 +733,3 @@ form button:hover {
         margin: auto;
     }
 }
-#contact {
-    text-align: center;
-    box-shadow: rgba(102, 104, 127, 0.37) 8px 10px 32px 0px;
-    backdrop-filter: blur(24.5px);
-    background: moccasin; /* Change the background color to match other pages */
-    border-radius: 30px;
-    border: 1px solid #edeced;
-    display: block;
-    margin: 4vw 20vw 2vw 20vw;
-    padding: 20px; /* Add padding to improve spacing */
-}
-
-.contact-content {
-    display: flex;
-    justify-content: space-between;
-}
-
-form {
-    flex: 1;
-    margin-right: 18px;
-    margin-top: 25px;
-    text-align: center; /* Center align form elements */
-}
-
-form input:not(.message-textarea),
-form textarea:not(.message-textarea) {
-    text-align: center;
-    display: block;
-    border-radius: 10px;
-    border-color: aliceblue;
-    margin: 0 auto 10px;
-    width: 80%;  /* Adjust the width for responsiveness */
-    height: 40px; /* Adjust the height as needed */
-    font-size: 1.2rem; /* Adjust the font size to match other pages */
-}
-
-.map {
-    flex: 1;
-}
-
-.map iframe {
-    width: 100%;
-    border-radius: 10px; /* Adjust the border-radius as needed */
-}
-
-
-@media screen and (max-width: 768px) {
-    .contact-content {
-        flex-direction: column; /* Change flex direction to column for smaller screens */
-    }
-
-    form {
-        margin-bottom: 40px; /* Adjust the margin for smaller screens */
-    }
-
-    form input:not(.message-textarea),
-    form textarea:not(.message-textarea) {
-        width: 100%; /* Make input fields 100% width on smaller screens */
-    }
-
-    .map iframe {
-        width: 100%; /* Make the map iframe 100% width on smaller screens */
-    }
-}
-In the code above, I've added a media query that applies the specified styles for screens with a maximum width of 768px (tablet and mobile devices). This allows your layout to adapt and be more responsive on smaller screens by stacking elements vertically and making input fields and the map iframe full-width. Adjust the values in the media query to suit your design preferences further.
-
-
-
-
-