diff --git a/assets/contact/contact.css b/assets/contact/contact.css index 233bbdb..b08f56d 100644 --- a/assets/contact/contact.css +++ b/assets/contact/contact.css @@ -10,7 +10,6 @@ body { line-height: 1.6; min-height: 100vh; color: var(--text-color); - font-family: 'Poppins', sans-serif; background-color: var(--background-color); } @@ -52,7 +51,7 @@ main { display: flex; flex-wrap: wrap; justify-content: center; - align-items: center; + align-items: flex-start; padding: 50px 20px 20px 20px; min-height: calc(100vh - 120px); gap: 100px; @@ -66,8 +65,11 @@ main { .form-section { flex: 1; + display: flex; + flex-direction: column; max-width: 500px; padding: 20px; + margin-top: 50px; text-align: center; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); @@ -76,12 +78,12 @@ main { .form-section h1 { font-size: 2em; - color: #4a90e2; margin-bottom: 10px; } .form-section p { font-size: 1.1em; + font-weight: 500; margin-bottom: 20px; } @@ -94,8 +96,9 @@ main { background-color: #e9eef5; border-radius: 8px; font-size: 1em; + font-family: "Poppins", sans-serif; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; - font-weight: 700; + font-weight: 600; } input[type="text"]:hover, @@ -115,25 +118,30 @@ textarea:focus { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } -textarea { +.form-section textarea { resize: vertical; + height: 100px; + min-height: 100px; + max-height: 200px; + overflow-y: auto; + flex-grow: 1; } .form-section button { width: 100%; padding: 10px; - background: #4a90e2; color: #ffffff; border: none; border-radius: 8px; font-size: 1em; cursor: pointer; transition: 0.3s ease; + background: var(--primary-color); } .form-section button:hover { - background: #3a78c2; transform: scale(1.02); + background-color: #686969; } .social-links { diff --git a/style.css b/style.css index a1db0a1..30014d0 100644 --- a/style.css +++ b/style.css @@ -899,10 +899,21 @@ footer { border-radius: 4px; box-sizing: border-box; font-size: 16px; + font-family: sans-serif; + transition: transform 0.3s ease; +} + +.send-message input:hover, +.send-message textarea:hover { + transform: scale(1.02); } .send-message textarea { - height: 50px; + resize: vertical; + height: 50px; + min-height: 50px; + max-height: 100px; + overflow-y: auto; color: black; } @@ -917,6 +928,13 @@ footer { cursor: pointer; font-size: 16px; font-weight: bold; + transition: transform 0.3s ease; +} + +.send-message button:hover { + background: -webkit-linear-gradient(to right, #5568e0, #89b9e8); + background: linear-gradient(to right, #5568e0, #89b9e8); + transform: scale(1.02); } .social {