|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Swimming | CrimsonFuchsia NoirScape</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#ef4444', |
|
|
secondary: '#d946ef' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-16 pt-24"> |
|
|
<section class="hero bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 mb-12"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"> |
|
|
Swim Training |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Dive into our comprehensive swimming resources and training programs |
|
|
</p> |
|
|
<img src="https://static.photos/blue/1024x576/10" alt="Swimming pool" class="rounded-xl w-full h-auto mb-8"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition"> |
|
|
<h2 class="text-2xl font-bold mb-4">Swimming Techniques</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary/20 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="activity" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Freestyle</h3> |
|
|
<p class="text-gray-400">Master the most efficient swimming stroke with proper body rotation and breathing techniques.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-secondary/20 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="waves" class="text-secondary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Breaststroke</h3> |
|
|
<p class="text-gray-400">Learn the timing and coordination needed for this classic swimming style.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gradient-to-r from-primary/20 to-secondary/20 p-2 rounded-lg mr-4"> |
|
|
<i data-feather="wind" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Butterfly</h3> |
|
|
<p class="text-gray-400">Advanced technique focusing on powerful dolphin kicks and arm movements.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-bold mb-4">Training Schedule</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<th class="text-left py-3 px-4">Day</th> |
|
|
<th class="text-left py-3 px-4">Focus</th> |
|
|
<th class="text-right py-3 px-4">Duration</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">Monday</td> |
|
|
<td class="py-3 px-4">Endurance</td> |
|
|
<td class="py-3 px-4 text-right">60 mins</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">Wednesday</td> |
|
|
<td class="py-3 px-4">Technique</td> |
|
|
<td class="py-3 px-4 text-right">45 mins</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">Friday</td> |
|
|
<td class="py-3 px-4">Speed</td> |
|
|
<td class="py-3 px-4 text-right">60 mins</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="py-3 px-4">Saturday</td> |
|
|
<td class="py-3 px-4">Open Water</td> |
|
|
<td class="py-3 px-4 text-right">90 mins</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="bg-gray-800 rounded-2xl p-8 mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Swim Gear Recommendations</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-700 rounded-xl p-4 hover:bg-gray-600 transition"> |
|
|
<img src="https://static.photos/blue/320x240/1" alt="Goggles" class="rounded-lg w-full h-48 object-cover mb-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Performance Goggles</h3> |
|
|
<p class="text-gray-300 mb-4">Anti-fog, UV protection, and comfortable fit for long training sessions.</p> |
|
|
<span class="inline-block px-3 py-1 rounded-full bg-primary/20 text-primary">Essential</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-xl p-4 hover:bg-gray-600 transition"> |
|
|
<img src="https://static.photos/blue/320x240/2" alt="Swim Cap" class="rounded-lg w-full h-48 object-cover mb-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Silicone Swim Cap</h3> |
|
|
<p class="text-gray-300 mb-4">Reduces drag and protects hair from chlorine damage.</p> |
|
|
<span class="inline-block px-3 py-1 rounded-full bg-secondary/20 text-secondary">Recommended</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-xl p-4 hover:bg-gray-600 transition"> |
|
|
<img src="https://static.photos/blue/320x240/3" alt="Pull Buoy" class="rounded-lg w-full h-48 object-cover mb-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Training Aids</h3> |
|
|
<p class="text-gray-300 mb-4">Pull buoys, paddles, and kickboards for focused drills.</p> |
|
|
<span class="inline-block px-3 py-1 rounded-full bg-gray-600 text-gray-300">Optional</span> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
