diff --git a/index.html b/index.html new file mode 100644 index 000000000000..de462b03ca5b --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + Mount Barker Counselling + + + + +
+ +
+ +
+
+

Your Path to a Brighter Tomorrow

+

Compassionate and professional counselling services in Mount Barker, SA.

+ Book an Appointment +
+
+ +
+

About Us

+

At Mount Barker Counselling, we provide a safe, confidential, and non-judgmental space for you to explore your thoughts and feelings. Our experienced therapists are dedicated to helping you navigate life's challenges and achieve your personal goals.

+
+ +
+

Our Services

+
+
+

Individual Counselling

+

One-on-one sessions to address a wide range of personal issues, including anxiety, depression, stress, and relationship difficulties.

+
+
+

Couples Counselling

+

Helping couples improve communication, resolve conflicts, and build stronger, more fulfilling relationships.

+
+
+

Family Therapy

+

Working with families to foster better understanding, communication, and harmony within the family unit.

+
+
+
+ +
+

Contact Us

+

Ready to take the first step? Reach out to us to schedule a confidential consultation.

+
+ + + + +
+
+ + + ↑ + + + 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 new file mode 100644 index 000000000000..058a30ac9601 --- /dev/null +++ b/style.css @@ -0,0 +1,219 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap'); + +/* General Body Styles */ +body { + font-family: 'Lato', sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f8f9fa; + color: #343a40; +} + +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + color: #003366; /* Dark Blue */ +} + +/* Header and Navigation */ +header { + background: #ffffff; + color: #343a40; + padding: 1rem 0; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + margin: 0 auto; +} + +nav .logo { + font-size: 1.5rem; + font-weight: bold; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav ul li { + margin-left: 20px; +} + +nav ul li a { + color: #333; + text-decoration: none; + font-size: 1rem; +} + +/* Hero Section */ +#home { + padding-top: 100px; /* Offset for fixed header */ +} +.hero { + 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; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 10px; +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 20px; +} + +.cta-button { + 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: 80px 20px; + text-align: center; +} + +#about p { + max-width: 800px; + margin: 0 auto; +} + +section h2 { + font-size: 2.5rem; + margin-bottom: 40px; +} + +/* Service Cards */ +.service-cards { + display: flex; + justify-content: center; + gap: 40px; + flex-wrap: wrap; +} + +.card { + 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 { + font-size: 1.5rem; + margin-bottom: 10px; +} + +/* Contact Form */ +#contact { + background-color: #e9ecef; +} +form { + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 10px; +} + +form input, form textarea { + padding: 10px; + border: 1px solid #ced4da; + border-radius: 5px; + font-size: 1rem; +} + +form button { + 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: #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; +} diff --git a/vercel.json b/vercel.json new file mode 100644 index 000000000000..afa6262ce622 --- /dev/null +++ b/vercel.json @@ -0,0 +1,13 @@ +{ + "version": 2, + "public": true, + "name": "mount-barker-counselling", + "alias": ["mount-barker-counselling"], + "builds": [ + { "src": "*.html", "use": "@vercel/static" }, + { "src": "*.css", "use": "@vercel/static" } + ], + "routes": [ + { "src": "/(.*)", "dest": "/$1" } + ] +}