Carpea03 · google-labs-jules · Aug 6, 2025
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mount Barker Counselling</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
     <header>
@@ -62,7 +63,14 @@ <h2>Contact Us</h2>
     </section>
 
     <footer>
+        <div class="social-media">
+            <a href="#"><i class="fab fa-facebook-f"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-linkedin-in"></i></a>
+        </div>
         <p>&copy; 2024 Mount Barker Counselling. All rights reserved.</p>
     </footer>
+    <a href="#" id="scrollTopButton" class="scroll-top-button">&uarr;</a>
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js 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
@@ -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;
+}