Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NISC NAGAS - Official Sports Team</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .bebas { font-family: 'Bebas Neue', sans-serif; } | |
| .montserrat { font-family: 'Montserrat', sans-serif; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-[#62c1cd] text-[#020202] p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/sport/200x200/42" alt="NAGAS Logo" class="h-12 w-12 rounded-full"> | |
| <div class="flex flex-col"> | |
| <span class="bebas text-2xl">NAGAS</span> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex justify-center"> | |
| <div class="hidden md:flex space-x-6 montserrat"> | |
| <a href="index.html" class="hover:text-[#62c1cd]">Home</a> | |
| <a href="teams.html" class="hover:text-[#62c1cd]">Teams</a> | |
| <a href="schedule.html" class="hover:text-[#62c1cd]">Schedule</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="menuButton" class="hover:text-[#62c1cd]"> | |
| <i data-feather="more-vertical"></i> | |
| </button> | |
| <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-[#020202] rounded-md shadow-lg z-10"> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">Gallery</a> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">Contact</a> | |
| <a href="#" class="block px-4 py-2 text-[#fcfdfd] hover:bg-[#62c1cd] hover:text-[#020202]">NISC Athletics</a> | |
| </div> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-r from-[#62c1cd] to-[#020202] overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <img src="http://static.photos/sport/1200x630/123" alt="Team Photo" class="absolute w-full h-full object-cover"> | |
| <div class="container mx-auto relative z-10 text-center px-4"> | |
| <h1 class="bebas text-6xl md:text-8xl text-white mb-4">NISC NAGAS</h1> | |
| <p class="montserrat text-xl md:text-2xl text-white mb-8 max-w-2xl mx-auto"> | |
| The official sports team of Northbridge International School of Cambodia. | |
| Excellence through teamwork, discipline, and school spirit. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-3 px-6 rounded-lg montserrat"> | |
| Join Our Team | |
| </a> | |
| <a href="#" class="bg-transparent border-2 border-[#fcfdfd] hover:bg-[#fcfdfd] hover:text-[#020202] text-[#fcfdfd] font-bold py-3 px-6 rounded-lg montserrat"> | |
| Upcoming Games | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Welcome Message Section --> | |
| <section class="py-20 bg-[#020202] text-[#fcfdfd]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="bebas text-4xl text-[#62c1cd] mb-6">WELCOME TO NAGAS</h2> | |
| <div class="bg-[#62c1cd]/10 p-8 rounded-lg mb-8"> | |
| <p class="montserrat text-lg mb-6"> | |
| "Welcome to the official home of the NISC NAGAS! As team captain, I'm proud to lead this group of dedicated athletes who represent our school with passion and sportsmanship." | |
| </p> | |
| <p class="montserrat text-lg"> | |
| Our mission is to develop student-athletes who excel both on and off the field, fostering teamwork, discipline, and school spirit while competing at the highest levels of interscholastic sports. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Highlights Section --> | |
| <section class="py-20 bg-[#fcfdfd] text-[#020202]"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-12">TEAM HIGHLIGHTS</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Left Column --> | |
| <div class="space-y-8"> | |
| <!-- Top Left - Achievements --> | |
| <div class="bg-[#020202] text-[#fcfdfd] p-6 rounded-lg"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-4">Recent Achievements</h3> | |
| <ul class="montserrat space-y-3"> | |
| <li>🏆 Won Phnom Penh Volleyball Championship</li> | |
| <li>🥇 3 Gold medals at ISF Swimming Meet</li> | |
| <li>⭐ 5 players selected for All-City Team</li> | |
| </ul> | |
| </div> | |
| <!-- Bottom Left - Upcoming Games --> | |
| <div class="bg-[#020202] text-[#fcfdfd] p-6 rounded-lg"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-4">Next Games</h3> | |
| <ul class="montserrat space-y-3"> | |
| <li>May 22 vs CIS (Volleyball)</li> | |
| <li>May 29 vs Logos (Basketball)</li> | |
| <li>June 5 - Phnom Penh Invitational</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Right Column - MVPs --> | |
| <div class="bg-[#020202] text-[#fcfdfd] p-6 rounded-lg"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-4">MVPs</h3> | |
| <div class="flex flex-col md:flex-row items-start gap-6 mb-6"> | |
| <img src="http://static.photos/sport/200x200/7" alt="MVP Player" class="rounded-lg w-full md:w-1/2"> | |
| <div class="montserrat"> | |
| <h4 class="font-bold text-lg">Sophia R.</h4> | |
| <p class="text-sm">Volleyball Captain</p> | |
| <p class="mt-2">Leading scorer with 15.2 points per game. Team captain for 2 seasons.</p> | |
| </div> | |
| </div> | |
| <div class="bg-[#62c1cd]/20 p-4 rounded-lg montserrat italic"> | |
| "Being part of NAGAS has taught me the true meaning of teamwork and perseverance. Every practice, every game makes us stronger together." | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-20 bg-[#020202] text-[#fcfdfd]"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="bebas text-4xl text-center text-[#62c1cd] mb-12">NEWS & UPDATES</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <!-- News Item 1 --> | |
| <div class="bg-[#62c1cd]/10 p-6 rounded-lg"> | |
| <h3 class="bebas text-2xl mb-2">NAGAS Win Championship</h3> | |
| <p class="montserrat text-sm text-gray-400 mb-3">May 10, 2023</p> | |
| <p class="montserrat mb-4"> | |
| Our volleyball team secured their second consecutive city championship with a thrilling 3-2 victory over ISPP... | |
| </p> | |
| <a href="#" class="montserrat text-[#62c1cd] hover:underline">Read More →</a> | |
| </div> | |
| <!-- News Item 2 --> | |
| <div class="bg-[#62c1cd]/10 p-6 rounded-lg"> | |
| <h3 class="bebas text-2xl mb-2">Tryouts Announced</h3> | |
| <p class="montserrat text-sm text-gray-400 mb-3">May 5, 2023</p> | |
| <p class="montserrat mb-4"> | |
| Basketball tryouts for the 2023-24 season will be held June 12-14 in the NISC gymnasium. All interested students welcome... | |
| </p> | |
| <a href="#" class="montserrat text-[#62c1cd] hover:underline">Read More →</a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h3 class="bebas text-2xl text-[#62c1cd] mb-6">QUICK LINKS</h3> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <a href="#" class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-3 px-6 rounded-lg montserrat"> | |
| Team Roster | |
| </a> | |
| <a href="schedule.html" class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-3 px-6 rounded-lg montserrat"> | |
| Game Schedule | |
| </a> | |
| <a href="#" class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-3 px-6 rounded-lg montserrat"> | |
| Photo Gallery | |
| </a> | |
| <a href="#" class="bg-[#62c1cd] hover:bg-[#4da8b4] text-[#020202] font-bold py-3 px-6 rounded-lg montserrat"> | |
| NISC Athletics | |
| </a> | |
| </div> | |
| <p class="montserrat mb-6">Follow us on social media for the latest updates!</p> | |
| <div class="flex justify-center space-x-6"> | |
| <a href="#" class="text-[#62c1cd] hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-[#62c1cd] hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-[#62c1cd] hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="bebas text-2xl mb-4">NISC NAGAS</h3> | |
| <p class="montserrat text-gray-400"> | |
| The official sports team of Northbridge International School of Cambodia. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Quick Links</h4> | |
| <ul class="montserrat space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Teams</a></li> | |
| <li><a href="schedule.html" class="text-gray-400 hover:text-white">Schedule</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Gallery</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Contact</h4> | |
| <address class="montserrat text-gray-400 not-italic"> | |
| Northbridge International School<br> | |
| Phnom Penh, Cambodia<br> | |
| Email: nisc.nagas@nisc.edu.kh<br> | |
| Phone: +855 23 123 4567 | |
| </address> | |
| </div> | |
| <div> | |
| <h4 class="bebas text-xl mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center montserrat text-gray-400"> | |
| <p>© 2023 NISC NAGAS. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const menuButton = document.getElementById('menuButton'); | |
| const dropdownMenu = document.getElementById('dropdownMenu'); | |
| menuButton.addEventListener('click', function() { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!menuButton.contains(event.target) && !dropdownMenu.contains(event.target)) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |