|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Classes - Pump Palace</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Oswald:wght@400;600&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="relative h-96 flex items-center justify-center bg-gray-900 overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div> |
|
|
<img src="http://static.photos/workspace/1200x630/1" alt="Group Class" class="absolute w-full h-full object-cover"> |
|
|
<div class="relative z-20 text-center px-4"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 font-oswald uppercase">OUR CLASSES</h1> |
|
|
<p class="text-xl text-white mb-8 max-w-2xl mx-auto">Find the perfect workout to challenge your body and mind</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="relative group overflow-hidden rounded-xl h-96"> |
|
|
<img src="http://static.photos/sport/640x360/4" alt="HIIT Class" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center flex-col p-6 text-center"> |
|
|
<h3 class="text-3xl font-bold text-white mb-4">HIIT</h3> |
|
|
<p class="text-white mb-6">High Intensity Interval Training for maximum calorie burn</p> |
|
|
<a href="#hiit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">LEARN MORE</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative group overflow-hidden rounded-xl h-96"> |
|
|
<img src="http://static.photos/sport/640x360/5" alt="Yoga Class" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center flex-col p-6 text-center"> |
|
|
<h3 class="text-3xl font-bold text-white mb-4">YOGA</h3> |
|
|
<p class="text-white mb-6">Improve flexibility, strength and mental clarity</p> |
|
|
<a href="#yoga" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">LEARN MORE</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative group overflow-hidden rounded-xl h-96"> |
|
|
<img src="http://static.photos/sport/640x360/6" alt="CrossFit Class" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center flex-col p-6 text-center"> |
|
|
<h3 class="text-3xl font-bold text-white mb-4">CROSSFIT</h3> |
|
|
<p class="text-white mb-6">Constantly varied functional movements at high intensity</p> |
|
|
<a href="#crossfit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">LEARN MORE</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="hiit" class="py-20 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row gap-12 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/sport/640x360/7" alt="HIIT Class" class="rounded-xl shadow-2xl w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-4xl font-bold mb-6 font-oswald uppercase">HIIT</h2> |
|
|
<p class="text-lg mb-6">Our High Intensity Interval Training classes are designed to push your limits with alternating bursts of intense activity and fixed periods of less-intense activity or rest. Burn up to 500 calories in just 45 minutes!</p> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-3">BENEFITS:</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Maximizes calorie burn in minimal time</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Boosts metabolism for hours after workout</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Improves cardiovascular health</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>No equipment needed - bodyweight only</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
<a href="#trial" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">TRY A FREE CLASS</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="yoga" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row-reverse gap-12 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/sport/640x360/8" alt="Yoga Class" class="rounded-xl shadow-2xl w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-4xl font-bold mb-6 font-oswald uppercase">YOGA</h2> |
|
|
<p class="text-lg mb-6">Our yoga classes range from gentle flows to power yoga, suitable for all levels. Improve flexibility, build strength, and find mental clarity through mindful movement and breathwork.</p> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-3">BENEFITS:</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Increases flexibility and range of motion</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Builds strength without impact</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Reduces stress and anxiety</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Improves posture and balance</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
<a href="#trial" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">TRY A FREE CLASS</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="crossfit" class="py-20 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row gap-12 items-center"> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/sport/640x360/9" alt="CrossFit Class" class="rounded-xl shadow-2xl w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<h2 class="text-4xl font-bold mb-6 font-oswald uppercase">CROSSFIT</h2> |
|
|
<p class="text-lg mb-6">Our CrossFit program delivers a fitness that is broad, general, and inclusive. The methodology is built on constantly varied functional movements performed at high intensity.</p> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-3">BENEFITS:</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Full-body functional fitness</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Scalable for all fitness levels</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Community-driven workouts</span></li> |
|
|
<li class="flex items-start"><i data-feather="check" class="text-green-500 mr-2 mt-1"></i><span>Visible results in strength and endurance</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
<a href="#trial" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">TRY A FREE CLASS</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 font-oswald uppercase">FULL CLASS SCHEDULE</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full border-collapse"> |
|
|
<thead> |
|
|
<tr class="bg-gray-900 text-white"> |
|
|
<th class="p-4 text-left">Time</th> |
|
|
<th class="p-4 text-center">Monday</th> |
|
|
<th class="p-4 text-center">Tuesday</th> |
|
|
<th class="p-4 text-center">Wednesday</th> |
|
|
<th class="p-4 text-center">Thursday</th> |
|
|
<th class="p-4 text-center">Friday</th> |
|
|
<th class="p-4 text-center">Saturday</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-200"> |
|
|
<td class="p-4 font-semibold">6:00 AM</td> |
|
|
<td class="p-4 text-center bg-red-100">HIIT</td> |
|
|
<td class="p-4 text-center bg-blue-100">Yoga</td> |
|
|
<td class="p-4 text-center bg-red-100">CrossFit</td> |
|
|
<td class="p-4 text-center bg-purple-100">Pilates</td> |
|
|
<td class="p-4 text-center bg-red-100">Boxing</td> |
|
|
<td class="p-4 text-center bg-yellow-100">Spin</td> |
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<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> |
