Skip to content

Commit

Permalink
Release 0.6
Browse files Browse the repository at this point in the history
  • Loading branch information
@eugenebreenire
eugenebreenire committed Jan 13, 2025
1 parent 9bcba46 commit 0cf07b4
Show file tree
Hide file tree
Showing 5 changed files with 335 additions and 240 deletions.
39 changes: 32 additions & 7 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,39 @@
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- Hamburger.js CSS -->
<link rel="stylesheet" href="https://unpkg.com/hamburgers/dist/hamburgers.css">
</head>
<body>

<!-- Navbar -->
<nav class="navbar">
<ul>
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</nav>
<nav class="navbar">
<!-- Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" id="hamburgerButton">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

<!-- Mobile Navbar (updated class to match the script) -->
<ul class="mobile"> <!-- Changed from mobile-menu to mobile -->
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li>
<!-- Close button inside the menu -->
<button class="close-btn">Close</button>
</li>
</ul>

<!-- Desktop Menu -->
<ul>
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</nav>

<!-- Header Section -->
<header>
<div class="header-top">
Expand Down Expand Up @@ -119,5 +141,8 @@ <h2>Find Us on the Map</h2>
</div>
<p>&copy; 2024 Ferns United. All rights reserved.</p>
</footer>

<!-- External JavaScript -->
<script src="js/script.js"></script>
</body>
</html>
65 changes: 52 additions & 13 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ body {

/* Hamburger Menu Button */
.hamburger {
display: block; /* Always show hamburger */
display: block;
font-size: 30px;
color: white;
background: none;
Expand All @@ -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 {
Expand All @@ -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 */
Expand Down Expand Up @@ -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 */
}
}
192 changes: 99 additions & 93 deletions gallery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,112 +5,118 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery - Ferns United</title>
<link rel="stylesheet" href="css/styles.css">
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- Hamburger.js CSS -->
<link rel="stylesheet" href="https://unpkg.com/hamburgers/dist/hamburgers.css">
</head>
<body>

<!-- Navbar -->
<nav class="navbar">
<ul>
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</nav>
<nav class="navbar">
<!-- Hamburger Button -->
<button class="hamburger hamburger--spin" type="button" id="hamburgerButton">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

<!-- Header with Logo and Title -->
<header>
<div class="header-top">
<div class="logo">
<img src="images/FernsIcon.png" alt="Ferns United Logo">
</div>
<h1 class="header-title">Ferns United AFC</h1>
<div class="social-icons">
<a href="https://www.facebook.com/fernsutd.fc" target="_blank" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/fernsutd" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/fernsutd" target="_blank" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</header>
<!-- Mobile Navbar -->
<ul class="mobile">
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><button class="close-btn">Close</button></li>
</ul>

<!-- Main Gallery Content -->
<main class="gallery-page">
<h1>Ferns United Gallery</h1>
<!-- Desktop Menu -->
<ul>
<li><a href="https://fernsunited.com">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</nav>

<!-- Junior Girls Section
<section>
<h2>Junior Girls</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/junior-girls-1.jpeg" alt="Junior Girls Team"></div>
<div class="gallery-tile"><img src="images/junior-girls-2.jpeg" alt="Junior Girls Match"></div>
<div class="gallery-tile"><img src="images/junior-girls-3.jpeg" alt="Junior Girls Event"></div>
</div>
</section>
-->
<!-- Junior Boys Section -->
<section>
<h2>Junior Boys</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/junior-boys-1.jpeg" alt="Junior Boys Team" data-full="images/junior-boys-1.jpeg"></div>
<!-- <div class="gallery-tile"><img src="images/junior-boys-2.jpeg" alt="Junior Boys Match"></div>
<div class="gallery-tile"><img src="images/junior-boys-3.jpeg" alt="Junior Boys Event"></div>-->
<!-- Header with Logo and Title -->
<header>
<div class="header-top">
<div class="logo">
<img src="images/FernsIcon.png" alt="Ferns United Logo">
</div>
<h1 class="header-title">Ferns United AFC</h1>
<div class="social-icons">
<a href="https://www.facebook.com/fernsutd.fc" target="_blank" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/fernsutd" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/fernsutd" target="_blank" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</section>
</header>

<!-- Senior Women Section -->
<section>
<h2>Senior Women</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/senior-women-1.jpeg" alt="Senior Women Team"></div>
<!--<div class="gallery-tile"><img src="images/senior-women-2.jpeg" alt="Senior Women Match"></div>
<div class="gallery-tile"><img src="images/senior-women-3.jpeg" alt="Senior Women Event"></div>-->
</div>
</section>
<!-- Main Gallery Content -->
<main class="gallery-page">
<h1>Ferns United Gallery</h1>

<!-- Senior Men Section -->
<section>
<h2>Senior Men</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/senior-men-1.jpeg" alt="Senior Men Team"></div>
<div class="gallery-tile"><img src="images/senior-men-4.jpeg" alt="Senior Men Match"></div>
<div class="gallery-tile"><img src="images/senior-men-3.jpeg" alt="Senior Men Event"></div>
</div>
</section>
</main>
<!-- Junior Boys Section -->
<section>
<h2>Junior Boys</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/junior-boys-1.jpeg" alt="Junior Boys Team" data-full="images/junior-boys-1.jpeg"></div>
</div>
</section>

<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-logo">
<img src="images/FernsIcon.png" alt="Ferns United Logo">
</div>
<div class="footer-links">
<a href="contact.html">Contact</a>
<a href="social.html">Social</a>
<a href="lotto.html">Lotto</a>
<a href="gallery.html">Gallery</a>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/fernsutd.fc" target="_blank" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/fernsutd" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/fernsutd" target="_blank" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
<!-- Senior Women Section -->
<section>
<h2>Senior Women</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/senior-women-1.jpeg" alt="Senior Women Team"></div>
</div>
</section>

<!-- Senior Men Section -->
<section>
<h2>Senior Men</h2>
<div class="gallery-grid">
<div class="gallery-tile"><img src="images/senior-men-1.jpeg" alt="Senior Men Team"></div>
<div class="gallery-tile"><img src="images/senior-men-4.jpeg" alt="Senior Men Match"></div>
<div class="gallery-tile"><img src="images/senior-men-3.jpeg" alt="Senior Men Event"></div>
</div>
</section>
</main>

<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-logo">
<img src="images/FernsIcon.png" alt="Ferns United Logo">
</div>
<div class="footer-links">
<a href="contact.html">Contact</a>
<a href="social.html">Social</a>
<a href="lotto.html">Lotto</a>
<a href="gallery.html">Gallery</a>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/fernsutd.fc" target="_blank" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/fernsutd" target="_blank" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/fernsutd" target="_blank" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
<p>&copy; 2025 Ferns United. All Rights Reserved.</p>
</footer>
<p>&copy; 2025 Ferns United. All Rights Reserved.</p>
</footer>

<!-- Link to External JavaScript File -->
<script src="js/script.js"></script>
</body>
</html>
Loading

0 comments on commit 0cf07b4

Please sign in to comment.