Merge pull request #251 from Archisman141/fix/contact_page_UI

Contact Form UI & Responsiveness Fixed
swaraj-das · Oct 11, 2024 · 870d228 · 870d228
2 parents 6dd3bac + 023cb02
commit 870d228
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -423,6 +423,9 @@ <h1 class="reviews-title">What Our Customers Say</h1>
                         <h2>Contact Us</h2>
                     </div>
                     <div class="card-body">
+                        <div class="image-section">
+                            <img src="images/7725176.jpg" alt="Contact Image"style="max-width: 80%; height: auto; max-height: 500px;">
+                        </div>
                         <div class="form-section">
                             <form>
                                 <div class="form-group">
@@ -440,9 +443,7 @@ <h2>Contact Us</h2>
                                 <button type="submit">Send</button>
                             </form>
                         </div>
-                        <div class="image-section">
-                            <img src="images/7725176.jpg" alt="Contact Image"style="max-width: 80%; height: auto; max-height: 500px;">
-                        </div>
+
                     </div>
                 </div>
             </section>

diff --git a/style.css b/style.css
@@ -15,13 +15,16 @@
     padding: 10px;
     margin-bottom: 15px;
     text-align: center;
-    width: 90%;
     border-bottom: 1px solid #ddd;
     border-radius: 6px;
+    align-items: center;
   }
 .card-body {
     display: flex;
-    justify-content: space-between; /* Form on the left and image on the right */
+    width: 90%;
+    margin: 20px auto;
+    padding: 20px;
+    justify-content: space-between; /* Form on the right and image on the left */
     align-items: flex-start; /* Align content to the top */
 }
 
@@ -30,10 +33,11 @@
 }
 
 .image-section {
-    width: 50%; /* Width for the image section */
+    width: 80%; /* Width for the image section */
     display: flex;
     justify-content: center; /* Center the image */
     align-items: center;
+    height: 70%;
 }
 
 .image-section img {
@@ -870,6 +874,48 @@ button:hover img {
         font-size: 20px;
     }
 
+    input, textarea {
+        width: 160%; /* Adjust width for better alignment */
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    .card-body {
+        display: flex;
+        width: 90%;
+        margin: 20px auto;
+        padding: 20px;
+        justify-content: space-between; /* Form on the right and image on the left */
+        align-items: flex-start; /* Align content to the top */
+        flex-direction: column;
+    }
+
+    .image-section {
+        width: 90%; /* Width for the image section */
+        display: flex;
+        justify-content: center; /* Center the image */
+        align-items: center;
+        margin-bottom: 8px;
+    }
+    .form-section {
+        width: 50%; /* Width for the form section */
+    }
+
+
+
+    .image-section img {
+        max-width: 120%; /* Make sure image does not exceed its container width */
+        height: auto;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+
     .footer-content {
         flex-direction: column;
         align-items: center;
@@ -887,7 +933,6 @@ button:hover img {
     .footer-bottom {
         max-width: fit-content;
     }
-
 }