Pages Easy
Coworking — Membership Pricing
A warm-industrial membership pricing page for a fictional coworking space, built with plain HTML, CSS and vanilla JavaScript. Four plan cards — day pass, flex, dedicated and team studio — sit above a full feature-comparison table, an FAQ accordion and a closing tour CTA. A monthly-or-annual toggle animates every price with the 20 percent saving, comparison columns highlight on hover or pin on click, and toasts confirm each action. Responsive down to 360px.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--concrete: #efeae3;
--concrete-d: #e2dcd2;
--amber: #e8902b;
--amber-d: #cc7918;
--amber-50: #fdf1e2;
--char: #1c1b19;
--ink: #26241f;
--ink-2: #4a463e;
--muted: #7b766c;
--bg: #f6f3ee;
--surface: #ffffff;
--plant: #5f7a52;
--line: rgba(28, 27, 25, 0.1);
--line-2: rgba(28, 27, 25, 0.18);
--ok: #2f9e6f;
--warn: #d98a2b;
--danger: #d4503e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow: 0 1px 2px rgba(28, 27, 25, 0.04), 0 8px 24px rgba(28, 27, 25, 0.06);
--shadow-lg: 0 12px 40px rgba(28, 27, 25, 0.14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, p { margin: 0; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.page {
max-width: 1120px;
margin: 0 auto;
padding: 0 20px 64px;
}
/* ---- Buttons ---- */
.btn {
font: inherit;
font-weight: 600;
border-radius: var(--r-sm);
padding: 11px 18px;
cursor: pointer;
border: 1px solid transparent;
transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 2px solid var(--amber-d);
outline-offset: 2px;
}
.btn--solid {
background: var(--char);
color: var(--concrete);
}
.btn--solid:hover { background: #000; box-shadow: var(--shadow); }
.btn--ghost {
background: var(--surface);
color: var(--ink);
border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--char); background: var(--concrete); }
/* ---- Masthead ---- */
.masthead {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 0 28px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
width: 40px; height: 40px;
display: grid; place-items: center;
background: var(--char);
color: var(--amber);
border-radius: var(--r-sm);
font-size: 20px;
}
.brand__name { font-weight: 800; letter-spacing: -.01em; }
.brand__loc { font-size: 12px; color: var(--muted); }
.masthead__nav {
margin-left: auto;
display: flex;
gap: 24px;
}
.masthead__nav a {
color: var(--ink-2);
text-decoration: none;
font-weight: 500;
font-size: 15px;
transition: color .15s ease;
}
.masthead__nav a:hover { color: var(--char); }
/* ---- Hero ---- */
.hero { text-align: center; padding: 24px 0 40px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--amber-50);
color: var(--amber-d);
border: 1px solid rgba(232, 144, 43, .35);
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
}
.eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(47, 158, 111, .2);
}
.hero h1 {
font-size: clamp(28px, 5vw, 46px);
font-weight: 800;
letter-spacing: -.025em;
margin: 18px auto 0;
max-width: 14ch;
color: var(--char);
}
.hero__sub {
color: var(--ink-2);
max-width: 52ch;
margin: 14px auto 0;
font-size: 16px;
}
.billing {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 28px;
}
.billing__label {
font-weight: 600;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .15s ease;
}
.billing__label.is-active { color: var(--char); }
.save-pill {
background: var(--plant);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
letter-spacing: .02em;
}
.toggle {
width: 56px; height: 30px;
border-radius: 999px;
border: 1px solid var(--line-2);
background: var(--concrete-d);
position: relative;
cursor: pointer;
padding: 0;
transition: background .2s ease;
}
.toggle[aria-checked="true"] { background: var(--char); }
.toggle__knob {
position: absolute;
top: 3px; left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
transition: transform .2s ease;
}
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(26px); }
.toggle:focus-visible { outline: 2px solid var(--amber-d); outline-offset: 2px; }
/* ---- Plans ---- */
.plans {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 8px;
}
.plan {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px;
display: flex;
flex-direction: column;
position: relative;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: var(--line-2);
}
.plan--featured {
border-color: var(--char);
box-shadow: var(--shadow-lg);
}
.plan--featured::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r-lg);
border: 1px solid var(--char);
pointer-events: none;
}
.plan__badge {
position: absolute;
top: -11px; left: 22px;
background: var(--amber);
color: var(--char);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
padding: 4px 10px;
border-radius: 999px;
}
.plan__name { font-size: 19px; font-weight: 800; color: var(--char); }
.plan__tag { font-size: 13px; color: var(--muted); margin-top: 3px; min-height: 34px; }
.plan__price {
display: flex;
align-items: baseline;
gap: 2px;
margin-top: 6px;
color: var(--char);
}
.plan__cur { font-size: 20px; font-weight: 700; }
.plan__amount {
font-size: 40px;
font-weight: 800;
letter-spacing: -.03em;
line-height: 1;
}
.plan__per { font-size: 14px; color: var(--muted); margin-left: 4px; font-weight: 500; }
.plan__note { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 18px; }
.plan__cta { margin-top: 16px; width: 100%; }
.plan__feats {
list-style: none;
margin: 18px 0 0;
padding: 18px 0 0;
border-top: 1px solid var(--line);
display: grid;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
}
.plan__feats li {
position: relative;
padding-left: 24px;
}
.plan__feats li::before {
content: "✓";
position: absolute;
left: 0; top: -1px;
color: var(--plant);
font-weight: 800;
}
/* ---- Compare ---- */
.compare { margin-top: 56px; }
.compare__intro { text-align: center; margin-bottom: 22px; }
.compare__intro h2,
.faq h2,
.cta h2 {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 800;
letter-spacing: -.02em;
color: var(--char);
}
.compare__intro p { color: var(--ink-2); margin-top: 8px; }
.compare__scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.ctable {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
.ctable th, .ctable td {
padding: 14px 16px;
text-align: center;
font-size: 14px;
border-bottom: 1px solid var(--line);
}
.ctable thead th { background: var(--concrete); position: sticky; top: 0; }
.ctable__feat, .ctable tbody th[scope="row"] {
text-align: left;
font-weight: 600;
color: var(--char);
}
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable td { color: var(--ink-2); }
.ctable td.yes { color: var(--plant); font-weight: 700; }
.colbtn {
font: inherit;
font-weight: 700;
color: var(--char);
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--r-sm);
}
.colbtn:hover { background: var(--amber-50); }
.colbtn:focus-visible { outline: 2px solid var(--amber-d); outline-offset: 2px; }
.ctable [data-col].is-hl { background: var(--amber-50); }
.ctable thead [data-col].is-hl { background: #f9e4c8; }
/* ---- FAQ ---- */
.faq { margin-top: 56px; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.faq__list { list-style: none; padding: 0; margin: 24px 0 0; text-align: left; display: grid; gap: 12px; }
.faq__item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color .15s ease;
}
.faq__item.is-open { border-color: var(--line-2); box-shadow: var(--shadow); }
.faq__q {
width: 100%;
font: inherit;
font-weight: 600;
color: var(--char);
background: none;
border: none;
cursor: pointer;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
}
.faq__q:focus-visible { outline: 2px solid var(--amber-d); outline-offset: -2px; }
.faq__icn {
flex: 0 0 auto;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--concrete);
color: var(--amber-d);
font-size: 18px;
font-weight: 700;
transition: transform .2s ease, background .2s ease;
}
.faq__item.is-open .faq__icn { transform: rotate(45deg); background: var(--amber); color: var(--char); }
.faq__a {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.faq__a p {
padding: 0 20px 18px;
color: var(--ink-2);
font-size: 14.5px;
}
/* ---- CTA ---- */
.cta { margin-top: 56px; }
.cta__inner {
background:
radial-gradient(120% 140% at 100% 0%, rgba(232,144,43,.18), transparent 55%),
var(--char);
color: var(--concrete);
border-radius: var(--r-lg);
padding: 44px 32px;
text-align: center;
}
.cta h2 { color: var(--concrete); }
.cta__inner p { color: rgba(239,234,227,.75); margin: 10px auto 0; max-width: 46ch; }
.cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.cta__ghost { background: transparent; color: var(--concrete); border-color: rgba(239,234,227,.35); }
.cta__ghost:hover { background: rgba(239,234,227,.1); border-color: var(--concrete); }
/* ---- Footer ---- */
.footer { text-align: center; margin-top: 40px; color: var(--muted); font-size: 13px; }
/* ---- Toast ---- */
.toast {
position: fixed;
left: 50%; bottom: 28px;
transform: translate(-50%, 20px);
background: var(--char);
color: var(--concrete);
padding: 12px 20px;
border-radius: var(--r-sm);
font-size: 14px;
font-weight: 500;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 50;
max-width: calc(100vw - 40px);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* ---- Responsive ---- */
@media (max-width: 920px) {
.plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.masthead__nav { display: none; }
}
@media (max-width: 520px) {
.page { padding: 0 14px 48px; }
.plans { grid-template-columns: 1fr; }
.plan__tag { min-height: 0; }
.billing { gap: 10px; flex-wrap: wrap; justify-content: center; }
.cta__inner { padding: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-on");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-on");
}, 2400);
}
/* ---------- Billing toggle ---------- */
var toggle = document.getElementById("billingToggle");
var labels = document.querySelectorAll(".billing__label");
var amounts = document.querySelectorAll(".plan__amount");
var notes = document.querySelectorAll("[data-note]");
var annual = true; // page loads on annual to surface the saving
function fmt(n) {
return Number(n).toLocaleString("en-US");
}
function animateValue(el, to) {
var from = parseInt(el.textContent.replace(/[^0-9]/g, ""), 10) || 0;
if (from === to) { el.textContent = fmt(to); return; }
var start = performance.now();
var dur = 380;
function step(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var val = Math.round(from + (to - from) * eased);
el.textContent = fmt(val);
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
function applyBilling() {
toggle.setAttribute("aria-checked", String(annual));
toggle.setAttribute(
"aria-label",
annual ? "Switch to monthly billing" : "Switch to annual billing"
);
labels.forEach(function (l) {
var on = l.getAttribute("data-period") === (annual ? "annual" : "monthly");
l.classList.toggle("is-active", on);
});
amounts.forEach(function (a) {
var to = parseInt(a.getAttribute(annual ? "data-annual" : "data-monthly"), 10);
animateValue(a, to);
});
notes.forEach(function (n) {
var keep = n.textContent.indexOf("Pay as") === 0 || n.textContent.indexOf("From") === 0;
if (keep) return;
n.textContent = annual ? "Billed annually" : "Billed monthly";
});
}
toggle.addEventListener("click", function () {
annual = !annual;
applyBilling();
toast(annual ? "Annual billing — saving 20%" : "Switched to monthly billing");
});
applyBilling();
/* ---------- Plan CTAs ---------- */
document.querySelectorAll("[data-buy]").forEach(function (btn) {
btn.addEventListener("click", function () {
var plan = btn.getAttribute("data-buy");
var period = annual ? "annual" : "monthly";
if (plan === "Team Studio" || plan === "Day Pass") {
toast(
plan === "Day Pass"
? "Day pass reserved — see you at the front desk!"
: "Team Studio enquiry sent — we'll be in touch."
);
} else {
toast(plan + " selected · " + period + " billing");
}
});
});
/* ---------- Compare column highlight ---------- */
var table = document.querySelector(".ctable");
function setHighlight(col) {
table.querySelectorAll("[data-col]").forEach(function (cell) {
cell.classList.toggle("is-hl", cell.getAttribute("data-col") === col);
});
}
function clearHighlight() {
table.querySelectorAll(".is-hl").forEach(function (c) {
c.classList.remove("is-hl");
});
}
var pinned = null;
table.querySelectorAll("thead th[data-col]").forEach(function (th) {
var col = th.getAttribute("data-col");
th.addEventListener("mouseenter", function () {
if (!pinned) setHighlight(col);
});
th.addEventListener("mouseleave", function () {
if (!pinned) clearHighlight();
});
var btn = th.querySelector(".colbtn");
if (btn) {
btn.addEventListener("click", function () {
if (pinned === col) {
pinned = null;
clearHighlight();
toast("Highlight cleared");
} else {
pinned = col;
setHighlight(col);
toast("Highlighting " + btn.textContent.trim());
}
});
}
});
/* ---------- FAQ accordion ---------- */
var faqItems = document.querySelectorAll(".faq__item");
faqItems.forEach(function (item) {
var q = item.querySelector(".faq__q");
var a = item.querySelector(".faq__a");
q.addEventListener("click", function () {
var open = item.classList.contains("is-open");
// close others
faqItems.forEach(function (other) {
if (other !== item) {
other.classList.remove("is-open");
other.querySelector(".faq__q").setAttribute("aria-expanded", "false");
other.querySelector(".faq__a").style.maxHeight = null;
}
});
if (open) {
item.classList.remove("is-open");
q.setAttribute("aria-expanded", "false");
a.style.maxHeight = null;
} else {
item.classList.add("is-open");
q.setAttribute("aria-expanded", "true");
a.style.maxHeight = a.scrollHeight + "px";
}
});
});
/* ---------- Tour / call buttons ---------- */
["tourBtn", "ctaTour"].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.addEventListener("click", function () {
toast("Tour request sent — pick a time from the email we just mailed.");
});
});
var call = document.getElementById("ctaCall");
if (call) call.addEventListener("click", function () {
toast("We'll call you back within one business day.");
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Looms Coworking — Membership Pricing</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page">
<header class="masthead">
<div class="brand">
<span class="brand__mark" aria-hidden="true">◧</span>
<div>
<p class="brand__name">Looms Coworking</p>
<p class="brand__loc">Warehouse District · Floor 2</p>
</div>
</div>
<nav class="masthead__nav" aria-label="Primary">
<a href="#plans">Plans</a>
<a href="#compare">Compare</a>
<a href="#faq">FAQ</a>
</nav>
<button class="btn btn--ghost" id="tourBtn" type="button">Book a tour</button>
</header>
<section class="hero">
<span class="eyebrow"><span class="dot" aria-hidden="true"></span> 4 spots open this month</span>
<h1>Pick a membership that fits how you work.</h1>
<p class="hero__sub">Hot desks, dedicated stations, and private team studios in a daylit
warehouse. No setup fees, cancel anytime, first day free.</p>
<div class="billing" role="group" aria-label="Billing period">
<span class="billing__label" data-period="monthly">Monthly</span>
<button class="toggle" id="billingToggle" type="button" role="switch"
aria-checked="false" aria-label="Switch to annual billing">
<span class="toggle__knob" aria-hidden="true"></span>
</button>
<span class="billing__label is-active" data-period="annual">
Annual <span class="save-pill">Save 20%</span>
</span>
</div>
</section>
<section class="plans" id="plans" aria-label="Membership plans">
<article class="plan" data-plan="day">
<header class="plan__head">
<h2 class="plan__name">Day Pass</h2>
<p class="plan__tag">Drop in when you need a desk</p>
</header>
<p class="plan__price">
<span class="plan__cur">$</span><span class="plan__amount" data-monthly="29" data-annual="24">29</span>
<span class="plan__per">/ day</span>
</p>
<p class="plan__note" data-note>Pay as you go · no commitment</p>
<button class="btn btn--ghost plan__cta" type="button" data-buy="Day Pass">Get a day pass</button>
<ul class="plan__feats">
<li>1 open hot desk for the day</li>
<li>Fast wifi & printing credits</li>
<li>Café & phone booths</li>
<li>9am–6pm access</li>
</ul>
</article>
<article class="plan" data-plan="flex">
<header class="plan__head">
<h2 class="plan__name">Flex</h2>
<p class="plan__tag">Any open desk, your hours</p>
</header>
<p class="plan__price">
<span class="plan__cur">$</span><span class="plan__amount" data-monthly="189" data-annual="151">189</span>
<span class="plan__per">/ mo</span>
</p>
<p class="plan__note" data-note>Billed monthly</p>
<button class="btn btn--ghost plan__cta" type="button" data-buy="Flex">Choose Flex</button>
<ul class="plan__feats">
<li>Unlimited hot-desk access</li>
<li>10 meeting-room credits / mo</li>
<li>24/7 keycard entry</li>
<li>Mail handling & locker</li>
</ul>
</article>
<article class="plan plan--featured" data-plan="dedicated">
<span class="plan__badge">Most popular</span>
<header class="plan__head">
<h2 class="plan__name">Dedicated</h2>
<p class="plan__tag">Your own desk, always ready</p>
</header>
<p class="plan__price">
<span class="plan__cur">$</span><span class="plan__amount" data-monthly="329" data-annual="263">329</span>
<span class="plan__per">/ mo</span>
</p>
<p class="plan__note" data-note>Billed monthly</p>
<button class="btn btn--solid plan__cta" type="button" data-buy="Dedicated">Choose Dedicated</button>
<ul class="plan__feats">
<li>Reserved standing desk + storage</li>
<li>30 meeting-room credits / mo</li>
<li>24/7 access + 2 guest passes</li>
<li>Mail, locker & monitor arm</li>
</ul>
</article>
<article class="plan" data-plan="team">
<header class="plan__head">
<h2 class="plan__name">Team Studio</h2>
<p class="plan__tag">Private room for your crew</p>
</header>
<p class="plan__price">
<span class="plan__cur">$</span><span class="plan__amount" data-monthly="1290" data-annual="1032">1290</span>
<span class="plan__per">/ mo</span>
</p>
<p class="plan__note" data-note>From · seats 4–6</p>
<button class="btn btn--ghost plan__cta" type="button" data-buy="Team Studio">Talk to us</button>
<ul class="plan__feats">
<li>Lockable private studio</li>
<li>Unlimited room credits</li>
<li>Custom signage & branding</li>
<li>Dedicated account manager</li>
</ul>
</article>
</section>
<section class="compare" id="compare" aria-labelledby="compareHead">
<div class="compare__intro">
<h2 id="compareHead">Compare every plan</h2>
<p>Hover a column to highlight what's included. Annual pricing applies the same 20% saving.</p>
</div>
<div class="compare__scroll">
<table class="ctable">
<caption class="sr-only">Feature comparison across membership plans</caption>
<thead>
<tr>
<th scope="col" class="ctable__feat">Feature</th>
<th scope="col" data-col="day"><button type="button" class="colbtn">Day Pass</button></th>
<th scope="col" data-col="flex"><button type="button" class="colbtn">Flex</button></th>
<th scope="col" data-col="dedicated"><button type="button" class="colbtn">Dedicated</button></th>
<th scope="col" data-col="team"><button type="button" class="colbtn">Team Studio</button></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Desk type</th>
<td data-col="day">Hot desk</td>
<td data-col="flex">Any hot desk</td>
<td data-col="dedicated">Reserved</td>
<td data-col="team">Private studio</td>
</tr>
<tr>
<th scope="row">Access hours</th>
<td data-col="day">9–6</td>
<td data-col="flex" class="yes">24/7</td>
<td data-col="dedicated" class="yes">24/7</td>
<td data-col="team" class="yes">24/7</td>
</tr>
<tr>
<th scope="row">Meeting-room credits</th>
<td data-col="day">—</td>
<td data-col="flex">10 / mo</td>
<td data-col="dedicated">30 / mo</td>
<td data-col="team" class="yes">Unlimited</td>
</tr>
<tr>
<th scope="row">Guest passes</th>
<td data-col="day">—</td>
<td data-col="flex">1 / mo</td>
<td data-col="dedicated">2 / mo</td>
<td data-col="team" class="yes">Unlimited</td>
</tr>
<tr>
<th scope="row">Locker & mail</th>
<td data-col="day">—</td>
<td data-col="flex" class="yes">✓</td>
<td data-col="dedicated" class="yes">✓</td>
<td data-col="team" class="yes">✓</td>
</tr>
<tr>
<th scope="row">Private & lockable</th>
<td data-col="day">—</td>
<td data-col="flex">—</td>
<td data-col="dedicated">—</td>
<td data-col="team" class="yes">✓</td>
</tr>
<tr>
<th scope="row">Account manager</th>
<td data-col="day">—</td>
<td data-col="flex">—</td>
<td data-col="dedicated">—</td>
<td data-col="team" class="yes">✓</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="faq" id="faq" aria-labelledby="faqHead">
<h2 id="faqHead">Questions, answered</h2>
<ul class="faq__list">
<li class="faq__item">
<button class="faq__q" type="button" aria-expanded="false">
Can I switch or cancel my plan?
<span class="faq__icn" aria-hidden="true">+</span>
</button>
<div class="faq__a"><p>Yes — upgrade, downgrade, or cancel anytime from your member
portal. Changes apply at your next billing cycle and there are no exit fees.</p></div>
</li>
<li class="faq__item">
<button class="faq__q" type="button" aria-expanded="false">
What does annual billing actually save?
<span class="faq__icn" aria-hidden="true">+</span>
</button>
<div class="faq__a"><p>Paying yearly drops every plan by 20% versus the month-to-month
rate. The toggle above updates each price so you can see it before you commit.</p></div>
</li>
<li class="faq__item">
<button class="faq__q" type="button" aria-expanded="false">
Are meeting rooms really included?
<span class="faq__icn" aria-hidden="true">+</span>
</button>
<div class="faq__a"><p>Each plan ships with monthly room credits (one credit = one hour).
Extra hours are billed at $12/hr, and Team Studio members book rooms with no cap.</p></div>
</li>
<li class="faq__item">
<button class="faq__q" type="button" aria-expanded="false">
Do you offer a trial?
<span class="faq__icn" aria-hidden="true">+</span>
</button>
<div class="faq__a"><p>Your first day is on us — grab a free day pass at the front desk,
tour the floor, and meet a few members before deciding.</p></div>
</li>
</ul>
</section>
<section class="cta">
<div class="cta__inner">
<h2>Still weighing it up?</h2>
<p>Book a 15-minute walkthrough of the warehouse floor and we'll help you find the right desk.</p>
<div class="cta__actions">
<button class="btn btn--solid" id="ctaTour" type="button">Book a tour</button>
<button class="btn btn--ghost cta__ghost" id="ctaCall" type="button">Talk to the team</button>
</div>
</div>
</section>
<footer class="footer">
<p>© Looms Coworking · 18 Foundry Lane · A fictional space.</p>
</footer>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Membership Pricing
A self-contained pricing page for Looms Coworking, styled in the warm-industrial palette — concrete neutrals, an amber accent, and a plant-green tick for included features. The hero leads with a live availability pill and a monthly/annual billing switch, followed by four plan cards (Day Pass, Flex, Dedicated, Team Studio) with the Dedicated tier flagged as most popular.
The interactions are real. Flicking the billing toggle eases every price up or down with a count animation, swaps the active label, and surfaces the 20% annual saving; plan buttons and the tour CTAs fire confirmation toasts. Below the cards, a full comparison table lets you hover a column to highlight what’s included or click its header to pin the highlight in place.
The FAQ is a single-open accordion with animated height and a rotating plus icon, every control is keyboard-focusable with visible focus rings, and the four-column grid collapses to two columns and then a single column down to 360px.
Illustrative UI only — fictional coworking space, not a real booking system.