Merge pull request #821 from DevROHIT11/issue1

Enhancing the contact-us section of home page
ankit071105 · Oct 30, 2024 · 9f2a0ae · 9f2a0ae
2 parents 9448e6d + 09c2bbc
commit 9f2a0ae
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -644,10 +644,13 @@ <h2>- Neha Rajput</h2>
     <div id="sxs"
         style="display: flex; align-items: center;justify-content: center;flex-direction: column;max-width: 80vw;align-self: center;justify-self:center">
         <div id="contact2" class="contact2"
-            style=" background-color: white; padding: 20px;display: flex;  margin: auto; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); width: auto;">
+            style=" background-color: rgb(0, 0, 0); padding: 20px;display: flex;  margin: auto; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); width: auto;">
             <!-- Left Section -->
             <div class="contact2-div1"
-                style="max-width: 100%; border-radius: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); padding: 30px; color: white; display: flex; flex-direction: column; justify-content: center;">
+                style="max-width: 100%; border-radius: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); padding: 30px; color: white; display: flex; flex-direction: column; justify-content: center;  -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                color: transparent;">
                 <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;">Contact Us</h2>
                 <p style="color: white;font-size: 16px; line-height: 1.6; margin-bottom: 20px;">We value your feedback!
                     Reach out for inquiries, feedback, or support. Your insights help us improve your experience.</p>
@@ -678,16 +681,16 @@ <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;
                 <form style="width: 100%;">
                     <div style=" display: flex; gap: 30px; margin-bottom: 20px;margin-top: 50px;">
                         <input type="text" placeholder="Name"
-                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 10px; outline: none; transition: border-color 0.3s; background-color:#c4c2c2; ">
                         <input type="email" placeholder="Email"
-                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 10px; outline: none; transition: border-color 0.3s; background-color:#c4c2c2;">
                     </div>
                     <input type="text" placeholder="Subject"
-                        style="width: 100%; padding: 10px; margin-bottom: 20px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                        style="width: 100%; padding: 10px; margin-bottom: 20px; border-bottom: 2px solid #ccc; border-radius: 10px; outline: none; transition: border-color 0.3s; background-color:#c4c2c2;">
                     <textarea placeholder="Message" rows="4"
-                        style="width: 100%; padding: 10px; margin-bottom: 20px;border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;"></textarea>
+                        style="width: 100%; padding: 10px; margin-bottom: 20px;border-bottom: 2px solid #ccc; border-radius: 10px; outline: none; transition: border-color 0.3s; background-color:#c4c2c2;"></textarea>
                     <button type="submit"
-                        style="width: 100%;margin-bottom: 50px; padding: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Send
+                        style="width: 100%;margin-bottom: 50px; padding: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; ">Send
                         Message</button>
                 </form>
             </div>

diff --git a/styles.css b/styles.css
@@ -219,7 +219,21 @@ form {
   max-width: 600px;
   margin: 0 auto;
 }
-
+input {
+  border-radius: 20px;
+}
+input:hover{
+  box-shadow: -4px 4px 13px 0px rgb(112, 194, 253);
+}
+input::placeholder{
+  color: black;
+}
+textarea::placeholder{
+  color: black;
+}
+textarea:hover{
+  box-shadow: -4px 4px 13px 0px rgb(112, 194, 253);
+}
 input,
 select {
   padding: 15px;