IRONFORGE Gym.

Description

IRONFORGE is a high-energy landing page for a fictional Jakarta gym. Oversized “Forge Your Legend” type sits over a dark, red-lit hero with animated stats, then the page runs through programs, features, trainers, pricing tiers, a weekly schedule, and testimonials. The copy is in Indonesian.

Background

This is an entry in my “One Day One Code” series of small, focused daily builds. The goal here was a loud, aggressive gym identity, using oversized condensed type, clip-path angles, and a red-lit dark palette to push a different energy from my other landing pages.

Goal

Build a self-contained, high-energy gym landing page in a day that sells memberships, covering programs, trainers, pricing, and schedule, while keeping the visual language bold and motion-driven and shipping without any framework.

Features

• “Forge Your Legend” hero with a barbell illustration and an animated stat row (1061+ members, 7+ trainers, 15+ classes, 3+ years).
• Programs, features, and trainers sections for training tracks, facilities, and the coaching team.
• Three membership pricing tiers (Starter, Elite, Legend).
• Weekly class schedule.
• Member testimonials.
• A 7-day free-trial call-to-action.
• Angular clip-path styling and count-up stat animations.

Technologies

• HTML (single self-contained file)
• Inline CSS with angular clip-path styling
• Vanilla JavaScript for count-up stats
• Bebas Neue, Barlow Condensed, and Inter via Google Fonts

How to Run

Clone the one-day-one-code repository and open 11. fitness-gym/index.html directly in a browser; it is a self-contained single file. You can also serve the folder with a static server such as python3 -m http.server 8000. A live version is deployed at the demo URL above.

Technical Decisions

Everything lives in one index.html with inline CSS and vanilla JavaScript, no framework and no build step. The aggressive look comes from oversized condensed type (Bebas Neue and Barlow Condensed) and angular clip-path shapes, while the only scripting drives the count-up stats. Google Fonts load from a CDN with system-font fallbacks so it degrades gracefully offline.

What I Learned

Chasing a loud, high-energy tone taught me how much condensed display type and angular geometry shape a brand’s feel before any copy is read. Laying out clear pricing tiers and a weekly schedule also gave me useful practice presenting comparison-heavy content in a way that stays scannable.

Notes

Part of the shared one-day-one-code repository. A preview image is included with the project. This is a small daily build rather than a full production site.