Merge pull request #83 from e20178dulanga/main

Contact page updated
cepdnaclk · Sep 13, 2024 · 6e86cb1 · 6e86cb1
2 parents d64796e + 4c1a11f
commit 6e86cb1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/front-end/src/Pages/Contact.jsx b/front-end/src/Pages/Contact.jsx
@@ -54,13 +54,18 @@ function Contact() {
     </div>
     </div>
 
+
     {/* Contact Us form */}
+
+    <div className = "ContactUsTitle">
+      <h3>Contact Us</h3>
+      <p className = "ContactUsSubTitle">For inquiries or support, contact us and we'll respond promptly</p>
+    </div>
+
     <div className = "contactUsForm">
       <img className="contactImg" src={contactImg} alt="contactImg" /> 
       <form>
-        <div className = "ContactUsTitle">
-          <h3>Contact Us</h3>
-        </div>
+
         <div className = "inputbox">
         <label>Full Name</label>
         <input type = "text" className = "field" placeholder = "Enter your Full Name" name = "user_name" required/>

diff --git a/front-end/src/components/Contact.css b/front-end/src/components/Contact.css
@@ -109,36 +109,37 @@
 /* ** Contact Us Form** */
 
 .contactUsForm {
-    border: 2px solid rgba(10, 48, 128);
-    border-radius: 1em;
-    /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1), 
-                -2px -2px 5px rgba(255, 255, 255, 0.7), 
-                2px -2px 5px rgba(255, 255, 255, 0.7), 
-                -2px 2px 5px rgba(63, 108, 148, 0.1); */
     flex-direction: center;
     display: flex;
     align-items: center;
-    padding: 15px;
+    padding: 10px;
     margin-left: 5%;
     margin-right: 5%;
-    margin-top: 1%;
     margin-bottom: 5%;
     text-align: left;
     font-size: 20px;
 }
 
 /* The contact us form title */
-.ContactUsTitle {
-    text-align: left;
-    color:hsl(211, 81%, 20%);
-    font-size: 20px;
+.ContactUsTitle h3{
+    text-align: center;
+    color:hsl(0, 0%, 0%);
+    font-size: 24px;
+    font-family: 'Caudex';
+    font-weight: bolder;
+}
+
+.ContactUsSubTitle {
+    font-size: 16px;
+    color: #36373a;
+    text-align: center;
 }
 
 /* The Image in contact us form */
 .contactUsForm img{
     width: auto;
     height: 400px;
-    margin-top: 260px;
+    margin-top: 200px;
     margin-right: 20px;
     margin-left: 20px;
 }
@@ -152,7 +153,7 @@
 /* Data input boxes and their topics */
 .inputbox {
     margin-top: 20px;
-    width: 450px;
+    width: 400px;
     margin-right: 20px;
     font-size: 18px;
 }
@@ -221,4 +222,7 @@ form button:hover{
         width: 350px;
 
     }
+    .ContactUsSubTitle {
+        margin-left: 1%;
+    }
 }