| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NAGAS Volleyball – Select a Team</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; |
| } |
| |
| .achievement-card, .team-tile { |
| transition: all 0.3s ease; |
| border: 1px solid #008080; |
| border-radius: 6px; |
| background-color: #1E1E1E; |
| padding: 20px; |
| text-align: center; |
| color: white; |
| } |
| |
| |
| .achievement-card:hover, .team-tile:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3); |
| } |
| |
| |
| .section-title { |
| margin-bottom: 20px; |
| } |
| |
| |
| header, footer { |
| width: 100%; |
| padding: 20px; |
| } |
| </style> |
| </head> |
| <body class="bg-dark text-white"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> > |
| <span class="text-white">Volleyball</span> |
| </nav> |
| </div> |
| </div> |
|
|
| |
| <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">Welcome to NAGAS Volleyball</h1> |
| <p class="text-lightGrey text-base mb-6">Where teamwork, skill, and passion meet</p> |
| <div class="max-w-3xl mx-auto"> |
| <p class="text-lightGrey text-base"> |
| Our volleyball program develops technical skills, teamwork, and leadership for athletes of all levels. |
| From junior to senior teams, we foster a love for the game and a commitment to excellence. Join us on the court! |
| </p> |
| </div> |
| </section> |
|
|
| |
| <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">Our Volleyball Achievements</h2> |
| <p class="text-lightGrey text-sm text-center mb-8">Celebrating excellence on and off the court</p> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="achievement-card"> |
| <h3 class="text-xl font-bold mb-2">ASAC Champions 2024</h3> |
| <p class="text-primary text-sm mb-2">2024</p> |
| <p class="text-lightGrey text-sm">Senior A Girls team won the ASAC Volleyball Championship.</p> |
| </div> |
| <div class="achievement-card"> |
| <h3 class="text-xl font-bold mb-2">Most Improved Team 2023</h3> |
| <p class="text-primary text-sm mb-2">2023</p> |
| <p class="text-lightGrey text-sm">Junior B Boys recognized for outstanding progress and sportsmanship.</p> |
| </div> |
| <div class="achievement-card"> |
| <h3 class="text-xl font-bold mb-2">Community Outreach 2022</h3> |
| <p class="text-primary text-sm mb-2">2022</p> |
| <p class="text-lightGrey text-sm">Hosted free volleyball clinics for 100+ local youth.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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">Our Volleyball Teams</h2> |
| <p class="text-lightGrey text-base text-center mb-8">Select a team to view players</p> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <a href="junior-a-boys.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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Junior A Boys</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Junior B Boys</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Junior A Girls</h3> |
| </a> |
| <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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Junior B Girls</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Senior A Boys</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Senior B Boys</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Senior A Girls</h3> |
| </a> |
| <a href="#" 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> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <h3 class="text-xl font-bold">Senior B Girls</h3> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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>© 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| 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> |
|
|
