From 0cf07b44e7294b8b58a38c203d31330438922a52 Mon Sep 17 00:00:00 2001 From: Eugene Breen <49158625+eugenebreenire@users.noreply.github.com> Date: Mon, 13 Jan 2025 14:02:43 +0000 Subject: [PATCH] Release 0.6 --- contact.html | 39 ++++++-- css/styles.css | 65 ++++++++++--- gallery.html | 192 +++++++++++++++++++------------------ index.html | 254 ++++++++++++++++++++++++++----------------------- js/script.js | 25 +++-- 5 files changed, 335 insertions(+), 240 deletions(-) diff --git a/contact.html b/contact.html index 5b4f6ef..bac8c84 100644 --- a/contact.html +++ b/contact.html @@ -7,17 +7,39 @@ + + - + +
@@ -119,5 +141,8 @@

Find Us on the Map

© 2024 Ferns United. All rights reserved.

+ + + diff --git a/css/styles.css b/css/styles.css index 5faa3db..44917b7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -47,7 +47,7 @@ body { /* Hamburger Menu Button */ .hamburger { - display: block; /* Always show hamburger */ + display: block; font-size: 30px; color: white; background: none; @@ -56,7 +56,7 @@ body { position: absolute; top: 15px; right: 20px; - z-index: 2000; /* Ensure it's above navbar */ + z-index: 10000; /* Ensure it's on top */ } .hamburger span { @@ -67,28 +67,62 @@ body { border-radius: 5px; } -/* Mobile Navbar */ +/* Ensure the mobile menu is hidden by default */ +/* Mobile Menu */ .navbar ul.mobile { - display: none; /* Hidden by default on mobile */ - flex-direction: column; /* Stack items vertically */ + display: none; + flex-direction: column; position: absolute; top: 60px; - right: 20px; - background-color: #0047AB; - padding: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 5px; + left: 0; + right: 0; + background-color: white; + padding: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + max-height: 80vh; /* Limit the height of the menu */ + overflow-y: auto; /* Add scroll if the menu is too long */ } .navbar ul.mobile li { margin: 10px 0; /* Add space between menu items */ + padding: 10px; /* Added padding for better spacing */ } -/* Show menu when active */ +/* Style for mobile menu links */ +.navbar ul.mobile li a { + color: #003366; /* Blue color for the text */ + text-decoration: none; + font-size: 1.2em; +} + +.navbar ul.mobile li a:hover { + color: #800000; /* Maroon color on hover */ +} + +/* When the menu is active, display it */ .navbar ul.mobile.active { display: flex; } +/* Close Button Style */ +.close-btn { + display: none; + font-size: 30px; + color: #003366; /* Blue color for the close button */ + background: none; + border: none; + cursor: pointer; + position: absolute; + top: 15px; + right: 20px; + z-index: 9999; /* Increase z-index to ensure visibility */ +} + +/* Close Button Visible on Active Mobile Menu */ +.navbar ul.mobile.active .close-btn { + display: block; /* Ensure the close button shows when active */ +} + /* Header with Banner */ header { background-color: #9E1B32; /* Claret */ @@ -329,12 +363,17 @@ footer .social-icons a { } .navbar ul.mobile { - display: flex; - flex-direction: column; + display: none; } /* Show the mobile menu when active */ .navbar ul.mobile.active { display: flex; + flex-direction: column; + } + + /* Close button styles */ + .close-btn { + display: block; /* Show the close button when the menu is active */ } } diff --git a/gallery.html b/gallery.html index 7812ff0..2f4fba2 100644 --- a/gallery.html +++ b/gallery.html @@ -5,112 +5,118 @@ Gallery - Ferns United - + + + - + - - -
-

Junior Boys

-
-
Junior Boys Team
- + +
+
+ +

Ferns United AFC

+
-
+
- -
-

Senior Women

-
-
Senior Women Team
- -
-
+ +
+

Ferns United Gallery

- -
-

Senior Men

-
-
Senior Men Team
-
Senior Men Match
-
Senior Men Event
-
-
-
+ +
+

Junior Boys

+
+
Junior Boys Team
+
+
- - +

© 2025 Ferns United. All Rights Reserved.

+ + + diff --git a/index.html b/index.html index f62e17e..d125587 100644 --- a/index.html +++ b/index.html @@ -1,145 +1,157 @@ + Home - Local Soccer Club - + + + + - - - - -
-
- -
- - -
-
-

Welcome to Ferns United Football Club

-

Your community, your team!

- Join Us -
-
- - -
-
-

About Us

-

Ferns United is a local community soccer club offering opportunities for players of all ages and skill levels. We are dedicated to promoting teamwork and sportsmanship.

-
-
- - -
-
-

Explore More

-
- - - -
-
-

Club News

-

Read the latest updates from the club.

- Read News +
+ + +
+
+

About Us

+

Ferns United is a local community soccer club offering opportunities for players of all ages and skill + levels. We are dedicated to promoting teamwork and sportsmanship.

+
+
+ + +
+
+

Explore More

+
+ +
+
+

Club News

+

Read the latest updates from the club.

+ Read News +
-
- -
-
-

Gallery

-

Check out photos from our latest events.

- View Gallery + +
+
+

Gallery

+

Check out photos from our latest events.

+ View Gallery +
-
- -
-
-

Contact Us

-

Get in touch with us for any inquiries.

- Contact + +
+
+

Contact Us

+

Get in touch with us for any inquiries.

+ Contact +
-
-
- - - +

© 2024 Ferns United. All rights reserved.

+ - - + + - + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index e5f2e84..c77a8b5 100644 --- a/js/script.js +++ b/js/script.js @@ -1,8 +1,21 @@ -document.addEventListener("DOMContentLoaded", function () { - const hamburger = document.querySelector(".hamburger"); - const menu = document.querySelector(".navbar ul"); +document.addEventListener("DOMContentLoaded", function() { + const hamburger = document.querySelector('.hamburger'); + const mobileMenu = document.querySelector('.navbar ul.mobile'); // Ensure this matches the HTML class - hamburger.addEventListener("click", function () { - menu.classList.toggle("active"); // Toggle visibility on click - }); + // Check if both elements exist before adding the event listener + if (hamburger && mobileMenu) { + hamburger.addEventListener('click', function() { + mobileMenu.classList.toggle('active'); // Toggle the mobile menu visibility + }); + + // Optional: Add close button functionality + const closeButton = document.querySelector('.close-btn'); + if (closeButton) { + closeButton.addEventListener('click', function() { + mobileMenu.classList.remove('active'); // Close the menu when the close button is clicked + }); + } + } else { + console.error("Hamburger button or mobile menu not found!"); + } });