188 lines
20 KiB
HTML
188 lines
20 KiB
HTML
|
<!-- Navigation -->
|
||
|
|
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 60px;background:#18181b;border-bottom:2px solid #ef4444;">
|
||
|
|
<div style="font-size:26px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;letter-spacing:3px;">IRONFORGE</div>
|
||
|
|
<div style="display:flex;gap:32px;align-items:center;">
|
||
|
|
<a href="#classes" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Classes</a>
|
||
|
|
<a href="#trainers" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Trainers</a>
|
||
|
|
<a href="#pricing" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Pricing</a>
|
||
|
|
<a href="#join" style="display:inline-block;padding:10px 28px;background:#ef4444;color:#fafafa;font-size:13px;font-weight:700;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Join Now</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||
|
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(24,24,27,0.85);"></div>
|
||
|
|
<div style="position:relative;z-index:1;max-width:800px;padding:40px 20px;">
|
||
|
|
<p style="color:#ef4444;font-size:14px;font-weight:700;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:5px;">No Excuses. No Limits.</p>
|
||
|
|
<h1 style="color:#fafafa;font-size:60px;font-weight:800;margin-bottom:24px;font-family:Montserrat,sans-serif;line-height:1.1;text-transform:uppercase;letter-spacing:2px;">Transform Your Body. Transform Your Life.</h1>
|
||
|
|
<p style="color:#a1a1aa;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;max-width:600px;margin-left:auto;margin-right:auto;">Join the strongest community in town. World-class equipment, expert trainers, and classes designed to push you beyond your limits.</p>
|
||
|
|
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||
|
|
<a href="#join" style="display:inline-block;padding:16px 44px;background:#ef4444;color:#fafafa;font-size:15px;font-weight:700;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Start Free Trial</a>
|
||
|
|
<a href="#classes" style="display:inline-block;padding:16px 44px;background:transparent;color:#fafafa;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;border:2px solid rgba(250,250,250,0.3);">View Classes</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Classes -->
|
||
|
|
<section id="classes" style="padding:100px 20px;background:#27272a;">
|
||
|
|
<div style="max-width:1200px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:60px;">
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Our Programs</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Classes That Deliver Results</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||
|
|
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="HIIT class">
|
||
|
|
<div style="padding:24px;">
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">HIIT</h3>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">High-intensity interval training to torch calories and build explosive power. All fitness levels welcome.</p>
|
||
|
|
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Mon / Wed / Fri -- 6:00 AM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="Yoga class">
|
||
|
|
<div style="padding:24px;">
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Yoga</h3>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Build flexibility, balance, and mental clarity. From power flow to restorative sessions for total recovery.</p>
|
||
|
|
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Tue / Thu / Sat -- 7:30 AM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="Boxing class">
|
||
|
|
<div style="padding:24px;">
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Boxing</h3>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Learn technique, build endurance, and relieve stress. Heavy bag work, mitt drills, and cardio boxing rounds.</p>
|
||
|
|
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Mon / Wed / Fri -- 5:30 PM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="CrossFit class">
|
||
|
|
<div style="padding:24px;">
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">CrossFit</h3>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Functional movements at high intensity. Olympic lifts, gymnastics, and metabolic conditioning in every WOD.</p>
|
||
|
|
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Tue / Thu / Sat -- 6:00 PM</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Trainers -->
|
||
|
|
<section id="trainers" style="padding:100px 20px;background:#18181b;">
|
||
|
|
<div style="max-width:1100px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:60px;">
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Meet The Team</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Elite Trainers</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1567013127542-490d757e51fc?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer Marcus">
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Marcus Rivera</h3>
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Strength & Conditioning</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">NSCA-certified with 10+ years of experience. Former collegiate athlete specializing in powerlifting and functional training.</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer Sarah">
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Sarah Chen</h3>
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">HIIT & Boxing</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">ACE-certified group fitness instructor and amateur boxer. Known for her high-energy classes that push every member to their best.</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer James">
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">James Okonkwo</h3>
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">CrossFit & Yoga</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">CrossFit Level 2 trainer and RYT-200 yoga instructor. Blends intensity with mindfulness for balanced, sustainable fitness.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Pricing -->
|
||
|
|
<section id="pricing" style="padding:100px 20px;background:#27272a;">
|
||
|
|
<div style="max-width:1100px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:60px;">
|
||
|
|
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Membership Plans</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Choose Your Plan</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch;">
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:1px solid #3f3f46;">
|
||
|
|
<h3 style="font-size:18px;font-weight:700;color:#a1a1aa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Basic</h3>
|
||
|
|
<div style="margin-bottom:24px;">
|
||
|
|
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$29</span>
|
||
|
|
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:left;margin-bottom:32px;">
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Gym floor access</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Locker room & showers</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">2 classes per week</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Standard hours (6am - 9pm)</p>
|
||
|
|
</div>
|
||
|
|
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:transparent;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;border:2px solid #3f3f46;box-sizing:border-box;">Get Started</a>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:2px solid #ef4444;position:relative;">
|
||
|
|
<div style="position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#ef4444;color:#fafafa;font-size:12px;font-weight:700;padding:4px 20px;border-radius:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Most Popular</div>
|
||
|
|
<h3 style="font-size:18px;font-weight:700;color:#ef4444;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Pro</h3>
|
||
|
|
<div style="margin-bottom:24px;">
|
||
|
|
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$49</span>
|
||
|
|
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:left;margin-bottom:32px;">
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Full gym floor access</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Unlimited classes</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">1 personal training session/mo</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">24/7 access</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Nutrition consultation</p>
|
||
|
|
</div>
|
||
|
|
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:#ef4444;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;box-sizing:border-box;">Get Started</a>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:1px solid #3f3f46;">
|
||
|
|
<h3 style="font-size:18px;font-weight:700;color:#a1a1aa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Elite</h3>
|
||
|
|
<div style="margin-bottom:24px;">
|
||
|
|
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$79</span>
|
||
|
|
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:left;margin-bottom:32px;">
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Everything in Pro</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">4 personal training sessions/mo</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Custom meal plans</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Recovery room & sauna</p>
|
||
|
|
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Guest passes (2/mo)</p>
|
||
|
|
</div>
|
||
|
|
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:transparent;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;border:2px solid #3f3f46;box-sizing:border-box;">Get Started</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- CTA Banner -->
|
||
|
|
<section id="join" style="padding:80px 20px;background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);text-align:center;">
|
||
|
|
<div style="max-width:700px;margin:0 auto;">
|
||
|
|
<h2 style="font-size:44px;font-weight:800;color:#fafafa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Ready to Start?</h2>
|
||
|
|
<p style="color:rgba(250,250,250,0.85);font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">Your first week is on us. No contracts, no hidden fees. Just results.</p>
|
||
|
|
<a href="#" style="display:inline-block;padding:16px 48px;background:#18181b;color:#fafafa;font-size:15px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Join IRONFORGE Today</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer style="padding:48px 20px;background:#18181b;border-top:2px solid #ef4444;">
|
||
|
|
<div style="max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;">
|
||
|
|
<div style="min-width:200px;">
|
||
|
|
<div style="font-size:22px;font-weight:800;color:#fafafa;margin-bottom:12px;font-family:Montserrat,sans-serif;letter-spacing:3px;">IRONFORGE</div>
|
||
|
|
<p style="color:#71717a;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">Forged in sweat. Built on discipline.</p>
|
||
|
|
</div>
|
||
|
|
<div style="min-width:200px;">
|
||
|
|
<h4 style="color:#fafafa;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Hours</h4>
|
||
|
|
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Mon - Fri: 5:00 AM - 11:00 PM</p>
|
||
|
|
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Sat - Sun: 7:00 AM - 9:00 PM</p>
|
||
|
|
</div>
|
||
|
|
<div style="min-width:200px;">
|
||
|
|
<h4 style="color:#fafafa;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Location</h4>
|
||
|
|
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">850 Iron Street, Unit 4</p>
|
||
|
|
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Denver, CO 80202</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="max-width:1100px;margin:32px auto 0;padding-top:24px;border-top:1px solid #27272a;text-align:center;">
|
||
|
|
<p style="color:#52525b;font-size:13px;font-family:Inter,sans-serif;">© 2026 IRONFORGE Fitness. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|