WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PowerZone Fitness</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } .hero-section { background-image: url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?q=80&w=2575&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover; background-position: center; } </style> </head> <body class="bg-gray-100 text-gray-800"> <!-- Header & Navigation --> <header class="bg-white shadow-md sticky top-0 z-50"> <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> <a href="#" class="text-2xl font-bold text-gray-900">Power<span class="text-indigo-600">Zone</span></a> <div class="hidden md:flex space-x-6 items-center"> <a href="#about" class="text-gray-600 hover:text-indigo-600">About Us</a> <a href="#services" class="text-gray-600 hover:text-indigo-600">Services</a> <a href="#pricing" class="text-gray-600 hover:text-indigo-600">Pricing</a> <a href="#blog" class="text-gray-600 hover:text-indigo-600">Blog</a> <a href="#contact" class="text-gray-600 hover:text-indigo-600">Contact</a> <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-300">Join Now</a> </div> <div class="md:hidden"> <button id="mobile-menu-button" class="text-gray-800 focus:outline-none"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg> </button> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden"> <a href="#about" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">About Us</a> <a href="#services" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Services</a> <a href="#pricing" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Pricing</a> <a href="#blog" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Blog</a> <a href="#contact" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Contact</a> <a href="#" class="block px-6 py-3 bg-indigo-600 text-white text-center rounded-md m-4 hover:bg-indigo-700 transition duration-300">Join Now</a> </div> </header> <!-- Hero Section --> <section class="hero-section text-white h-[80vh] flex items-center"> <div class="container mx-auto px-6 text-center"> <div class="bg-black bg-opacity-50 p-8 rounded-lg"> <h1 class="text-4xl md:text-6xl font-bold mb-4">Unleash Your Inner Strength</h1> <p class="text-lg md:text-xl mb-8">Your journey to a healthier, stronger you starts here.</p> <a href="#pricing" class="bg-indigo-600 text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-indigo-700 transition duration-300">View Memberships</a> </div> </div> </section> <!-- About Us Section --> <section id="about" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">About PowerZone</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">We are more than just a gym; we are a community dedicated to helping you achieve your fitness goals in a supportive and motivating environment.</p> </div> <div class="flex flex-col md:flex-row items-center gap-12"> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1540496905036-5937c10647cc?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gym interior" class="rounded-lg shadow-lg w-full"> </div> <div class="md:w-1/2"> <h3 class="text-2xl font-semibold mb-4">Our Philosophy</h3> <p class="text-gray-600 mb-4">At PowerZone, we believe that fitness is a lifelong journey. Our mission is to provide you with the best equipment, expert trainers, and a welcoming atmosphere to make that journey enjoyable and effective.</p> <p class="text-gray-600">We cater to everyone, from beginners to seasoned athletes, with a wide range of programs and classes designed to challenge and inspire you.</p> </div> </div> </div> </section> <!-- Our Services Section --> <section id="services" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Our Services</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">We offer a variety of programs to help you reach your specific fitness goals.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service Card 1 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Cardio Training" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Cardio Training</h3> <p class="text-gray-600">State-of-the-art treadmills, ellipticals, and bikes to get your heart pumping.</p> </div> </div> <!-- Service Card 2 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Strength Training" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Strength Training</h3> <p class="text-gray-600">A wide selection of free weights and resistance machines to build muscle and strength.</p> </div> </div> <!-- Service Card 3 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Personal Coaching" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Personal Coaching</h3> <p class="text-gray-600">One-on-one sessions with our certified trainers to create a personalized fitness plan.</p> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Membership Plans</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Choose the plan that's right for you and start your fitness journey today.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-4xl mx-auto"> <!-- Pricing Card 1 --> <div class="border rounded-lg p-6 text-center hover:shadow-xl transition duration-300"> <h3 class="text-xl font-semibold mb-2">Basic</h3> <p class="text-4xl font-bold mb-4">$29<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>-</li> <li>-</li> </ul> <button class="bg-gray-300 text-gray-800 px-6 py-2 rounded-md w-full hover:bg-gray-400">Choose Plan</button> </div> <!-- Pricing Card 2 --> <div class="border-2 border-indigo-600 rounded-lg p-6 text-center shadow-xl transform scale-105"> <span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase -mt-10 inline-block">Most Popular</span> <h3 class="text-xl font-semibold mb-2 mt-2">Premium</h3> <p class="text-4xl font-bold mb-4">$49<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>Group Classes</li> <li>-</li> </ul> <button class="bg-indigo-600 text-white px-6 py-2 rounded-md w-full hover:bg-indigo-700">Choose Plan</button> </div> <!-- Pricing Card 3 --> <div class="border rounded-lg p-6 text-center hover:shadow-xl transition duration-300"> <h3 class="text-xl font-semibold mb-2">Pro</h3> <p class="text-4xl font-bold mb-4">$79<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>Group Classes</li> <li>Personal Training Session</li> </ul> <button class="bg-gray-300 text-gray-800 px-6 py-2 rounded-md w-full hover:bg-gray-400">Choose Plan</button> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Fitness Blog</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Get the latest fitness tips, success stories, and healthy recipes from our experts.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Blog Post 1 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1549060279-7e168fcee0c2?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Healthy eating" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">5 Tips for a Healthier Diet</h3> <p class="text-gray-600 mb-4">Learn how small changes in your diet can make a big difference in your fitness journey.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 2 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Workout routine" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">The Perfect Beginner's Workout</h3> <p class="text-gray-600 mb-4">Not sure where to start? This workout routine is designed for newcomers to the gym.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 3 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1594882645126-14020914d58d?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Success story" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Success Story: John's Transformation</h3> <p class="text-gray-600 mb-4">Read about how John lost 50 pounds and gained a new perspective on life at PowerZone.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Contact Us</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Have questions? Get in touch with us. We're here to help!</p> </div> <div class="flex flex-col md:flex-row gap-12"> <div class="md:w-1/2"> <form id="contact-form" class="bg-gray-50 p-8 rounded-lg shadow-md"> <div class="mb-4"> <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> <input type="text" id="name" name="name" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required> </div> <div class="mb-4"> <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> <input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required> </div> <div class="mb-4"> <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> <input id="message" name="message" rows="5" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required/> </div> <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md w-full font-semibold hover:bg-indigo-700 transition duration-300">Send Message</button> </form> <p id="form-message" class="mt-4 text-center"></p> </div> <div class="md:w-1/2"> <div class="aspect-w-16 aspect-h-9"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.763941490289!2d-77.0453026851869!3d-12.05941999146193!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c8c5c7d0b1b1%3A0x9d5f0b3b3b3b3b3b!2sPlaza%20San%20Mart%C3%ADn!5e0!3m2!1sen!2spe!4v1633020012345!5m2!1sen!2spe" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-md"></iframe> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-6 text-center"> <p>© 2024 PowerZone Fitness. All Rights Reserved.</p> <div class="flex justify-center space-x-4 mt-4"> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.012 3.584-.07 4.85c-.148 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.85s.012-3.584.07-4.85c.148-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.947s-.014-3.667-.072-4.947c-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616v.064c0 2.298 1.634 4.212 3.791 4.649-.69.188-1.43.233-2.18.087.608 1.885 2.372 3.26 4.465 3.3-1.625 1.27-3.672 2.022-5.892 2.022-.382 0-.76-.022-1.13-.066 2.099 1.343 4.6 2.123 7.28 2.123 8.733 0 13.512-7.239 13.512-13.512 0-.206-.005-.412-.013-.617.928-.67 1.729-1.5 2.369-2.45z"/></svg></a> </div> </div> </footer> <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Form submission message const contactForm = document.getElementById('contact-form'); const formMessage = document.getElementById('form-message'); contactForm.addEventListener('submit', function(e) { e.preventDefault(); formMessage.textContent = 'Thank you for your message! We will get back to you soon.'; formMessage.classList.add('text-green-600'); contactForm.reset(); setTimeout(() => { formMessage.textContent = ''; formMessage.classList.remove('text-green-600'); }, 5000); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PowerZone Fitness</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } .hero-section { background-image: url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?q=80&w=2575&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover; background-position: center; } </style> </head> <body class="bg-gray-100 text-gray-800"> <!-- Header & Navigation --> <header class="bg-white shadow-md sticky top-0 z-50"> <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> <a href="#" class="text-2xl font-bold text-gray-900">Power<span class="text-indigo-600">Zone</span></a> <div class="hidden md:flex space-x-6 items-center"> <a href="#about" class="text-gray-600 hover:text-indigo-600">About Us</a> <a href="#services" class="text-gray-600 hover:text-indigo-600">Services</a> <a href="#pricing" class="text-gray-600 hover:text-indigo-600">Pricing</a> <a href="#blog" class="text-gray-600 hover:text-indigo-600">Blog</a> <a href="#contact" class="text-gray-600 hover:text-indigo-600">Contact</a> <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-300">Join Now</a> </div> <div class="md:hidden"> <button id="mobile-menu-button" class="text-gray-800 focus:outline-none"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg> </button> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden"> <a href="#about" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">About Us</a> <a href="#services" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Services</a> <a href="#pricing" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Pricing</a> <a href="#blog" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Blog</a> <a href="#contact" class="block px-6 py-2 text-gray-600 hover:bg-gray-200">Contact</a> <a href="#" class="block px-6 py-3 bg-indigo-600 text-white text-center rounded-md m-4 hover:bg-indigo-700 transition duration-300">Join Now</a> </div> </header> <!-- Hero Section --> <section class="hero-section text-white h-[80vh] flex items-center"> <div class="container mx-auto px-6 text-center"> <div class="bg-black bg-opacity-50 p-8 rounded-lg"> <h1 class="text-4xl md:text-6xl font-bold mb-4">Unleash Your Inner Strength</h1> <p class="text-lg md:text-xl mb-8">Your journey to a healthier, stronger you starts here.</p> <a href="#pricing" class="bg-indigo-600 text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-indigo-700 transition duration-300">View Memberships</a> </div> </div> </section> <!-- About Us Section --> <section id="about" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">About PowerZone</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">We are more than just a gym; we are a community dedicated to helping you achieve your fitness goals in a supportive and motivating environment.</p> </div> <div class="flex flex-col md:flex-row items-center gap-12"> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1540496905036-5937c10647cc?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gym interior" class="rounded-lg shadow-lg w-full"> </div> <div class="md:w-1/2"> <h3 class="text-2xl font-semibold mb-4">Our Philosophy</h3> <p class="text-gray-600 mb-4">At PowerZone, we believe that fitness is a lifelong journey. Our mission is to provide you with the best equipment, expert trainers, and a welcoming atmosphere to make that journey enjoyable and effective.</p> <p class="text-gray-600">We cater to everyone, from beginners to seasoned athletes, with a wide range of programs and classes designed to challenge and inspire you.</p> </div> </div> </div> </section> <!-- Our Services Section --> <section id="services" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Our Services</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">We offer a variety of programs to help you reach your specific fitness goals.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service Card 1 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Cardio Training" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Cardio Training</h3> <p class="text-gray-600">State-of-the-art treadmills, ellipticals, and bikes to get your heart pumping.</p> </div> </div> <!-- Service Card 2 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Strength Training" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Strength Training</h3> <p class="text-gray-600">A wide selection of free weights and resistance machines to build muscle and strength.</p> </div> </div> <!-- Service Card 3 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition duration-300"> <img src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Personal Coaching" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Personal Coaching</h3> <p class="text-gray-600">One-on-one sessions with our certified trainers to create a personalized fitness plan.</p> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Membership Plans</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Choose the plan that's right for you and start your fitness journey today.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-4xl mx-auto"> <!-- Pricing Card 1 --> <div class="border rounded-lg p-6 text-center hover:shadow-xl transition duration-300"> <h3 class="text-xl font-semibold mb-2">Basic</h3> <p class="text-4xl font-bold mb-4">$29<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>-</li> <li>-</li> </ul> <button class="bg-gray-300 text-gray-800 px-6 py-2 rounded-md w-full hover:bg-gray-400">Choose Plan</button> </div> <!-- Pricing Card 2 --> <div class="border-2 border-indigo-600 rounded-lg p-6 text-center shadow-xl transform scale-105"> <span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase -mt-10 inline-block">Most Popular</span> <h3 class="text-xl font-semibold mb-2 mt-2">Premium</h3> <p class="text-4xl font-bold mb-4">$49<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>Group Classes</li> <li>-</li> </ul> <button class="bg-indigo-600 text-white px-6 py-2 rounded-md w-full hover:bg-indigo-700">Choose Plan</button> </div> <!-- Pricing Card 3 --> <div class="border rounded-lg p-6 text-center hover:shadow-xl transition duration-300"> <h3 class="text-xl font-semibold mb-2">Pro</h3> <p class="text-4xl font-bold mb-4">$79<span class="text-lg font-normal">/mo</span></p> <ul class="text-gray-600 mb-6 space-y-2"> <li>Full Gym Access</li> <li>Locker Rooms</li> <li>Group Classes</li> <li>Personal Training Session</li> </ul> <button class="bg-gray-300 text-gray-800 px-6 py-2 rounded-md w-full hover:bg-gray-400">Choose Plan</button> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="py-20"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Fitness Blog</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Get the latest fitness tips, success stories, and healthy recipes from our experts.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Blog Post 1 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1549060279-7e168fcee0c2?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Healthy eating" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">5 Tips for a Healthier Diet</h3> <p class="text-gray-600 mb-4">Learn how small changes in your diet can make a big difference in your fitness journey.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 2 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Workout routine" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">The Perfect Beginner's Workout</h3> <p class="text-gray-600 mb-4">Not sure where to start? This workout routine is designed for newcomers to the gym.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> <!-- Blog Post 3 --> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <img src="https://images.unsplash.com/photo-1594882645126-14020914d58d?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Success story" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Success Story: John's Transformation</h3> <p class="text-gray-600 mb-4">Read about how John lost 50 pounds and gained a new perspective on life at PowerZone.</p> <a href="#" class="text-indigo-600 font-semibold hover:underline">Read More</a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Contact Us</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Have questions? Get in touch with us. We're here to help!</p> </div> <div class="flex flex-col md:flex-row gap-12"> <div class="md:w-1/2"> <form id="contact-form" class="bg-gray-50 p-8 rounded-lg shadow-md"> <div class="mb-4"> <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> <input type="text" id="name" name="name" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required> </div> <div class="mb-4"> <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> <input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required> </div> <div class="mb-4"> <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> <input id="message" name="message" rows="5" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-600" required/> </div> <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md w-full font-semibold hover:bg-indigo-700 transition duration-300">Send Message</button> </form> <p id="form-message" class="mt-4 text-center"></p> </div> <div class="md:w-1/2"> <div class="aspect-w-16 aspect-h-9"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.763941490289!2d-77.0453026851869!3d-12.05941999146193!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c8c5c7d0b1b1%3A0x9d5f0b3b3b3b3b3b!2sPlaza%20San%20Mart%C3%ADn!5e0!3m2!1sen!2spe!4v1633020012345!5m2!1sen!2spe" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-md"></iframe> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-6 text-center"> <p>© 2024 PowerZone Fitness. All Rights Reserved.</p> <div class="flex justify-center space-x-4 mt-4"> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.012 3.584-.07 4.85c-.148 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.85s.012-3.584.07-4.85c.148-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.947s-.014-3.667-.072-4.947c-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a> <a href="#" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616v.064c0 2.298 1.634 4.212 3.791 4.649-.69.188-1.43.233-2.18.087.608 1.885 2.372 3.26 4.465 3.3-1.625 1.27-3.672 2.022-5.892 2.022-.382 0-.76-.022-1.13-.066 2.099 1.343 4.6 2.123 7.28 2.123 8.733 0 13.512-7.239 13.512-13.512 0-.206-.005-.412-.013-.617.928-.67 1.729-1.5 2.369-2.45z"/></svg></a> </div> </div> </footer> <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Form submission message const contactForm = document.getElementById('contact-form'); const formMessage = document.getElementById('form-message'); contactForm.addEventListener('submit', function(e) { e.preventDefault(); formMessage.textContent = 'Thank you for your message! We will get back to you soon.'; formMessage.classList.add('text-green-600'); contactForm.reset(); setTimeout(() => { formMessage.textContent = ''; formMessage.classList.remove('text-green-600'); }, 5000); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */