From 50cc7be3fc2fa782f62eb327ddc2f96f03dc0983 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 6 Aug 2025 23:46:51 +0000 Subject: [PATCH] feat: Improve counselling website design and features This commit improves the design and adds new features to the one-page counselling website. Changes include: - Added a hero image to the homepage. - Improved the typography. - Refined the color scheme for a more professional look. - Added subtle animations and transitions. - Improved the layout and spacing for better readability. - Added a "scroll to top" button. - Added social media icons to the footer. --- index.html | 8 ++++ script.js | 41 ++++++++++++++++++++ style.css | 107 +++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 136 insertions(+), 20 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index d8a34d7c07b0..de462b03ca5b 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Mount Barker Counselling +
@@ -62,7 +63,14 @@

Contact Us

+ ↑ + diff --git a/script.js b/script.js new file mode 100644 index 000000000000..9a2d5c78b349 --- /dev/null +++ b/script.js @@ -0,0 +1,41 @@ +document.addEventListener('DOMContentLoaded', function() { + const sections = document.querySelectorAll('section'); + const scrollTopButton = document.getElementById('scrollTopButton'); + + // Fade in sections on scroll + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = 1; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { + threshold: 0.1 + }); + + sections.forEach(section => { + section.style.opacity = 0; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(section); + }); + + // Show/hide scroll to top button + window.addEventListener('scroll', () => { + if (window.scrollY > 300) { + scrollTopButton.style.display = 'block'; + } else { + scrollTopButton.style.display = 'none'; + } + }); + + // Scroll to top on click + scrollTopButton.addEventListener('click', (e) => { + e.preventDefault(); + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); +}); diff --git a/style.css b/style.css index b739066683f3..058a30ac9601 100644 --- a/style.css +++ b/style.css @@ -1,17 +1,24 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap'); + /* General Body Styles */ body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-family: 'Lato', sans-serif; line-height: 1.6; margin: 0; padding: 0; - background-color: #f4f4f4; - color: #333; + background-color: #f8f9fa; + color: #343a40; +} + +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + color: #003366; /* Dark Blue */ } /* Header and Navigation */ header { - background: #fff; - color: #333; + background: #ffffff; + color: #343a40; padding: 1rem 0; position: fixed; width: 100%; @@ -55,8 +62,10 @@ nav ul li a { padding-top: 100px; /* Offset for fixed header */ } .hero { - background: #a8d0e6; - color: #fff; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); + background-size: cover; + background-position: center; + color: #ffffff; text-align: center; padding: 100px 20px; } @@ -72,40 +81,55 @@ nav ul li a { } .cta-button { - background: #374785; - color: #fff; + background: #007bff; /* Bright Blue */ + color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; + transition: background-color 0.3s ease; +} + +.cta-button:hover { + background: #0056b3; /* Darker Blue */ } /* Sections */ section { - padding: 60px 20px; + padding: 80px 20px; text-align: center; } +#about p { + max-width: 800px; + margin: 0 auto; +} + section h2 { font-size: 2.5rem; - margin-bottom: 20px; + margin-bottom: 40px; } /* Service Cards */ .service-cards { display: flex; justify-content: center; - gap: 20px; + gap: 40px; flex-wrap: wrap; } .card { - background: #fff; - border: 1px solid #ddd; + background: #ffffff; + border: 1px solid #dee2e6; border-radius: 5px; padding: 20px; width: 300px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); } .card h3 { @@ -115,7 +139,7 @@ section h2 { /* Contact Form */ #contact { - background-color: #e8e8e8; + background-color: #e9ecef; } form { max-width: 600px; @@ -127,26 +151,69 @@ form { form input, form textarea { padding: 10px; - border: 1px solid #ccc; + border: 1px solid #ced4da; border-radius: 5px; font-size: 1rem; } form button { - background: #374785; - color: #fff; + background: #007bff; /* Bright Blue */ + color: #ffffff; padding: 10px 20px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 1rem; + transition: background-color 0.3s ease; +} + +form button:hover { + background: #0056b3; /* Darker Blue */ } /* Footer */ footer { - background: #333; - color: #fff; + background: #343a40; + color: #ffffff; text-align: center; padding: 20px 0; } + +/* Scroll to Top Button */ +.scroll-top-button { + position: fixed; + bottom: 20px; + right: 20px; + background: #007bff; + color: #ffffff; + width: 50px; + height: 50px; + text-align: center; + line-height: 50px; + font-size: 24px; + border-radius: 50%; + text-decoration: none; + display: none; /* Hidden by default */ + transition: opacity 0.3s ease; +} + +.scroll-top-button:hover { + background: #0056b3; +} + +/* Social Media Icons */ +.social-media { + margin-bottom: 20px; +} + +.social-media a { + color: #ffffff; + font-size: 24px; + margin: 0 10px; + transition: color 0.3s ease; +} + +.social-media a:hover { + color: #007bff; +}