Make a page for Junior B girls

junior-b-girls.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Junior B Girls – NAGAS Volleyball</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#008080',
+                        dark: '#121212',
+                        darker: '#0a0a0a',
+                        lightGrey: '#CCCCCC'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #121212;
+            color: #ffffff;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 700;
+        }
+        /* Shared card styles */
+        .player-card {
+            transition: all 0.3s ease;
+            border: 1px solid #008080;
+            border-radius: 6px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            text-align: center;
+            color: white;
+        }
+
+        /* Hover effects */
+        .player-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
+        }
+
+        /* Section titles */
+        .section-title {
+            margin-bottom: 20px;
+        }
+
+        /* Preserve existing header/footer styles */
+        header, footer {
+            width: 100%;
+            padding: 20px;
+        }
+    </style>
+</head>
+<body class="bg-dark text-white">
+    <!-- Navigation -->
+    <header class="fixed w-full z-50 bg-dark border-b border-primary">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
+                <a href="index.html" class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="index.html" class="hover:text-primary">Home</a>
+                <a href="about.html" class="hover:text-primary">About</a>
+                <a href="teams.html" class="hover:text-primary">Teams</a>
+                <a href="schedule.html" class="hover:text-primary">Schedule</a>
+                <a href="council.html" class="hover:text-primary">Council</a>
+                <a href="news.html" class="hover:text-primary">News</a>
+                <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
+            </nav>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </header>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
+                <span class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
+            </div>
+            <button id="menu-close" class="text-white">
+                <i data-feather="x"></i>
+            </button>
+        </div>
+        <nav class="p-4">
+            <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a>
+            <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a>
+            <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a>
+            <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a>
+            <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a>
+            <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a>
+            <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a>
+        </nav>
+    </div>
+
+    <!-- Breadcrumb -->
+    <div class="pt-20 pb-4 bg-darker border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <nav class="text-sm">
+                <a href="index.html" class="text-primary hover:underline">Home</a> > 
+                <a href="teams.html" class="text-primary hover:underline">Teams</a> > 
+                <a href="volleyball.html" class="text-primary hover:underline">Volleyball</a> > 
+                <span class="text-white">Junior B Girls</span>
+            </nav>
+        </div>
+    </div>
+
+    <!-- Team Header -->
+    <section class="py-16 text-center px-4" style="padding: 30px 0 30px 0; margin-bottom: 40px;">
+        <h1 class="text-4xl md:text-5xl font-bold mb-4">Junior B Girls Volleyball</h1>
+        <p class="text-lightGrey text-base mb-6">Developing skills and teamwork</p>
+        <div class="max-w-3xl mx-auto">
+            <p class="text-lightGrey text-base">
+                Our Junior B Girls volleyball team focuses on building fundamental skills, teamwork, and a love for the game. 
+                This team provides a supportive environment for young athletes to grow and improve their volleyball abilities.
+            </p>
+        </div>
+    </section>
+
+    <!-- Player Roster -->
+    <section class="py-16 bg-[#0a0a0a] px-4" style="padding: 30px 0 30px 0; margin-bottom: 40px;">
+        <div class="container mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 section-title">Player Roster</h2>
+            <p class="text-lightGrey text-sm text-center mb-8">Meet our talented athletes</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <!-- Player 1 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/1" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Sarah Chen</h3>
+                    <p class="text-primary text-sm mb-2">Setter</p>
+                    <p class="text-lightGrey text-sm">Grade 8</p>
+                </div>
+                
+                <!-- Player 2 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/2" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Emma Rodriguez</h3>
+                    <p class="text-primary text-sm mb-2">Outside Hitter</p>
+                    <p class="text-lightGrey text-sm">Grade 7</p>
+                </div>
+                
+                <!-- Player 3 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/3" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Maya Patel</h3>
+                    <p class="text-primary text-sm mb-2">Middle Blocker</p>
+                    <p class="text-lightGrey text-sm">Grade 8</p>
+                </div>
+                
+                <!-- Player 4 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/4" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Olivia Kim</h3>
+                    <p class="text-primary text-sm mb-2">Libero</p>
+                    <p class="text-lightGrey text-sm">Grade 7</p>
+                </div>
+                
+                <!-- Player 5 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/5" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Zoe Williams</h3>
+                    <p class="text-primary text-sm mb-2">Outside Hitter</p>
+                    <p class="text-lightGrey text-sm">Grade 8</p>
+                </div>
+                
+                <!-- Player 6 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/6" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Lily Johnson</h3>
+                    <p class="text-primary text-sm mb-2">Middle Blocker</p>
+                    <p class="text-lightGrey text-sm">Grade 7</p>
+                </div>
+                
+                <!-- Player 7 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/7" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Ava Thompson</h3>
+                    <p class="text-primary text-sm mb-2">Setter</p>
+                    <p class="text-lightGrey text-sm">Grade 8</p>
+                </div>
+                
+                <!-- Player 8 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x240/8" alt="Player" class="w-24 h-24 rounded-full mx-auto mb-4">
+                    <h3 class="text-xl font-bold">Mia Garcia</h3>
+                    <p class="text-primary text-sm mb-2">Libero</p>
+                    <p class="text-lightGrey text-sm">Grade 7</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Schedule -->
+    <section class="py-16 px-4" style="padding: 30px 0 30px 0; margin-bottom: 40px;">
+        <div class="container mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 section-title">Upcoming Matches</h2>
+            <p class="text-lightGrey text-base text-center mb-8">See our team's schedule</p>
+            <div class="max-w-3xl mx-auto bg-[#1E1E1E] border border-primary rounded-lg p-6">
+                <div class="space-y-4">
+                    <div class="flex justify-between items-center pb-4 border-b border-[#2e2e2e]">
+                        <div>
+                            <p class="font-bold">vs Lincoln High School</p>
+                            <p class="text-lightGrey text-sm">Away</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-bold">Oct 15, 2023</p>
+                            <p class="text-lightGrey text-sm">3:00 PM</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center pb-4 border-b border-[#2e2e2e]">
+                        <div>
+                            <p class="font-bold">vs Washington Academy</p>
+                            <p class="text-lightGrey text-sm">Home</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-bold">Oct 22, 2023</p>
+                            <p class="text-lightGrey text-sm">5:00 PM</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center pb-4 border-b border-[#2e2e2e]">
+                        <div>
+                            <p class="font-bold">vs Jefferson Prep</p>
+                            <p class="text-lightGrey text-sm">Away</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-bold">Oct 29, 2023</p>
+                            <p class="text-lightGrey text-sm">4:00 PM</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <p class="font-bold">vs Roosevelt High</p>
+                            <p class="text-lightGrey text-sm">Home</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-bold">Nov 5, 2023</p>
+                            <p class="text-lightGrey text-sm">6:00 PM</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Contact Info</h3>
+                    <p>Northbridge International School Cambodia</p>
+                    <p>#98C, Street 169, Phnom Penh</p>
+                    <p>Email: info@nagas.edu.kh</p>
+                    <p>Phone: +855 12 345 678</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Follow Us</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-primary hover:text-lightGrey">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-lightGrey">
+                            <i data-feather="instagram"></i>
+                        </a>
+                    </div>
+                    <p class="mt-2">@NAGAS_NISC</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
+                        <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
+                        <li><a href="news.html" class="hover:text-primary">News</a></li>
+                        <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
+                <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        feather.replace();
+        
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+        });
+        
+        document.getElementById('menu-close').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+        });
+    </script>
+</body>
+</html>

volleyball.html

@@ -182,7 +182,7 @@
                     </svg>
                     <h3 class="text-xl font-bold">Junior A Girls</h3>
                 </a>
-                <a href="#" class="team-tile block">
+                <a href="junior-b-girls.html" class="team-tile block">
                     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4">
                         <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                         <path d="M2 17l10 5 10-5"></path>
@@ -223,7 +223,7 @@
                     <h3 class="text-xl font-bold">Senior B Girls</h3>
                 </a>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- Footer -->