Nocturne Gallery
A contemporary gallery page with a pinned white-cube hero, a horizontal hanging reel, and a collector viewing form.
Wellness Studio
A calm yoga and breathwork studio page with a weekly schedule, teachers, and a trial class form.
Use this free Halo page as a starting point for a yoga, pilates, or wellness studio. The layout is a single HTML file with CSS variables for color, a class list, and a demo trial form you can connect later.
What's included
- Sticky navigation with a mobile menu
- Hero with a CSS studio placeholder
- Weekly class cards and teacher notes
- Address and desk hours
- Accessible trial form that does not pretend to book a class
Responsive support
This template is built as a full page and adapts to desktop, tablet, and mobile widths. Use the live preview to check each viewport before you copy the code.
Template source
Copy the HTML below into your project. A short README in the template folder explains colors, content, and placeholder visuals.
<!--
Halo — Wellness studio landing page
See README.md in this folder for usage, colors, content, and placeholder visuals.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halo — Neighborhood wellness studio</title>
<meta name="description" content="Halo is a small yoga and breathwork studio. Class schedule, teachers, and a trial class form in one HTML file.">
<style>
:root {
--bg: #f3f6f1;
--ink: #1c2a22;
--muted: #4f6156;
--card: #fff;
--line: #d5e0d4;
--accent: #2f6f55;
--accent-dark: #1f4d3b;
--sun: #e7c27a;
--radius: 18px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--ui); line-height: 1.55; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -40px; background: var(--ink); color: #fff; padding: 0.5rem 0.75rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.wrap { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(243,246,241,0.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1rem; }
.logo { text-decoration: none; font-family: var(--font); font-size: 1.4rem; }
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-toggle { display: none; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 0.45rem 0.7rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0.8rem 1.2rem; text-decoration: none; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--ink); }
.hero { padding: 4.2rem 0 3rem; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.2rem; align-items: center; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.76rem; margin: 0 0 0.8rem; }
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.sun { min-height: 240px; border-radius: 50% 50% 18px 18px; background: radial-gradient(circle at 50% 40%, var(--sun), var(--accent) 70%); border: 1px solid var(--line); }
section { padding: 3.2rem 0; }
.grid-3, .grid-2 { display: grid; gap: 1rem; margin-top: 1.4rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.time { color: var(--accent); font-weight: 700; }
form { display: grid; gap: 0.85rem; }
label { font-weight: 600; font-size: 0.92rem; }
input, select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 0.9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.form-status { min-height: 1.4em; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); padding: 2.2rem 0; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.5rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
.hero, .grid-3, .grid-2, .footer-grid, .form-row { grid-template-columns: 1fr; }
.nav-toggle { display: inline-flex; }
.nav-links { display: none; position: absolute; left: 1rem; right: 1rem; top: 74px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; flex-direction: column; align-items: flex-start; }
.nav-links.is-open { display: flex; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="wrap nav">
<a class="logo" href="#top">Halo</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="nav-links" aria-label="Primary">
<a href="#schedule">Schedule</a>
<a href="#teachers">Teachers</a>
<a href="#visit">Visit</a>
<a class="btn btn-primary" href="#trial">Try a class</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<div>
<p class="eyebrow">Yoga · breathwork · Portland</p>
<h1>A quiet room, a short class list, no app required.</h1>
<p class="lede">Halo is a neighborhood studio. Mats are provided. Shoes stay at the door. This free page is a starting point you can restyle.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#schedule">This week’s classes</a>
<a class="btn btn-ghost" href="#trial">Book a trial</a>
</div>
</div>
<div class="sun" role="img" aria-label="Placeholder for a studio photograph."></div>
</section>
<section class="wrap" id="schedule" aria-labelledby="schedule-heading">
<h2 id="schedule-heading">This week</h2>
<p class="lede">Replace these sessions with your real timetable or a booking embed.</p>
<div class="grid-3">
<article class="card"><p class="time">Tue 07:00</p><h3>Morning slow</h3><p>45 minutes. Floor work and breath. Beginners welcome.</p></article>
<article class="card"><p class="time">Thu 18:30</p><h3>After work</h3><p>60 minutes. Standing sequence, then a long savasana.</p></article>
<article class="card"><p class="time">Sat 10:00</p><h3>Weekend reset</h3><p>75 minutes. The only class that uses music.</p></article>
</div>
</section>
<section class="wrap" id="teachers" aria-labelledby="teachers-heading">
<h2 id="teachers-heading">Teachers</h2>
<div class="grid-2">
<article class="panel"><h3>Sora Nguyen</h3><p>Owns the room. Trains people to leave their phones in the cubby without a speech.</p></article>
<article class="panel"><h3>Eli Park</h3><p>Breathwork on Thursday. Used to run, now teaches people how to stop.</p></article>
</div>
</section>
<section class="wrap" id="visit" aria-labelledby="visit-heading">
<h2 id="visit-heading">Find Halo</h2>
<div class="grid-2">
<article class="panel"><h3>Studio</h3><p>14 Fern Street<br>Portland, OR 97214</p><p>Second floor. Elevator in the alley.</p></article>
<article class="panel"><h3>Hours</h3><p>Classes as listed. Desk open 30 minutes before each session.</p></article>
</div>
</section>
<section class="wrap" id="trial" aria-labelledby="trial-heading">
<h2 id="trial-heading">Try a class</h2>
<p class="lede">This demo form does not book a real spot. Connect it to your scheduling tool before you publish.</p>
<form id="trial-form" class="panel" style="margin-top:1.2rem;">
<div class="form-row">
<div><label for="name">Name</label><input id="name" name="name" type="text" autocomplete="name" required></div>
<div><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" required></div>
</div>
<div>
<label for="class">Class</label>
<select id="class" name="class"><option>Morning slow</option><option>After work</option><option>Weekend reset</option></select>
</div>
<div><label for="note">Anything we should know</label><textarea id="note" name="note" rows="3"></textarea></div>
<button class="btn btn-primary" type="submit">Request a spot</button>
<p class="form-status" id="trial-status" role="status" aria-live="polite"></p>
</form>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div><a class="logo" href="#top">Halo</a><p>A sample wellness page from Designyff. Replace the name, schedule, and address before you ship.</p></div>
<div><h3>Visit</h3><p>14 Fern Street<br>Portland, OR 97214</p></div>
<div><h3>Studio</h3><p><a href="#schedule">Schedule</a></p><p><a href="#trial">Trial class</a></p></div>
</div>
<div class="wrap" style="margin-top:1.5rem;"><p>© <span id="year"></span> Halo. Template by Designyff. Sample address only.</p></div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const toggle = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');
toggle.addEventListener('click', () => { const open = toggle.getAttribute('aria-expanded') === 'true'; toggle.setAttribute('aria-expanded', String(!open)); nav.classList.toggle('is-open', !open); });
const form = document.getElementById('trial-form');
const status = document.getElementById('trial-status');
form.addEventListener('submit', (event) => { event.preventDefault(); status.textContent = 'This demo form does not send data. Connect it to your scheduling or email provider.'; form.reset(); });
</script>
</body>
</html>
Related templates
Meridian Private Office
A quiet private-wealth page on paper and navy, with household figures, a mandate reel, and a referral introduction form.
Real Estate Landing Page
A residential brokerage page with featured homes, neighborhood notes, and a viewing request form.