Update contact.css

Here’s an improved version of your Contact page HTML and CSS to enhance the UI and change the text color for better visibility. The changes include modifying the text color, adding background colors, and enhancing the overall layout for a more user-friendly experience.

css/contact.css

@@ -1,100 +1,120 @@
-.container {
-    max-width: 500px;
-    width: 100%;
+body {
+    font-family: "Poppins", sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+header {
+    background-color: #1c1f24;
+    padding: 20px;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
     margin: 0 auto;
 }
 
-#contact {
-    padding: 30px;
-    margin: 50px 0;
-    background: linear-gradient(300deg ,#00435f,#369ae6 ,rgb(164, 53, 161));
-    background-size: 180% 180%;
-    animation: gradient-animation 6s ease infinite; 
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    backdrop-filter: blur(4px);
+.logo h1 {
+    color: #dfe1e5;
+}
+
+.nav-links ul {
+    list-style: none;
+    display: flex;
+}
+
+.nav-links ul li {
+    margin-left: 20px;
+}
+
+.nav-links ul li a {
+    color: #dfe1e5;
+    text-decoration: none;
+    transition: color 0.3s, transform 0.3s;
+}
+
+.nav-links ul li a:hover {
+    color: #58a6ff;
+    transform: scale(1.05);
+}
+
+.container {
+    max-width: 800px;
+    margin: 40px auto;
+    background: #fff;
     border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
-@keyframes gradient-animation {
-    0%{
-        background-position: 0% 50%;
-    }
-    50%{
-        background-position: 100% 50%;
-    }
-    100%{
-        background-position: 0% 50%;
-    }
+form {
+    display: flex;
+    flex-direction: column;
 }
 
-#contact h3 {
-    color: white;
-    display: block;
-    font-size: 30px;
-    font-weight: 300;
-    margin-bottom: 10px;
+h3 {
+    color: #000450;
+    margin-bottom: 20px;
     text-align: center;
 }
 
 fieldset {
-    border: medium none !important;
-    margin: 0 0 10px;
-    min-width: 100%;
-    padding: 0;
-    width: 100%;
+    margin-bottom: 20px;
 }
 
-fieldset label {
-    color: white;
+label {
+    color: #333;
+    margin-bottom: 5px;
+    display: block;
 }
 
-#contact input[type="text"],
-#contact input[type="email"],
-#contact textarea {
+input, textarea {
     width: 100%;
-    border: 1px solid #ccc;
-    background: #FFF;
-    margin: 5px 0 10px;
     padding: 10px;
-    border-radius: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
 }
 
-#contact input[type="text"]:hover,
-#contact input[type="email"]:hover,
-#contact textarea:hover {
-    border: 1px solid #aaa;
+input:focus, textarea:focus {
+    border-color: #58a6ff;
+    outline: none;
 }
 
-#contact textarea {
-    height: 100px;
-    max-width: 100%;
-    resize: none;
+button {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #58a6ff;
+    color: #fff;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
 }
 
-#contact button[type="submit"] {
-    cursor: pointer;
-    width: 30%;
-    border: none;
-    background: #00b439;
-    color: #FFF;
-    margin: 0 0 5px;
-    padding: 10px;
-    font-size: 15px;
-    border-radius: 20px;
+button:hover {
+    background-color: #007bff;
 }
 
-#contact button[type="submit"]:hover {
-    background: #348cf1;
-    transition: background-color 0.3s ease-in-out;
+footer {
+    text-align: center;
+    padding: 20px;
+    background: #1c1f24;
+    color: #dfe1e5;
+    margin-top: 40px;
 }
 
-#contact button[type="submit"]:active {
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+.footer-text a {
+    color: #58a6ff;
+    text-decoration: none;
+    transition: color 0.3s, transform 0.3s;
 }
 
-#contact input:focus,
-#contact textarea:focus {
-    outline: 0;
-    border: 1px solid #aaa;
-}
+.footer-text a:hover {
+    color: #ff6b6b;
+    text-decoration: underline;
+    transform: scale(1.05);
+}