From 0fa3cdc0b7e4a75161dc8dab8ddaa9084d30a379 Mon Sep 17 00:00:00 2001 From: KhushiParekh <140279193+KhushiParekh@users.noreply.github.com> Date: Sat, 19 Oct 2024 21:50:49 +0530 Subject: [PATCH] contact Ui --- .DS_Store | Bin 6148 -> 6148 bytes contact-us.html | 53 ++++++---------- script.js | 4 ++ style.css | 159 +++++++++++++++++++++++------------------------- 4 files changed, 101 insertions(+), 115 deletions(-) diff --git a/.DS_Store b/.DS_Store index b2db5aee5e949b284269a4175ba9bead8c141240..2023735abc20f7daa45e3bb38d41bfbf083944ff 100644 GIT binary patch delta 193 zcmZoMXffEJ$`UKFa03Ga0}F#5LpnnyLrHGFi%U{YeiBfOqvQD5^s9--98u*{@X8lt z7zQWj=N16q(q ez$!91kCg|(tzfH5JOR@Ak5voG+^olTO%MRs^gu)a delta 193 zcmZoMXffEJ$`UKI=_CUK0}F#5LpnnyLrHGFi%U{YeiBfOBSyw7Fh2a4BdUA~UipFy z!{Frn+ybB;1_t5DO)N@GEbAsOW07O)FEap|Hu(dK$mDx0JP585qrzliR!6pZ6TtEf dtRj>1Sa}fK3N|TAQ;^PotXfd!W<9oRf&i#MG*$or diff --git a/contact-us.html b/contact-us.html index 5bc999c..3a29083 100644 --- a/contact-us.html +++ b/contact-us.html @@ -50,28 +50,27 @@ -
-
+
+
- - +

Get In Touch

+

We'd love to hear from you. Here's how you can reach us...

+ + +91 895 781 8597 - + gps.96169@gmail.com - - + + Fatehpur, Uttar Pradesh, India
-
-

Get In Touch

-

Feel free to reach out for any inquiries or feedback.

- - +
+

Send us a message

@@ -87,24 +86,22 @@

Get In Touch

- - -
+ + +
- @@ -150,4 +137,4 @@

Get In Touch

- + \ No newline at end of file diff --git a/script.js b/script.js index 6b72154..cc66863 100644 --- a/script.js +++ b/script.js @@ -55,6 +55,10 @@ document.addEventListener("DOMContentLoaded", function () { document.querySelector("footer").classList.toggle("text-color"); const buttons = document.querySelectorAll(".add"); + // const contactContainer = document.querySelector(".contact-container"); + // if (contactContainer) { + // darkMode.classList.toggle("light-background"); + // } buttons.forEach((button) => { button.classList.toggle("bg-color"); }); diff --git a/style.css b/style.css index 2522264..f04d31b 100644 --- a/style.css +++ b/style.css @@ -741,143 +741,138 @@ footer { } /* Contact Section */ +/* ... (keep all existing CSS rules) ... */ +/* UPDATED: Improved Contact Page Styles */ .contact-section { display: flex; - flex-wrap: wrap; - justify-content: space-between; + justify-content: center; + align-items: center; + min-height: calc(100vh - 100px); + padding: 50px 20px; + /* background-color: var(--color-body-bg); */ } -/* Left Contact Info Styling */ +.contact-container { + display: flex; + max-width: 1200px; + /* background: var(--color-profile-card-bg); */ + border-radius: 20px; + box-shadow: 0 0 20px 25px rgba(51, 63, 70, 0.227); + overflow: hidden; + padding:0; + +} .contact-info { + flex: 1; + padding: 50px; + background: linear-gradient(135deg, var(--color-profile-border), var(--color-green)); + color: white; display: flex; flex-direction: column; - flex: 1; - max-width: 400px; - margin-right: 100px; justify-content: center; - align-items: flex-start; - gap: 20px; +} + +.contact-info h2 { + font-size: 32px; + margin-bottom: 20px; +} + +.contact-info p { + margin-bottom: 30px; + font-size: 16px; + line-height: 1.6; } .info-item { display: flex; - justify-content: flex-start; - align-items: center; - margin-bottom: 15px; - font-family: "Poppins", sans-serif; - text-decoration: none; - color: #ffffff; - transition: color 0.3s, background-color 0.3s; - padding: 10px; - border-radius: 8px; + align-items: center; + margin-bottom: 20px; + font-size: 16px; + color: white; + text-decoration: none; + transition: transform 0.3s ease; } -/* Hover effect */ - .info-item:hover { - background-color: rgba(255, 99, 71, 0.1); - color: #ff6347; - border: 1px solid rgba(255, 255, 255, 0.509); + transform: translateX(10px); } .info-item i { - margin-right: 10px; - color: #ff6347; + margin-right: 15px; + font-size: 24px; } - - -/* Right Contact Form Container */ -/* Contact Container Styling */ - -.contact-container { - max-width: 800px; - margin: 50px auto; +.contact-form-container { + flex: 1; padding: 50px; - background: #fff; - border-radius: 12px; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); - font-family: "Poppins", sans-serif; - transition: box-shadow 0.3s ease, border 0.3s ease; -} - -.contact-container:hover { - border: 1px solid rgba(0, 0, 0, 0.061); - box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.869); + background: white; } -.contact-container h2 { - text-align: center; - margin-bottom: 5px; - color: #333; - font-size: 32px; - font-weight: 900; -} - -.contact-container p { - color: black; +.contact-form-container h2 { + color: var(--color-profile-border); margin-bottom: 30px; - text-align: center; + font-size: 28px; } -/* Contact Form Styling */ - .contact-form { display: flex; - flex-direction: column; + flex-direction: column; } .input-group { - margin-bottom: 20px; + margin-bottom: 20px; } .contact-form input, .contact-form textarea { width: 100%; padding: 15px; - border-radius: 8px; - border: 1px solid #ccc; + border: 1px solid #ddd; + border-radius: 5px; font-size: 16px; - color: #333; - box-sizing: border-box; - font-family: "Poppins", sans-serif; + transition: border-color 0.3s ease; } .contact-form input:focus, .contact-form textarea:focus { - outline: none; - border: 1px solid #ff6347; - box-shadow: 0 0 10px rgba(255, 99, 71, 0.2); + outline: none; } -/* Submit Button Styling */ - .contact-form button { - width: 70%; - padding: 15px; - background-color: #ff6347; - color: white; + padding: 15px 30px; + background-color: #ee8122; + color: white; border: none; - border-radius: 8px; + border-radius: 5px; font-size: 18px; - cursor: pointer; - transition: background-color 0.3s ease; - align-self: center; + cursor: pointer; + transition: background-color 0.3s ease; } .contact-form button:hover { - background-color: #e5533d; + background-color:#f0642d ; } -/* Error Message Styling */ - .error-message { - color: rgb(0, 0, 0); text-align: center; + color: #ff6347; margin-top: 20px; - height: fit-content; - padding: 2rem; - border-radius: 10px; + padding: 10px; + border-radius: 5px; + background-color: rgba(255, 99, 71, 0.1); +} + +/* Responsive design for smaller screens */ +@media (max-width: 768px) { + .contact-container { + flex-direction: column; + } + + .contact-info, .contact-form-container { + padding: 30px; + } } + +/* ... (keep all existing CSS rules after this point) ... */ \ No newline at end of file