Modern gym website with class schedule, membership plans, and trainer profiles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IronFit Gym | Transform Your Life</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<a href="#" class="logo">IronFit<span>Gym</span></a>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#classes">Classes</a>
<a href="#trainers">Trainers</a>
<a href="#pricing">Pricing</a>
<a href="#contact">Contact</a>
</div>
<button class="mobile-menu"><i class="fas fa-bars"></i></button>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-overlay"></div>
<div class="container">
<div class="hero-content">
<div class="hero-badge">Join Today & Get 50% Off</div>
<h1>Transform Your <span>Body</span><br>Transform Your <span>Life</span></h1>
<p>State-of-the-art equipment, expert trainers, and a community that supports your fitness journey.</p>
<div class="hero-buttons">
<a href="#pricing" class="btn-primary">Start Free Trial <i class="fas fa-arrow-right"></i></a>
<a href="#classes" class="btn-secondary">View Classes <i class="fas fa-calendar-alt"></i></a>
</div>
<div class="hero-stats">
<div><strong>500+</strong> <span>Members</span></div>
<div><strong>20+</strong> <span>Classes Weekly</span></div>
<div><strong>10+</strong> <span>Expert Trainers</span></div>
</div>
</div>
</div>
</section>
<section id="classes" class="classes">
<div class="container">
<div class="section-header">
<span class="section-tag">Our Classes</span>
<h2>Find Your Perfect Workout</h2>
<p>From high-intensity training to relaxing yoga, we have something for everyone.</p>
</div>
<div class="classes-grid">
<div class="class-card">
<div class="class-icon">💪</div>
<h3>Strength Training</h3>
<p>Build muscle and increase power with our strength training classes. Perfect for all levels.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
<div class="class-card">
<div class="class-icon">🧘</div>
<h3>Yoga Flow</h3>
<p>Improve flexibility, reduce stress, and find your inner peace.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
<div class="class-card">
<div class="class-icon">🥊</div>
<h3>Boxing</h3>
<p>High-intensity cardio workout that builds stamina and relieves stress.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
<div class="class-card">
<div class="class-icon">🚴</div>
<h3>Spin Class</h3>
<p>Burn calories with energetic indoor cycling sessions.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
<div class="class-card">
<div class="class-icon">🏊</div>
<h3>Aqua Fitness</h3>
<p>Low-impact workout that's easy on joints but tough on calories.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
<div class="class-card">
<div class="class-icon">🎯</div>
<h3>HIIT</h3>
<p>Short bursts of intense exercise for maximum results in minimum time.</p>
<a href="#" class="class-link">Learn More →</a>
</div>
</div>
</div>
</section>
<section id="schedule" class="schedule">
<div class="container">
<div class="section-header">
<span class="section-tag">Weekly Schedule</span>
<h2>Class Timetable</h2>
<p>Check out our weekly class schedule and join the ones that fit your routine.</p>
</div>
<div class="schedule-table">
<div class="schedule-row header">
<div>Time</div>
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
</div>
<div class="schedule-row">
<div>6:00 AM</div>
<div>HIIT</div>
<div>Strength</div>
<div>HIIT</div>
<div>Strength</div>
<div>HIIT</div>
<div>Yoga</div>
</div>
<div class="schedule-row">
<div>9:00 AM</div>
<div>Yoga</div>
<div>Spin</div>
<div>Yoga</div>
<div>Spin</div>
<div>Yoga</div>
<div>HIIT</div>
</div>
<div class="schedule-row">
<div>12:00 PM</div>
<div>Boxing</div>
<div>Aqua</div>
<div>Boxing</div>
<div>Aqua</div>
<div>Boxing</div>
<div>Spin</div>
</div>
<div class="schedule-row">
<div>5:00 PM</div>
<div>Spin</div>
<div>HIIT</div>
<div>Spin</div>
<div>HIIT</div>
<div>Spin</div>
<div>Strength</div>
</div>
<div class="schedule-row">
<div>7:00 PM</div>
<div>Strength</div>
<div>Yoga</div>
<div>Strength</div>
<div>Yoga</div>
<div>Strength</div>
<div>Boxing</div>
</div>
</div>
</div>
</section>
<section id="trainers" class="trainers">
<div class="container">
<div class="section-header">
<span class="section-tag">Expert Trainers</span>
<h2>Meet Our Coaches</h2>
<p>Our certified trainers are here to help you reach your fitness goals.</p>
</div>
<div class="trainers-grid">
<div class="trainer-card">
<div class="trainer-image">👨</div>
<h3>Mike Johnson</h3>
<p>Head Strength Coach</p>
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">👩</div>
<h3>Sarah Williams</h3>
<p>Yoga & Mindfulness</p>
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">👨</div>
<h3>David Chen</h3>
<p>Boxing Specialist</p>
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">👩</div>
<h3>Lisa Rodriguez</h3>
<p>Spin Instructor</p>
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="pricing" class="pricing">
<div class="container">
<div class="section-header">
<span class="section-tag">Membership Plans</span>
<h2>Choose Your Plan</h2>
<p>Flexible memberships to fit your lifestyle and budget.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Basic</h3>
<div class="price">$29<span>/month</span></div>
<ul>
<li><i class="fas fa-check"></i> Gym Access</li>
<li><i class="fas fa-check"></i> Locker Room</li>
<li><i class="fas fa-check"></i> Mobile App</li>
<li><i class="fas fa-times"></i> Group Classes</li>
<li><i class="fas fa-times"></i> Personal Training</li>
</ul>
<a href="#" class="btn-secondary">Join Now</a>
</div>
<div class="pricing-card featured">
<div class="popular-badge">Most Popular</div>
<h3>Pro</h3>
<div class="price">$59<span>/month</span></div>
<ul>
<li><i class="fas fa-check"></i> Gym Access</li>
<li><i class="fas fa-check"></i> Locker Room</li>
<li><i class="fas fa-check"></i> Mobile App</li>
<li><i class="fas fa-check"></i> Group Classes</li>
<li><i class="fas fa-check"></i> Sauna Access</li>
</ul>
<a href="#" class="btn-primary">Join Now</a>
</div>
<div class="pricing-card">
<h3>Elite</h3>
<div class="price">$99<span>/month</span></div>
<ul>
<li><i class="fas fa-check"></i> Gym Access</li>
<li><i class="fas fa-check"></i> Locker Room</li>
<li><i class="fas fa-check"></i> Mobile App</li>
<li><i class="fas fa-check"></i> Group Classes</li>
<li><i class="fas fa-check"></i> Personal Training</li>
</ul>
<a href="#" class="btn-secondary">Join Now</a>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<h2>Visit Us Today</h2>
<p>Start your fitness journey with us. We're here to help you succeed.</p>
<div class="info-item">
<i class="fas fa-map-marker-alt"></i>
<div>123 Fitness Ave, Suite 100<br>Los Angeles, CA 90001</div>
</div>
<div class="info-item">
<i class="fas fa-phone"></i>
<div>(555) 123-4567</div>
</div>
<div class="info-item">
<i class="fas fa-envelope"></i>
<div>info@ironfitgym.com</div>
</div>
<div class="info-item">
<i class="fas fa-clock"></i>
<div>Mon-Fri: 5am - 11pm<br>Sat-Sun: 7am - 8pm</div>
</div>
</div>
<form class="contact-form" id="contactForm">
<h3>Send us a message</h3>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<input type="tel" placeholder="Phone Number">
<textarea rows="4" placeholder="Your Message..." required></textarea>
<button type="submit" class="btn-primary">Send Message <i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<p>© 2025 IronFit Gym. All rights reserved. Built with <i class="fas fa-heart"></i> by WordTune®</p>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>/* Fitness Gym Styles */
:root {
--primary: #e94560;
--primary-dark: #c7354e;
--secondary: #2d6a4f;
--dark: #1a1a2e;
--light: #f8f9fa;
--gray: #6c757d;
--white: #ffffff;
--border: #e9ecef;
--success: #28a745;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
line-height: 1.6;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
text-decoration: none;
color: var(--dark);
}
.logo span {
color: var(--primary);
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary);
}
.mobile-menu {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero */
.hero {
min-height: 100vh;
background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1600') center/cover fixed;
position: relative;
display: flex;
align-items: center;
text-align: center;
color: white;
padding-top: 80px;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.65);
}
.hero .container {
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-block;
background: var(--primary);
padding: 0.3rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.hero h1 span {
color: var(--primary);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 2rem;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 3rem;
}
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.8rem;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: var(--dark);
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.hero-stats strong {
font-size: 1.5rem;
color: var(--primary);
display: block;
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-tag {
display: inline-block;
background: rgba(233,69,96,0.1);
color: var(--primary);
padding: 0.3rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-header p {
color: var(--gray);
max-width: 600px;
margin: 0 auto;
}
/* Classes */
.classes {
padding: 5rem 0;
}
.classes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.class-card {
background: var(--white);
padding: 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s;
border: 1px solid var(--border);
}
.class-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.class-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.class-card h3 {
margin-bottom: 0.5rem;
}
.class-card p {
color: var(--gray);
margin-bottom: 1rem;
}
.class-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
/* Schedule */
.schedule {
padding: 5rem 0;
background: var(--light);
}
.schedule-table {
background: var(--white);
border-radius: 20px;
overflow-x: auto;
border: 1px solid var(--border);
}
.schedule-row {
display: grid;
grid-template-columns: 100px repeat(6, 1fr);
border-bottom: 1px solid var(--border);
}
.schedule-row:last-child {
border-bottom: none;
}
.schedule-row.header {
background: var(--primary);
color: white;
font-weight: 700;
}
.schedule-row div {
padding: 1rem;
text-align: center;
border-right: 1px solid var(--border);
}
.schedule-row div:last-child {
border-right: none;
}
.schedule-row.header div {
border-right: 1px solid rgba(255,255,255,0.2);
}
/* Trainers */
.trainers {
padding: 5rem 0;
}
.trainers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.trainer-card {
background: var(--white);
padding: 2rem;
text-align: center;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s;
border: 1px solid var(--border);
}
.trainer-card:hover {
transform: translateY(-5px);
}
.trainer-image {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.trainer-social {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}
.trainer-social a {
color: var(--gray);
transition: color 0.3s;
}
.trainer-social a:hover {
color: var(--primary);
}
/* Pricing */
.pricing {
padding: 5rem 0;
background: var(--light);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.pricing-card {
background: var(--white);
padding: 2rem;
border-radius: 20px;
text-align: center;
position: relative;
transition: all 0.3s;
border: 1px solid var(--border);
}
.pricing-card.featured {
transform: scale(1.02);
border: 2px solid var(--primary);
box-shadow: 0 10px 30px rgba(233,69,96,0.1);
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: white;
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.7rem;
}
.price {
font-size: 2.5rem;
font-weight: 800;
color: var(--primary);
margin: 1rem 0;
}
.price span {
font-size: 0.9rem;
font-weight: normal;
color: var(--gray);
}
.pricing-card ul {
list-style: none;
margin: 1.5rem 0;
text-align: left;
}
.pricing-card li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pricing-card li i {
width: 20px;
}
.pricing-card li .fa-check {
color: var(--success);
}
.pricing-card li .fa-times {
color: var(--gray);
}
/* Contact */
.contact {
padding: 5rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.contact-info h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.info-item {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
}
.info-item i {
width: 40px;
height: 40px;
background: rgba(233,69,96,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.2rem;
}
.contact-form {
background: var(--white);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
border: 1px solid var(--border);
}
.contact-form h3 {
margin-bottom: 1rem;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 1rem;
font-family: inherit;
}
.contact-form textarea {
resize: vertical;
}
/* Footer */
footer {
background: var(--dark);
color: #888;
text-align: center;
padding: 2rem;
margin-top: 3rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
color: #888;
font-size: 1.2rem;
transition: color 0.3s;
}
.social-links a:hover {
color: var(--primary);
}
footer i {
color: var(--primary);
}
/* Responsive */
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.mobile-menu {
display: block;
}
.hero h1 {
font-size: 2rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.section-header h2 {
font-size: 1.8rem;
}
.schedule-row {
font-size: 0.8rem;
}
.schedule-row div {
padding: 0.5rem;
}
.pricing-card.featured {
transform: none;
}
.footer-content {
flex-direction: column;
}
}// Fitness Gym JavaScript
// Mobile Menu Toggle
const mobileMenu = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');
if (mobileMenu) {
mobileMenu.addEventListener('click', () => {
navLinks.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
if (navLinks && navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
mobileMenu.classList.remove('active');
}
}
});
});
// Contact Form Handler
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('💪 Message sent! We will get back to you within 24 hours.');
contactForm.reset();
});
}
// Membership button handlers
document.querySelectorAll('.pricing-card .btn-primary, .pricing-card .btn-secondary').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
alert('🏋️ Membership signup! Checkout page would open here.');
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.class-card, .trainer-card, .pricing-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.5s ease';
observer.observe(el);
});
console.log('Fitness gym website ready!');