Merge pull request #428 from nishant0708/contact-form

[Feature Request]: Want to update Ui of Get in Touch page #412
MAVRICK-1 · Jun 30, 2024 · fac6d98 · fac6d98
2 parents 4becc36 + 94b0cd3
commit fac6d98
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/pages/Contactus/Contactus.jsx b/src/pages/Contactus/Contactus.jsx
@@ -93,7 +93,7 @@ export default function Contactus() {
               Get In Touch
             </h1>
             <div className="inside-contact">
-              <form ref={form}>
+              <form ref={form} className='contact-form'>
                 {/* <div className="contact-input contact-input-light">
                   <TextField
                     id="user_name"

diff --git a/src/pages/Contactus/contactus.css b/src/pages/Contactus/contactus.css
@@ -277,7 +277,7 @@
   margin: auto;
   margin-top: 15%;
   width: 90vw;
-  max-width: 600px;
+  /* max-width: 600px; */
 }
 @media (max-width: 600px) {
   .contact-section-light {
@@ -289,34 +289,50 @@
 .contact-card {
   backdrop-filter: blur(16px) saturate(127%);
   -webkit-backdrop-filter: blur(16px) saturate(127%);
-  background-color: rgba(55, 186, 126, 0.62);
+  background-color: rgba(192, 255, 204, 0.199);
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.125);
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.282);
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   padding: 40px 0;
-  height: 600px;
+
 }
 
 .contact-card h1 {
-  font-size: 40px;
-  font-weight: 700;
-  color: white;
+  font-size: 72px;
+  font-weight: 800;
+  color: rgb(8, 90, 31);
   letter-spacing: 1px;
 }
 
 .contact-card input {
-  color: black;
-  background: white;
+  color: rgb(1, 80, 0);
+  background-color: rgba(192, 255, 204, 0.199);
+border: 1px solid darkgreen;
+}
+.contact-card input::placeholder{
+  color: darkgreen;
+}
+
+.contact-card input:focus{
+  background-color: rgba(58, 137, 58, 0.208);
 }
 .inside-contact {
   /* background: #000; */
   width: 90%;
 }
-
+.contact-form{
+  display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 70%;
+    height: 430px;
+    /* padding: 50px; */
+    margin: auto;
+}
 form {
   display: flex;
   flex-direction: column;