Website kits
Fitness studio membership page
Three monthly plans with prices and ticked inclusions, three class packs, a plainly worded freeze and cancellation policy and a free trial prompt.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
Written for the visitor who already likes the studio and now wants to know the cost and the catch. The three monthly plans come first, with the middle plan on a dark card because it is the one most members settle on, and each plan says who it suits before listing what is included. Class packs follow for people who travel or cannot commit to a month. The freeze and cancellation rules get a section of their own in plain sentences, because vague cancellation terms are the main reason people hesitate to join a gym. Replace the prices and plan names first, then rewrite the policy text so it matches your real membership agreement word for word. A tip for studios: if you charge a joining fee or have a minimum term, say so on this page, since the visitor will find out at the front desk anyway.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 22
- Container (grid, 3 columns) × 3
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 20
- Heading × 13
- Icon List × 3
- Button × 4
Things worth knowing
- Each plan’s ticked rows convert to an Icon List (three in total), so inclusions can be edited row by row.
- Plan names, pack names and the three policy titles are Headings. Each price, including the smaller “/ month”, arrives as one Text Editor so the amount and its unit stay on one line.
- The highlighted Unlimited card keeps its dark background as a Container setting, and all four calls to action are Button widgets.
- The plans, packs and policy columns stack to one column below 780px.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fitness studio membership page</title>
<style>
body{margin:0;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#111315;background:#ffffff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
h1,h2,h3{font-family:'Oswald','Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:60px;line-height:1.04;margin:0 0 18px;color:#ffffff}
h2{font-size:40px;line-height:1.1;margin:0 0 16px}
h3{font-size:24px;line-height:1.2;margin:0 0 8px}
p{font-size:16px;line-height:1.75;color:#5d6670;margin:0 0 16px}
.intro{background:#111315;padding:64px 0;text-align:center}
.intro p{color:#e8ebef;font-size:18px;max-width:680px;margin:0 auto}
.eyebrow{font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c8f135;margin:0 0 14px}
.head{max-width:700px;margin:0 0 34px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px 26px;border:1px solid #e8ebef;border-radius:6px;background:#ffffff}
.plan.featured{background:#111315;border-color:#111315}
.plan.featured h3{color:#ffffff}
.plan.featured p{color:#e8ebef}
.plan.featured .checks > div{color:#ffffff}
.price{font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:44px;line-height:1;color:#111315;margin:6px 0 14px}
.price small{font-family:'Roboto',Arial,Helvetica,sans-serif;font-size:15px;color:#5d6670}
.plan.featured .price{color:#c8f135}
.plan.featured .price small{color:#e8ebef}
.checks{display:flex;flex-direction:column;gap:12px;margin:6px 0 26px;flex-grow:1}
.checks > div{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.55;color:#111315}
.tick{color:#111315;background:#c8f135;font-size:13px;line-height:1;padding:5px 6px;border-radius:4px}
.button{display:inline-block;text-align:center;padding:15px 24px;border-radius:4px;text-decoration:none;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.volt{background:#c8f135;color:#111315}
.outline{border:2px solid #111315;color:#111315}
.tint{background:#e8ebef}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pack{padding:26px;border-radius:6px;background:#ffffff}
.pack .price{font-size:36px;margin:4px 0 12px}
.pack p{margin:0;font-size:15px}
.policy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.policy div{border-top:4px solid #c8f135;padding-top:18px}
.policy p{margin:0;font-size:15.5px}
.cta{background:#24282d;text-align:center}
.cta h2{color:#ffffff}
.cta p{color:#e8ebef;max-width:620px;margin:0 auto 26px}
@media(max-width:780px){section{padding:54px 0}.wrap{padding:0 16px}.intro{padding:46px 0}h1{font-size:40px}h2{font-size:29px}.plans,.packs,.policy{grid-template-columns:minmax(0,1fr);gap:20px}.price{font-size:38px}}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Membership</p>
<h1>Simple monthly plans, no joining fee</h1>
<p>All plans are month to month. Start with a free trial class, then choose the plan that matches how often you can realistically train.</p>
</div>
</section>
<section id="membership-options">
<div class="wrap">
<div class="plans">
<div class="plan">
<h3>Off-peak</h3>
<p class="price">$89 <small>/ month</small></p>
<p>For flexible schedules: unlimited classes that start between 9:00 am and 4:00 pm on weekdays, plus all weekend classes.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Unlimited off-peak and weekend classes</span></div>
<div><span class="tick">✓</span><span>Showers, towels and lockers</span></div>
<div><span class="tick">✓</span><span>Book seven days ahead in the app</span></div>
</div>
<a class="button outline" href="#free-trial">Start with a free trial</a>
</div>
<div class="plan featured">
<h3>Unlimited</h3>
<p class="price">$169 <small>/ month</small></p>
<p>Any class on the timetable, as often as you like. The plan most members end up on once training is a habit.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Unlimited classes at any time</span></div>
<div><span class="tick">✓</span><span>One 30-minute coach check-in every month</span></div>
<div><span class="tick">✓</span><span>Showers, towels and lockers</span></div>
<div><span class="tick">✓</span><span>Bring a friend free once a month</span></div>
</div>
<a class="button volt" href="#free-trial">Start with a free trial</a>
</div>
<div class="plan">
<h3>Two a week</h3>
<p class="price">$119 <small>/ month</small></p>
<p>Eight classes per calendar month, at any time. Unused classes do not roll over to the next month.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Eight classes a month at any time</span></div>
<div><span class="tick">✓</span><span>Showers, towels and lockers</span></div>
<div><span class="tick">✓</span><span>Extra classes at $18 each</span></div>
</div>
<a class="button outline" href="#free-trial">Start with a free trial</a>
</div>
</div>
</div>
</section>
<section class="tint">
<div class="wrap">
<div class="head">
<h2>Class packs</h2>
<p>Prefer not to commit to a monthly plan? Class packs work for any class on the timetable and do not renew automatically.</p>
</div>
<div class="packs">
<div class="pack"><h3>Drop-in</h3><p class="price">$28</p><p>One class, valid for 30 days. Good for visitors in town for a few days.</p></div>
<div class="pack"><h3>10-class pack</h3><p class="price">$230</p><p>Ten classes, valid for four months from the first class you book.</p></div>
<div class="pack"><h3>20-class pack</h3><p class="price">$420</p><p>Twenty classes, valid for six months. Can be shared with one named household member.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<h2>Freezing and cancelling</h2>
<p>The short version: no contracts, no cancellation fees, and the rules are the same for everyone.</p>
</div>
<div class="policy">
<div><h3>Freeze</h3><p>Pause any monthly plan for one to eight weeks per calendar year at no charge. Tell us by email or at the front desk at least three days before your next billing date.</p></div>
<div><h3>Cancel</h3><p>Give 30 days’ notice by email or at the desk. There is no fee. You keep full access until the end of the notice period, and your final payment covers it.</p></div>
<div><h3>Class packs</h3><p>Packs are not refundable once bought, but we will extend the expiry date once by 30 days if you ask before it runs out.</p></div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Not sure which plan fits?</h2>
<p>Book a free trial class first. After the session, the coach will go through the timetable with you and suggest a plan based on the days you can train.</p>
<a class="button volt" href="#free-trial">Book a free trial class</a>
</div>
</section>
</body>
</html>
