Contact Us page proper alignment

Annapoornaaradhya · Oct 17, 2024 · ba5a87b · ba5a87b
1 parent 7cc1e76
commit ba5a87b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -710,8 +710,8 @@ <h2 style="color: white;">Welcome to the Canvas Editor!</h2>
         </div>
 
 
-            </div>
-            <div class="container mt-5">
+        <div class="contact-us-page">
+            <div class="contact-container">
                 <!-- Contact Us Section -->
                 <section id="contact" class="contact-section text-center py-5">
                     <h2 class="mb-4">Contact Us</h2>
@@ -720,7 +720,7 @@ <h2 class="mb-4">Contact Us</h2>
                     <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-facebook.png">         
                     <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-google.png">
                     <img class="link-img" src="https://workik-widget-assets.s3.amazonaws.com/Footer1-83/v1/images/Icon-instagram.png">
-                </div>
+                  </div>
                     <form id="contactForm" class="row g-3 justify-content-center">
                         <!-- Name Field -->
                         <div class="col-md-4">
@@ -759,7 +759,6 @@ <h2 class="mb-4">Contact Us</h2>
                         <div class="col-md-8">
                             <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
                         </div>
-                        </div>
                     </form>
                 </section>
             </div>
@@ -778,15 +777,14 @@ <h2 class="mb-4">Contact Us</h2>
                         <div class="cal">
                             <h4>Your<br><span>Message</span></h4>
                             <!-- <div class="input-box"> -->
-                                <textarea class="form-control" id="message" name="message" placeholder="Type your message here..." style="height: 350px; width: 800px;" required></textarea>
-
+                                <textarea class="form-control" id="message" name="message" placeholder="Type your message here..." style="height: 350px; width: 800px;margin-right:80px;" required></textarea>
 
                             <p id="result"></p>
                         </div>
                     <!-- Submit Button -->
                     <div class="col-md-12 d-flex justify-content-center">
                         <div class="col-md-8">
-                            <button type="submit" class="btn btn-primary w-100 py-2">Submit</button>
+                            <button type="submit" class="btn w-100 text-center" style="padding-left:250px;margin-right:500px;">Submit</button>
                         </div>
                     </div>
                 </form>
@@ -1247,6 +1245,4 @@ <h3>Thank You!</h3>
 </body>
 
 
-</html>
-
-</html>
+</html>
diff --git a/src/Styles/contact_us_style.css b/src/Styles/contact_us_style.css
@@ -32,4 +32,28 @@
     border-color: #80bdff;
     outline: none;
     box-shadow: none;
-  }
+  }
+
+.contact-us-page{
+  display:flex;
+  justify-content: center;
+  align-items:center;
+}
+
+.contact-container{
+  width:100%;
+}
+
+#contact{
+  width:100%;
+}
+
+#contactForm textarea{
+    width:550px;
+}
+
+#contactForm button{
+  margin-left:6em;
+  text-align: center;
+  padding:9rem;
+}