From 1985cd297477f4c8c0cd95c4a663dc2d46e409a9 Mon Sep 17 00:00:00 2001 From: dhruv-4444 Date: Thu, 17 Oct 2024 09:14:10 +0530 Subject: [PATCH 1/2] Enhancing the UI of Contact us page --- contact-us.html | 149 ++++++++++++++++++++---------------- script.js | 197 +++++++++++++++++++++++++----------------------- style.css | 192 ++++++++++++++++++++++++---------------------- 3 files changed, 285 insertions(+), 253 deletions(-) diff --git a/contact-us.html b/contact-us.html index d8d69a1..b4e278d 100644 --- a/contact-us.html +++ b/contact-us.html @@ -2,95 +2,105 @@ + + + Contact Us + + + + + + - - - - Contact Us - - - - - - - -
-
-
+
-

- -
-
-
-
- -
-
- -
-
- -
-
- -
-
+ +
+
+
+ + + +123 456 7890 + + + + example@example.com + + + + 123 Street Name, City, Country + +
+ +
+

Get In Touch

+

Feel free to reach out for any inquiries or feedback.

+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
- -
+ -

- - - - + + + - - - \ No newline at end of file + diff --git a/script.js b/script.js index 456b55e..6b72154 100644 --- a/script.js +++ b/script.js @@ -1,71 +1,71 @@ -document.addEventListener("DOMContentLoaded", function() { -const searchInput = document.getElementById('searchInput'); -const profiles = document.querySelectorAll('.profile'); -const date = document.getElementById('dates') - - -let currentDate = new Date() -let currentYear = currentDate.getFullYear() -date.innerHTML = currentYear - -window.addEventListener('scroll',()=> { - const progressBar = document.getElementById('bar'); - const scrollTotal = document.body.scrollHeight - window.innerHeight; - const scrollPosition = window.scrollY; - const scrollPercentage = (scrollPosition / scrollTotal) * 100; - progressBar.style.width = scrollPercentage + '%'; +document.addEventListener("DOMContentLoaded", function () { + const searchInput = document.getElementById("searchInput"); + const profiles = document.querySelectorAll(".profile"); + const date = document.getElementById("dates"); + + let currentDate = new Date(); + let currentYear = currentDate.getFullYear(); + date.innerHTML = currentYear; + + window.addEventListener("scroll", () => { + const progressBar = document.getElementById("bar"); + const scrollTotal = document.body.scrollHeight - window.innerHeight; + const scrollPosition = window.scrollY; + const scrollPercentage = (scrollPosition / scrollTotal) * 100; + progressBar.style.width = scrollPercentage + "%"; }); - -if (searchInput) { - searchInput.addEventListener('input', filterProfiles); -} -function filterProfiles() { + if (searchInput) { + searchInput.addEventListener("input", filterProfiles); + } + function filterProfiles() { const query = searchInput.value.toLowerCase(); profiles.forEach((profile) => { - const name = profile.querySelector('.name').textContent.toLowerCase(); - const skills = Array.from(profile.querySelectorAll('.skills .skill')) - .map(skill => skill.textContent.toLowerCase()); - if (name.includes(query) || skills.some(skill => skill.includes(query))) { - profile.style.display = 'block'; - } else { - profile.style.display = 'none'; - } + const name = profile.querySelector(".name").textContent.toLowerCase(); + const skills = Array.from(profile.querySelectorAll(".skills .skill")).map( + (skill) => skill.textContent.toLowerCase() + ); + if ( + name.includes(query) || + skills.some((skill) => skill.includes(query)) + ) { + profile.style.display = "block"; + } else { + profile.style.display = "none"; + } }); -} + } -const darkMode = document.querySelector(".dark-btn"); -var icon=document.getElementById("icon"); + const darkMode = document.querySelector(".dark-btn"); + var icon = document.getElementById("icon"); -darkMode.addEventListener("click", () => { + darkMode.addEventListener("click", () => { document.body.classList.toggle("light-background"); - if(document.body.classList.contains("light-background")){ - icon.style.filter='invert(0%)'; - icon.src="light.png"; - - }else{ - icon.style.filter='invert(100%)'; - icon.src="dark.png"; - + if (document.body.classList.contains("light-background")) { + icon.style.filter = "invert(0%)"; + icon.src = "light.png"; + } else { + icon.style.filter = "invert(100%)"; + icon.src = "dark.png"; } - darkMode.classList.toggle("icon-position") + darkMode.classList.toggle("icon-position"); darkMode.classList.toggle("light-background"); - darkMode.classList.toggle("icon-color") + darkMode.classList.toggle("icon-color"); document.querySelector(".title").classList.toggle("text-color"); document.querySelector("footer").classList.toggle("text-color"); - const buttons = document.querySelectorAll('.add'); - - buttons.forEach(button => { - button.classList.toggle('bg-color'); + const buttons = document.querySelectorAll(".add"); + + buttons.forEach((button) => { + button.classList.toggle("bg-color"); }); -}); + }); }); // Get the button let backToTopBtn = document.getElementById("backToTopBtn"); // Show the button when the user scrolls down 20px from the top of the document -window.onscroll = function() { +window.onscroll = function () { scrollFunction(); }; @@ -78,80 +78,85 @@ function scrollFunction() { } // When the user clicks the button, scroll to the top of the document -backToTopBtn.onclick = function() { - window.scrollTo({ top: 0, behavior: 'smooth' }); +backToTopBtn.onclick = function () { + window.scrollTo({ top: 0, behavior: "smooth" }); }; -document.querySelector('.contact-form').addEventListener('submit', function(event) { - event.preventDefault(); // Prevent the form from submitting - - // Clear any existing error messages - const errorMessageDiv = document.getElementById('error-message'); - const form = event.target; - errorMessageDiv.style.display = 'none'; - errorMessageDiv.textContent = ''; - - // Form inputs - const name = document.getElementById('name').value.trim(); - const email = document.getElementById('email').value.trim(); - const message = document.getElementById('message').value.trim(); - - // Validate input fields - if (!name || !email || !message) { - showError('All fields are required.'); +document + .querySelector(".contact-form") + .addEventListener("submit", function (event) { + event.preventDefault(); // Prevent the form from submitting + + // Clear any existing error messages + const errorMessageDiv = document.getElementById("error-message"); + const form = event.target; + errorMessageDiv.style.display = "none"; + errorMessageDiv.textContent = ""; + + // Form inputs + const name = document.getElementById("name").value.trim(); + const email = document.getElementById("email").value.trim(); + const message = document.getElementById("message").value.trim(); + + // Validate input fields + if (!name || !email || !message) { + showError("All fields are required."); return; - } + } - if (!validateEmail(email)) { - showError('Please enter a valid email address.'); + if (!validateEmail(email)) { + showError("Please enter a valid email address."); return; - } + } - // Create a form data object to send - const formData = new FormData(form); + // Create a form data object to send + const formData = new FormData(form); - // Submit the form using fetch - fetch(form.action, { - method: 'POST', + // Submit the form using fetch + fetch(form.action, { + method: "POST", body: formData, headers: { - 'Accept': 'application/json' - } - }).then(response => { - if (response.ok) { - showSuccess('Message sent successfully!'); + Accept: "application/json", + }, + }) + .then((response) => { + if (response.ok) { + showSuccess("Message sent successfully!"); form.reset(); // Reset the form fields after success - } else { - showError('Oops! Something went wrong. Please try again later.'); - } - }).catch(error => { - showError('There was a problem submitting the form. Please try again.'); + } else { + showError("Oops! Something went wrong. Please try again later."); + } + }) + .catch((error) => { + showError("There was a problem submitting the form. Please try again."); + }); }); -}); // Function to show error message function showError(message) { - const errorMessageDiv = document.getElementById('error-message'); + const errorMessageDiv = document.getElementById("error-message"); errorMessageDiv.textContent = message; - errorMessageDiv.style.display = 'block'; + errorMessageDiv.style.display = "block"; // Hide the error message after 5 seconds setTimeout(() => { - errorMessageDiv.style.display = 'none'; + errorMessageDiv.style.display = "none"; }, 5000); } // Function to show success message function showSuccess(message) { - const errorMessageDiv = document.getElementById('error-message'); + const errorMessageDiv = document.getElementById("error-message"); errorMessageDiv.textContent = message; - errorMessageDiv.style.backgroundColor = '#4BB543'; // Change background to green for success - errorMessageDiv.style.display = 'block'; + errorMessageDiv.style.backgroundColor = "#4BB543"; // Change background to green for success + errorMessageDiv.style.display = "block"; + errorMessageDiv.style.fontWeight = "bolder"; // Hide the success message after 5 seconds setTimeout(() => { - errorMessageDiv.style.display = 'none'; - errorMessageDiv.style.backgroundColor = '#ff4d4d'; // Reset to default error color + errorMessageDiv.style.display = "none"; + errorMessageDiv.style.backgroundColor = "#ff4d4d"; // Reset to default error color }, 5000); } diff --git a/style.css b/style.css index 772287a..b3d5826 100644 --- a/style.css +++ b/style.css @@ -782,126 +782,138 @@ footer { text-align: center; } -/* Contact container styling */ +/* Contact Section */ +.contact-section { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +/* Left Contact Info Styling */ +.contact-info { + display: flex; + flex-direction: column; + flex: 1; /* Takes up available space */ + max-width: 400px; /* Limit the width of the contact info */ + margin-right: 100px; /* Space between containers */ + justify-content: center; + align-items: flex-start; + gap: 20px; +} + +.info-item { + display: flex; + justify-content: flex-start; /* Align items to the left */ + align-items: center; /* Center items vertically */ + margin-bottom: 15px; + font-family: "Poppins", sans-serif; + text-decoration: none; /* Remove underline from links */ + color: #ffffff; /* Default text color */ + transition: color 0.3s, background-color 0.3s; /* Transition for smooth hover effect */ + padding: 10px; /* Add some padding for hover effect */ + border-radius: 8px; /* Rounded corners */ +} + +/* Hover effect */ +.info-item:hover { + background-color: rgba(255, 99, 71, 0.1); /* Light background color on hover */ + color: #ff6347; /* Change text color on hover */ +} + +.info-item i { + margin-right: 10px; /* Space between icon and text */ + color: #ff6347; /* Icon color */ +} + + + +/* Right Contact Form Container */ +/* Contact Container Styling */ .contact-container { - max-width: 50rem; + max-width: 800px; margin: 50px auto; padding: 50px; - background-color: #f9f9f9; - border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - color: #333; + 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); /* Inner shadow effect */ +} + +.contact-container h2 { + text-align: center; + margin-bottom: 5px; + color: #333; + font-size: 32px; + font-weight: 900; +} + +.contact-container p { + color: black; + margin-bottom: 30px; + text-align: center; /* Center the paragraph text */ +} + +/* Contact Form Styling */ .contact-form { - width: 100%; + display: flex; + flex-direction: column; /* Arrange inputs in a column */ } -/* Input group styling */ -.contact-form .input-group { - margin-bottom: 20px; +.input-group { + margin-bottom: 20px; /* Space between input fields */ } -/* Input and textarea styling */ .contact-form input, .contact-form textarea { - width: 30rem; - max-width: 30rem; + width: 100%; padding: 15px; - background-color: #fff; - border: 1px solid #ddd; - border-radius: 10px; - color: #333; + border-radius: 8px; + border: 1px solid #ccc; font-size: 16px; - transition: border-color 0.3s; + color: #333; + box-sizing: border-box; /* Ensures padding is included in width */ font-family: "Poppins", sans-serif; } -.contact-form input::placeholder, -.contact-form textarea::placeholder { - color: #999; -} - -/* Focus state for inputs and textarea */ .contact-form input:focus, .contact-form textarea:focus { outline: none; - border-color: var(--color-profile-border); + border: 1px solid #ff6347; /* Change border color on focus */ + box-shadow: 0 0 10px rgba(255, 99, 71, 0.2); /* Shadow on focus */ } -/* Button styling */ +/* Submit Button Styling */ .contact-form button { - width: 100%; + width: 70%; /* Button width */ padding: 15px; - background-color: var(--color-profile-border); - color: #fff; + background-color: #ff6347; /* Button color */ + color: white; /* Text color */ border: none; - border-radius: 10px; + border-radius: 8px; font-size: 18px; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; + cursor: pointer; /* Pointer on hover */ + transition: background-color 0.3s ease; /* Smooth background color transition */ + align-self: center; /* Center the button */ } -/* Hover state for button */ .contact-form button:hover { - background-color: var(--color-profile-border); - transform: translateY(-2px); + background-color: #e5533d; /* Darker color on hover */ } -/* Error message styles */ +/* Error Message Styling */ .error-message { - position: absolute; - top: 20px; - right: 20px; - background-color: #ff4d4d; - color: white; - padding: 10px; - border-radius: 8px; - display: none; /* Hidden by default */ -} - -.link-primary { - color: var(--color-profile-border); - font-weight: bold; - text-decoration: none; -} - -@media (max-width: 768px) { - /* Contact container styling */ -.contact-container { - max-width: 90%; - margin: 5%; - padding: 5%; -} - - -/* Button styling */ -.contact-form button { - width: 90%; -} -} - -@media (max-width: 620px) { - - .contact-container { - max-width: 100%; - margin: 5%; - padding: 5%; - } - - .contact-form .input-group { - width: 90%; - } - - .contact-form input, - .contact-form textarea { - margin: 5% 20% 0 5%; - max-width: 100%; - } - .contact-form button { - width: 100%; - margin: 5% 20% 0 5%; - } + color: rgb(0, 0, 0); /* Error message color */ + text-align: center; /* Center the error message */ + margin-top: 20px; /* Space above the error message */ + height: fit-content; + padding: 2rem; + border-radius: 10px; + font-weight: ; } - From a71ce7304e38ab549d2ddb57be1034ad4fbdf5a5 Mon Sep 17 00:00:00 2001 From: dhruv-4444 Date: Thu, 17 Oct 2024 09:14:25 +0530 Subject: [PATCH 2/2] Style changes --- style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index b3d5826..0cbb809 100644 --- a/style.css +++ b/style.css @@ -817,12 +817,13 @@ footer { /* Hover effect */ .info-item:hover { background-color: rgba(255, 99, 71, 0.1); /* Light background color on hover */ - color: #ff6347; /* Change text color on hover */ + color: #ff6347; + border: 1px solid rgba(255, 255, 255, 0.509);/* Change text color on hover */ } .info-item i { margin-right: 10px; /* Space between icon and text */ - color: #ff6347; /* Icon color */ + color: #ff6347; }