| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NAGAS - Northbridge Athletic Groups and Sports</title> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&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: '#5ec0cc', |
| secondary: '#5ECCA2', |
| dark: '#121212', |
| darker: '#0a0a0a' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { |
| font-family: 'Open Sans', sans-serif; |
| background-color: #121212; |
| color: #ffffff; |
| } |
| h1, h2, h3, h4, h5, h6 { |
| font-family: 'Montserrat', sans-serif; |
| } |
| .hero-video { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| z-index: -1; |
| } |
| .news-ticker { |
| white-space: nowrap; |
| overflow: hidden; |
| box-sizing: border-box; |
| } |
| .ticker-content { |
| display: inline-block; |
| padding-left: 100%; |
| animation: ticker 30s linear infinite; |
| } |
| .ticker-content:hover { |
| animation-play-state: paused; |
| } |
| @keyframes ticker { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-100%); } |
| } |
| .sport-card:hover { |
| transform: scale(1.05); |
| transition: all 0.3s ease; |
| } |
| .carousel-item { |
| transition: opacity 1s ease-in-out; |
| } |
| </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-2xl font-black"><span class="text-[#5ec0cc]">NAGAS</span><span class="text-white">ATHLETICS</span></a> |
| </div> |
| <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="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-[#5ec0cc]">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> |
| |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> |
| <div class="absolute inset-0 z-0"> |
| <div class="carousel-item absolute inset-0 opacity-100"> |
| <img src="http://static.photos/sport/1200x630/1" alt="Basketball Action" class="hero-video"> |
| </div> |
| <div class="carousel-item absolute inset-0 opacity-0"> |
| <img src="http://static.photos/sport/1200x630/2" alt="Volleyball Celebration" class="hero-video"> |
| </div> |
| <div class="carousel-item absolute inset-0 opacity-0"> |
| <img src="http://static.photos/sport/1200x630/3" alt="Swimming Meet" class="hero-video"> |
| </div> |
| <div class="carousel-item absolute inset-0 opacity-0"> |
| <img src="http://static.photos/sport/1200x630/4" alt="Track & Field" class="hero-video"> |
| </div> |
| </div> |
| <div class="absolute inset-0 bg-black bg-opacity-60"></div> |
| <div class="relative z-10 text-center px-4"> |
| <h1 class="text-5xl md:text-6xl font-bold text-primary mb-4">FIGHTING NAGAS SPIRIT</h1> |
| <p class="text-xl md:text-2xl mb-8">Strength • Resilience • Unity</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="teams.html" class="bg-primary text-dark font-bold py-3 px-6 rounded hover:bg-[#4ab3c6] transition">View Teams</a> |
| <a href="schedule.html#upcoming" class="border-2 border-primary text-primary font-bold py-3 px-6 rounded hover:bg-primary hover:text-dark transition">Upcoming Games</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="bg-[#1e1e1e] border-t border-primary py-3 overflow-hidden"> |
| <div class="news-ticker"> |
| <div class="ticker-content flex items-center"> |
| <span class="mx-8 flex items-center"> |
| <i data-feather="award" class="text-primary mr-2"></i> |
| Volleyball Seniors Win ISSAPP Championship |
| <a href="news.html" class="text-primary ml-2 hover:underline">Read More</a> |
| </span> |
| <span class="mx-8 flex items-center"> |
| <i data-feather="target" class="text-primary mr-2"></i> |
| Basketball Juniors A Advance to Finals |
| <a href="news.html" class="text-primary ml-2 hover:underline">Read More</a> |
| </span> |
| <span class="mx-8 flex items-center"> |
| <i data-feather="clock" class="text-primary mr-2"></i> |
| Track & Field Records Broken at Regional Meet |
| <a href="news.html" class="text-primary ml-2 hover:underline">Read More</a> |
| </span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="bg-[#1e1e1e] p-6 rounded-lg"> |
| <h2 class="text-2xl font-bold text-primary mb-4">Message from the Head of Athletics</h2> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/people/100x100/11" alt="Andrew Dean" class="w-16 h-16 rounded-full mr-4"> |
| <div> |
| <h3 class="text-xl font-bold">Andrew Dean</h3> |
| <p class="text-secondary">Head of Athletics</p> |
| </div> |
| </div> |
| <p class="mb-3">Welcome to another exciting season of NAGAS Athletics! As we continue to build on our legacy of excellence, I'm proud to see our student-athletes grow not just in skill but in character. Our programs are designed to challenge athletes physically and mentally while fostering the attributes of the IB Learner Profile.</p> |
| <p class="mb-3">This year, we're focusing on holistic development that builds leadership qualities, resilience, and a strong sense of community. Every practice session is an opportunity to build character, and every competition teaches us something new about ourselves and our community.</p> |
| <p>Together, we'll continue to embody the Fighting Nagas Spirit - strength through unity!</p> |
| </div> |
|
|
| |
| <div class="bg-[#1e1e1e] p-6 rounded-lg"> |
| <h2 class="text-2xl font-bold text-primary mb-4">Message from the Council President</h2> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/people/100x100/13" alt="Leang Chinh Dom" class="w-16 h-16 rounded-full mr-4"> |
| <div> |
| <h3 class="text-xl font-bold">Leang Chinh Dom</h3> |
| <p class="text-secondary">Athletic Council President</p> |
| </div> |
| </div> |
| <p class="mb-3">As your student council president, I'm excited to represent the voice of our athletes and work with the administration to make this year the best yet. Our council is committed to organizing events that bring our community together and create lasting memories for everyone involved.</p> |
| <p class="mb-3">We believe that athletics is about more than just winning games - it's about building character, developing leadership skills, and creating a supportive environment where everyone can thrive. This year, we're planning several new initiatives to enhance the experience for all student-athletes.</p> |
| <p>Let's make this season one to remember!</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-[#1e1e1e] p-6 rounded-lg"> |
| <h2 class="text-2xl font-bold text-primary mb-4">NEXT MATCHES</h2> |
| <div class="space-y-4"> |
| <div class="border-l-4 border-secondary pl-3"> |
| <p class="text-secondary">June 15, 3:00 PM</p> |
| <p class="font-bold">NAGAS vs. ISSPP</p> |
| <p class="text-sm flex items-center"> |
| <i data-feather="basketball" class="mr-1"></i> Basketball |
| </p> |
| </div> |
| <div class="border-l-4 border-secondary pl-3"> |
| <p class="text-secondary">June 18, 5:00 PM</p> |
| <p class="font-bold">NAGAS vs. NIST</p> |
| <p class="text-sm flex items-center"> |
| <i data-feather="volleyball" class="mr-1"></i> Volleyball |
| </p> |
| </div> |
| <div class="border-l-4 border-secondary pl-3"> |
| <p class="text-secondary">June 22, 2:00 PM</p> |
| <p class="font-bold">NAGAS vs. NISB</p> |
| <p class="text-sm flex items-center"> |
| <i data-feather="activity" class="mr-1"></i> Swimming |
| </p> |
| </div> |
| </div> |
| <a href="schedule.html#upcoming" class="mt-4 inline-block text-primary hover:underline">View All</a> |
| </div> |
|
|
| |
| <div class="bg-[#1e1e1e] p-6 rounded-lg"> |
| <h2 class="text-2xl font-bold text-primary mb-4">RECENT RESULTS</h2> |
| <div class="space-y-4"> |
| <div> |
| <p class="font-bold">Basketball - Juniors A</p> |
| <p>NAGAS 78 - 65 NISB <span class="text-green-500">W</span></p> |
| </div> |
| <div> |
| <p class="font-bold">Volleyball - Seniors B</p> |
| <p>NAGAS 3 - 1 NIST <span class="text-green-500">W</span></p> |
| </div> |
| <div> |
| <p class="font-bold">Track & Field</p> |
| <p>Regional Meet - 3rd Place Overall <span class="text-green-500">W</span></p> |
| </div> |
| </div> |
| <a href="schedule.html#results" class="mt-4 inline-block text-primary hover:underline">View All Results</a> |
| </div> |
|
|
| |
| <div class="bg-[#1e1e1e] p-6 rounded-lg"> |
| <h2 class="text-2xl font-bold text-primary mb-4">ATHLETE OF THE WEEK</h2> |
| <div class="text-center"> |
| <img src="http://static.photos/people/320x240/42" alt="Sethean Thay" class="w-32 h-32 rounded-full mx-auto mb-4"> |
| <h3 class="text-xl font-bold">Sethean Thay</h3> |
| <p class="text-secondary">Volleyball</p> |
| <p class="my-2">25 kills in last match</p> |
| <a href="volleyball.html" class="inline-block mt-2 text-primary hover:underline">Meet the Team</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-16 bg-[#0a0a0a]"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-primary text-center mb-12">OUR SPORTS</h2> |
| <div class="relative"> |
| <div class="overflow-hidden"> |
| <div class="flex transition-transform duration-500 ease-in-out" id="sportsCarousel"> |
| |
| <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500"> |
| <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <img src="http://static.photos/people/640x360/42" alt="Volleyball" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="volleyball" class="text-primary mr-2"></i> |
| <h3 class="text-xl font-bold">Volleyball</h3> |
| </div> |
| <p class="mb-4">Championship-winning seniors and promising junior teams.</p> |
| <a href="volleyball.html" class="text-primary hover:underline">Explore Teams</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500"> |
| <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <img src="http://static.photos/people/640x360/133" alt="Basketball" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="basketball" class="text-primary mr-2"></i> |
| <h3 class="text-xl font-bold">Basketball</h3> |
| </div> |
| <p class="mb-4">Juniors A/B and Seniors A/B teams competing in regional tournaments.</p> |
| <a href="basketball.html" class="text-primary hover:underline">Explore Teams</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-100 scale-100 transform transition-all duration-500"> |
| <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <img src="http://static.photos/sport/640x360/5" alt="Football" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="circle" class="text-primary mr-2"></i> |
| <h3 class="text-xl font-bold">Football</h3> |
| </div> |
| <p class="mb-4">Competitive teams for all skill levels with regular training.</p> |
| <a href="football.html" class="text-primary hover:underline">Explore Teams</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500"> |
| <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <img src="http://static.photos/sport/640x360/6" alt="Track & Field" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="activity" class="text-primary mr-2"></i> |
| <h3 class="text-xl font-bold">Cross Country</h3> |
| </div> |
| <p class="mb-4">Regional champions with athletes competing at national level.</p> |
| <a href="cross-country.html" class="text-primary hover:underline">Explore Teams</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500"> |
| <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full"> |
| <img src="http://static.photos/sport/640x360/7" alt="Swimming" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex items-center mb-3"> |
| <i data-feather="droplet" class="text-primary mr-2"></i> |
| <h3 class="text-xl font-bold">Swimming</h3> |
| </div> |
| <p class="mb-4">State-of-the-art facilities and coaching for all levels.</p> |
| <a href="swimming.html" class="text-primary hover:underline">Explore Teams</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <button id="prevSlide" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full ml-2 hidden md:block"> |
| <i data-feather="chevron-left"></i> |
| </button> |
| <button id="nextSlide" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full mr-2 hidden md:block"> |
| <i data-feather="chevron-right"></i> |
| </button> |
| </div> |
| |
| |
| <div class="flex justify-center mt-6 space-x-2 md:hidden"> |
| <div class="w-3 h-3 bg-[#5ec0cc] rounded-full"></div> |
| <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div> |
| <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div> |
| <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div> |
| <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <a href="teams.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition"> |
| <i data-feather="users" class="text-primary mx-auto mb-3"></i> |
| <p>Teams</p> |
| </a> |
| <a href="schedule.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition"> |
| <i data-feather="calendar" class="text-primary mx-auto mb-3"></i> |
| <p>Schedule</p> |
| </a> |
| <a href="news.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition"> |
| <i data-feather="file-text" class="text-primary mx-auto mb-3"></i> |
| <p>News & Media</p> |
| </a> |
| <a href="get-involved.html" class="bg-[#2e2e2e] p-6 rounded-lg text-center hover:bg-[#3e3e3e] transition"> |
| <i data-feather="heart" class="text-primary mx-auto mb-3"></i> |
| <p>Get Involved</p> |
| </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-secondary"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-primary hover:text-secondary"> |
| <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 src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| feather.replace(); |
| |
| let currentIndex = 0; |
| const items = document.querySelectorAll('.carousel-item'); |
| const itemCount = items.length; |
| |
| function nextSlide() { |
| items[currentIndex].classList.remove('opacity-100'); |
| items[currentIndex].classList.add('opacity-0'); |
| |
| currentIndex = (currentIndex + 1) % itemCount; |
| |
| items[currentIndex].classList.remove('opacity-0'); |
| items[currentIndex].classList.add('opacity-100'); |
| } |
| |
| setInterval(nextSlide, 5000); |
| |
| |
| let currentSportIndex = 2; |
| const sportItems = document.querySelectorAll('#sportsCarousel > div'); |
| const totalSports = sportItems.length; |
| |
| function updateSportsCarousel() { |
| sportItems.forEach((item, index) => { |
| if (index === currentSportIndex) { |
| |
| item.classList.remove('opacity-60', 'scale-90'); |
| item.classList.add('opacity-100', 'scale-100'); |
| } else { |
| |
| item.classList.remove('opacity-100', 'scale-100'); |
| item.classList.add('opacity-60', 'scale-90'); |
| } |
| }); |
| |
| |
| const carousel = document.getElementById('sportsCarousel'); |
| const offset = -(currentSportIndex - 1) * (100 / 3); |
| carousel.style.transform = `translateX(${offset}%)`; |
| } |
| |
| function nextSport() { |
| currentSportIndex = (currentSportIndex + 1) % totalSports; |
| updateSportsCarousel(); |
| } |
| |
| function prevSport() { |
| currentSportIndex = (currentSportIndex - 1 + totalSports) % totalSports; |
| updateSportsCarousel(); |
| } |
| |
| |
| let sportInterval = setInterval(nextSport, 5000); |
| |
| |
| document.querySelector('#sportsCarousel').addEventListener('mouseenter', () => { |
| clearInterval(sportInterval); |
| }); |
| |
| document.querySelector('#sportsCarousel').addEventListener('mouseleave', () => { |
| sportInterval = setInterval(nextSport, 5000); |
| }); |
| |
| |
| document.getElementById('nextSlide').addEventListener('click', nextSport); |
| document.getElementById('prevSlide').addEventListener('click', prevSport); |
| |
| |
| updateSportsCarousel(); |
| |
| 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> |
|
|
