GOAL:

Create a static basketball team page with 8 distinct teams (4 senior + 4 junior), each containing 13 player cards (7 starters + 6 substitutes), using NAGAS school's dark theme and green (#5ECA2A) accents.
PAGE STRUCTURE REQUIREMENTS:

Team Navigation Section


Title: "OUR TEAMS" (28px bold, #5ec0cc)
Filters (non-functional for now):

Team Type dropdown: "All Teams", "Senior", "Junior"
Team Letter dropdown: "All", "A", "B"
Gender buttons: "All", "Female", "Male" (active state: #5ECA2A)




Team Sections (8 total in this order):


Senior Female A
Senior Female B
Senior Male A
Senior Male B
Junior Female A
Junior Female B
Junior Male A
Junior Male B

PLAYER CARD SPECIFICATIONS:

Starters (7 per team):

Green accent (#5ECA2A border-top)
"STARTER" badge (green background)
Jersey numbers: 1-7


Substitutes (6 per team):

Gray accent (#333333 border-top)
"SUBSTITUTE" badge (gray background)
Jersey numbers: 8-13


Content per card:

Player photo placeholder (basketball silhouette)
Jersey number (24px, #5ECA2A for starters, white for subs)
Name: "LAST, First" (18px bold)
Position (PG/SG/SF/PF/C), Grade (11-12 for senior, 8-10 for junior), Height (160-195cm)

Realistic height based on position




SPECIFIC CONTENT:

Junior Male A Team:

First card: "CHING, Pisey" (PG, Grade 8, 165cm, #1)
Remaining cards: "PLAYER, First" placeholders


All other teams: "PLAYER, First" placeholders with:


Realistic position distribution

Consecutive jersey numbering
Appropriate grades/heights



DESIGN REQUIREMENTS:

Layout:

Desktop: 3-column grid (30px spacing)
Tablet: 2-column grid (20px spacing)
Mobile: 1-column stack (15px spacing)


Styling:

Background: #121212
Cards: #1e1e1e with 8px border-radius
Text: #f8f9fa
Hover: Subtle lift effect


Team Headings: 24px #5ECA2A
Section Title: "MEET THE TEAM" (28px bold, #f8f9fa)

IMPLEMENTATION NOTES:

Create static page only (no functionality)
Use basketball player silhouettes for all photo placeholders
Maintain perfect visual consistency across all teams
Prepare for future dynamic functionality
Follow existing school branding guidelines

about.html

@@ -83,6 +83,7 @@
             </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>

basketball.html

@@ -68,6 +68,7 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball 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>

council.html

@@ -68,12 +68,13 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball Teams</a>
                 <a href="schedule.html" class="hover:text-primary">Schedule</a>
                 <a href="council.html" class="text-primary font-bold">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">
+<button id="menu-toggle" class="md:hidden text-white">
                 <i data-feather="menu"></i>
             </button>
         </div>

football.html

@@ -75,6 +75,7 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball 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>

get-involved.html

@@ -100,12 +100,13 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball 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="text-primary font-bold">Get Involved</a>
             </nav>
-            <button id="menu-toggle" class="md:hidden text-white">
+<button id="menu-toggle" class="md:hidden text-white">
                 <i data-feather="menu"></i>
             </button>
         </div>

index.html

@@ -76,6 +76,7 @@
 <nav class="hidden md:flex space-x-6">
                 <a href="about.html" class="hover:text-primary">About</a>
                 <a href="teams.html" class="hover:text-primary">Teams</a>
+                <a href="basketball-teams.html" class="hover:text-primary">Basketball 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>

news.html

@@ -82,12 +82,13 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball 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="text-primary font-bold">News</a>
                 <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
             </nav>
-            <button id="menu-toggle" class="md:hidden text-white">
+<button id="menu-toggle" class="md:hidden text-white">
                 <i data-feather="menu"></i>
             </button>
         </div>

schedule.html

@@ -95,12 +95,13 @@
                 <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="basketball-teams.html" class="hover:text-primary">Basketball Teams</a>
                 <a href="schedule.html" class="text-primary font-bold">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">
+<button id="menu-toggle" class="md:hidden text-white">
                 <i data-feather="menu"></i>
             </button>
         </div>