Merge pull request #299 from ramith-kulal/update-contact-section

FIX: Text visibility in light mode
apu52 · Feb 24, 2024 · 6149b7f · 6149b7f
2 parents c7dec9e + 745878b
commit 6149b7f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -614,8 +614,7 @@ <h1>Contact Us</h1>
             <form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
               <input type="text" id="Name" placeholder="Name" required>
               <input type="email" id="email" placeholder="Email" required>
-              <h4>Type your message here..</h4>
-              <textarea required></textarea><br>
+              <textarea placeholder="Type your message here.." required ></textarea><br>
               <button onclick="sendMail()" class="btn btn-style" data-aos="fade-in" id="btn-style"
                 style="margin-right: 40px;">Send</button>
               <button onclick="window.location.href='feed.html'" class="btn  btn-style" data-aos="fade-in"

diff --git a/styles.css b/styles.css
@@ -1462,6 +1462,42 @@ textarea::-webkit-scrollbar {
     display: none;
   }
 }
+.contact-form input,
+.contact-form textarea {
+  width: 50%;
+  padding-left: 10px;
+  padding-bottom: 10px;
+  margin: 20px;
+  margin-left: 30px;
+  outline: none;
+  border: none;
+  font-size: 15px;
+  background: none;
+  border-bottom: 1px solid var(--text-dark); /* Change line color */
+  color: var(--text-dark);
+  font-family: 'Oxygen', sans-serif;
+}
+
+.contact-form input::placeholder,
+.contact-form textarea::placeholder {
+  color: var(--text-dark);
+}
+
+@media (max-width: 920px) {
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+}
+
+@media (max-width: 700px) {
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+}
 
 /* Custom scrollbar for WebKit browsers */
 body::-webkit-scrollbar {