Sama Yoga Find Your Flow
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sama Yoga โ Find Your Flow</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet"> </head> <body> <!-- NAV --> <nav class="nav" id="mainNav"> <a href="#" class="nav-logo">Sama<span>.</span></a> <ul class="nav-links"> <li><a href="#classes">Classes</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#instructors">Instructors</a></li> <li><a href="#philosophy">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <a href="#" class="nav-cta">Book a Class</a> <button class="ham" id="ham" aria-label="Menu"> <span></span><span></span><span></span> </button> </nav> <div class="mob" id="mob"> <a href="#classes">Classes</a> <a href="#schedule">Schedule</a> <a href="#instructors">Instructors</a> <a href="#philosophy">About</a> <a href="#">Contact</a> <a href="#" class="mob-cta">Book a Class</a> </div> <!-- โโ HERO โโ --> <section class="hero" id="hero"> <div class="hero-left"> <div class="hero-bg-glyph" aria-hidden="true">S</div> <div class="hero-eyebrow">Sama Yoga Studio</div> <h1 class="hero-h1">Find Your<br><em>Inner Flow</em></h1> <p class="hero-p">A sanctuary for mind, body, and spirit. From grounding hatha to energising vinyasa โ every class is a step toward the best version of you.</p> <div class="hero-btns"> <a href="#schedule" class="btn-fill"> <span>View Schedule</span> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> <a href="#classes" class="btn-ghost">Explore Classes</a> </div> <div class="hero-stats"> <div class="stat-item"> <div class="stat-num">12+</div> <div class="stat-lbl">Class Types</div> </div> <div class="stat-div"></div> <div class="stat-item"> <div class="stat-num">800+</div> <div class="stat-lbl">Members</div> </div> <div class="stat-div"></div> <div class="stat-item"> <div class="stat-num">8 yrs</div> <div class="stat-lbl">Est. 2016</div> </div> </div> </div> <div class="hero-right"> <div class="hero-img-wrap"> <img src="https://images.unsplash.com/photo-1545389336-cf090694435e?w=1200&q=85" alt="Yoga practitioner in morning light"> </div> <div class="breath-ring" aria-hidden="true"> <svg viewBox="0 0 100 100" fill="none"> <circle cx="50" cy="50" r="46" stroke="rgba(200,102,74,.35)" stroke-width="1" stroke-dasharray="5 4"/> </svg> <div class="breath-core">Breathe</div> </div> <div class="float-card"> <div class="fc-label">Next Class</div> <div class="fc-class">Morning Vinyasa Flow</div> <div class="fc-time"> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg> Today ยท 7:00 AM โ 8:00 AM </div> <div class="fc-row"> <div class="fc-spots">โฆ 4 spots left</div> <a href="#" class="fc-join">Join</a> </div> </div> </div> </section> <!-- Wave --> <div class="wave" style="background:var(--sand)"> <svg viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="height:50px;background:var(--linen)"> <path d="M0,28 C400,56 1040,0 1440,28 L1440,50 L0,50 Z" fill="var(--sand)"/> <path d="M0,28 C400,56 1040,0 1440,28" fill="none" stroke="rgba(200,102,74,.12)" stroke-width="1.5"/> </svg> </div> <!-- โโ CLASSES โโ --> <section class="classes-sec" id="classes"> <div class="sec-hd"> <div class="sec-eye">What We Offer</div> <h2 class="sec-h2">Our <em>Classes</em></h2> </div> <div class="classes-grid"> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=600&q=80" alt="Hatha"> <div class="cc-badge b">Beginner</div> </div> <div class="cc-body"> <div class="cc-name">Hatha Foundations</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>60 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 14</span> </div> <div class="cc-desc">Ground yourself in classical postures and conscious breathing. Perfect for newcomers building a lifelong practice.</div> <div class="cc-foot"> <div class="cc-who"><strong>Maya Anand</strong>Lead Instructor</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1588286840104-8957b019727f?w=600&q=80" alt="Vinyasa"> <div class="cc-badge m">Intermediate</div> </div> <div class="cc-body"> <div class="cc-name">Vinyasa Flow</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>75 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 16</span> </div> <div class="cc-desc">Dynamic sequences linking breath to movement. Build strength, flexibility, and meditative focus in motion.</div> <div class="cc-foot"> <div class="cc-who"><strong>Lena Hoffmann</strong>Senior Instructor</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=600&q=80" alt="Yin"> <div class="cc-badge b">All Levels</div> </div> <div class="cc-body"> <div class="cc-name">Yin & Restore</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>90 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 12</span> </div> <div class="cc-desc">Long-held passive postures to release deep connective tissue. The antidote to a busy mind and stiff body.</div> <div class="cc-foot"> <div class="cc-who"><strong>Sara Kim</strong>Yin Specialist</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1593810450967-f9c42742e326?w=600&q=80" alt="Ashtanga"> <div class="cc-badge a">Advanced</div> </div> <div class="cc-body"> <div class="cc-name">Ashtanga Primary</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>90 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 10</span> </div> <div class="cc-desc">The traditional Mysore-style primary series. A demanding, precise practice for dedicated yogis seeking transformation.</div> <div class="cc-foot"> <div class="cc-who"><strong>Rajan Nair</strong>Ashtanga Teacher</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1588286840104-8957b019727f?w=600&q=80" alt="Prenatal"> <div class="cc-badge b">Prenatal</div> </div> <div class="cc-body"> <div class="cc-name">Prenatal Flow</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>60 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 8</span> </div> <div class="cc-desc">Gentle sequences designed to nurture expecting mothers โ easing discomfort and cultivating calm through every trimester.</div> <div class="cc-foot"> <div class="cc-who"><strong>Maya Anand</strong>Prenatal Certified</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> <div class="class-card"> <div class="cc-img"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?w=600&q=80" alt="Meditation"> <div class="cc-badge b">All Levels</div> </div> <div class="cc-body"> <div class="cc-name">Guided Meditation</div> <div class="cc-meta"> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg>45 min</span> <span><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2h5"/><circle cx="12" cy="7" r="4"/></svg>Max 20</span> </div> <div class="cc-desc">Still the mind. Deepen awareness. A guided sit using breath, visualisation, and mantra to quiet everyday noise.</div> <div class="cc-foot"> <div class="cc-who"><strong>Sara Kim</strong>Meditation Guide</div> <a href="#" class="cc-book">Book</a> </div> </div> </div> </div> </section> <!-- Wave --> <div class="wave" style="background:var(--linen)"> <svg viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="height:50px;background:var(--clay)"> <path d="M0,22 C480,50 960,0 1440,22 L1440,0 L0,0 Z" fill="var(--linen)"/> </svg> </div> <!-- โโ PHILOSOPHY โโ --> <section class="philosophy" id="philosophy"> <div> <div class="phil-eyebrow">Our Philosophy</div> <h2 class="phil-h2">Yoga is not<br>a destination.</h2> <p class="phil-p">At Sama, we believe yoga is a continuous unfolding โ not a goal to be achieved, but a relationship to be nurtured. We hold space for every body, every breath, every level.</p> <a href="#" class="phil-btn"> Our Story <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> </div> <div class="pillars"> <div class="pillar"> <div class="p-icon">?</div> <div> <div class="p-name">Connection</div> <div class="p-desc">Every session begins and ends in community. We practice together, we grow together.</div> </div> </div> <div class="pillar"> <div class="p-icon">?</div> <div> <div class="p-name">Transformation</div> <div class="p-desc">Consistent, intentional practice rewires the body and calms the mind โ permanently.</div> </div> </div> <div class="pillar"> <div class="p-icon">โฆ</div> <div> <div class="p-name">Presence</div> <div class="p-desc">The mat is a microcosm of life. What you cultivate here, you carry everywhere you go.</div> </div> </div> </div> </section> <!-- โโ SCHEDULE โโ --> <section class="schedule-sec" id="schedule"> <div class="sec-hd"> <div class="sec-eye">Weekly Timetable</div> <h2 class="sec-h2">This Week's <em>Schedule</em></h2> </div> <div class="tabs"> <button class="tab-btn active">Monday</button> <button class="tab-btn">Tuesday</button> <button class="tab-btn">Wednesday</button> <button class="tab-btn">Thursday</button> <button class="tab-btn">Friday</button> <button class="tab-btn">Saturday</button> <button class="tab-btn">Sunday</button> </div> <div class="sched-list" id="schedList"> <!-- injected by JS --> </div> </section> <!-- โโ INSTRUCTORS โโ --> <section class="instructors" id="instructors"> <div class="sec-hd"> <div class="sec-eye">The Teachers</div> <h2 class="sec-h2">Meet Our <em>Instructors</em></h2> </div> <div class="instr-grid"> <div class="instr-card"> <div class="instr-img"><img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300&q=80" alt="Maya"></div> <div class="instr-name">Maya Anand</div> <div class="instr-spec">Hatha ยท Prenatal</div> <div class="instr-exp">12 years experience</div> </div> <div class="instr-card"> <div class="instr-img"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&q=80" alt="Lena"></div> <div class="instr-name">Lena Hoffmann</div> <div class="instr-spec">Vinyasa ยท Power</div> <div class="instr-exp">9 years experience</div> </div> <div class="instr-card"> <div class="instr-img"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt="Sara"></div> <div class="instr-name">Sara Kim</div> <div class="instr-spec">Yin ยท Meditation</div> <div class="instr-exp">7 years experience</div> </div> <div class="instr-card"> <div class="instr-img"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&q=80" alt="Rajan"></div> <div class="instr-name">Rajan Nair</div> <div class="instr-spec">Ashtanga ยท Mysore</div> <div class="instr-exp">15 years experience</div> </div> <div class="instr-card"> <div class="instr-img"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&q=80" alt="Tom"></div> <div class="instr-name">Tom Varela</div> <div class="instr-spec">Kundalini ยท Breathwork</div> <div class="instr-exp">6 years experience</div> </div> </div> </section> <!-- โโ TESTIMONIALS โโ --> <section class="testimonials"> <div class="sec-hd"> <div class="sec-eye" style="color:var(--terra)">Student Stories</div> <h2 class="sec-h2" style="color:#fff">What Our <em style="color:var(--terra)">Students</em> Say</h2> </div> <div class="testi-grid"> <div class="testi-card"> <div class="testi-stars">โ โ โ โ โ </div> <div class="testi-quote">"Sama changed how I live, not just how I move. Three months in and my anxiety is halved. The instructors hold real space for you."</div> <div class="testi-author"> <div class="testi-av"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=80&q=70" alt=""></div> <div><div class="testi-name">Priya Mehta</div><div class="testi-class">Vinyasa Flow</div></div> </div> </div> <div class="testi-card"> <div class="testi-stars">โ โ โ โ โ </div> <div class="testi-quote">"I'd tried yoga before and never stuck with it. Rajan's Ashtanga class is different โ challenging and meditative at the same time."</div> <div class="testi-author"> <div class="testi-av"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&q=70" alt=""></div> <div><div class="testi-name">James O'Brien</div><div class="testi-class">Ashtanga Primary</div></div> </div> </div> <div class="testi-card"> <div class="testi-stars">โ โ โ โ โ </div> <div class="testi-quote">"The prenatal classes with Maya were my lifeline in the third trimester. Gentle, safe, and genuinely joyful. I felt truly seen."</div> <div class="testi-author"> <div class="testi-av"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&q=70" alt=""></div> <div><div class="testi-name">Clara Bauer</div><div class="testi-class">Prenatal Flow</div></div> </div> </div> </div> </section> <!-- โโ CTA โโ --> <section class="cta-band"> <div class="cta-inner"> <h2>Start Your<br><em>Journey Today</em></h2> <p>Your first class is on us. No commitment, no pressure โ just you, your breath, and a community ready to welcome you home.</p> <div class="cta-btns"> <a href="#" class="btn-fill"> <span>Claim Free Class</span> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> <a href="#schedule" class="btn-ghost">Browse Schedule</a> </div> </div> </section> <!-- โโ FOOTER โโ --> <footer id="contact"> <div class="foot-grid"> <div> <a href="#" class="foot-logo">Sama<span>.</span></a> <p class="foot-about">A warm, welcoming studio in the heart of the city. Classes for every level, every age, every body โ seven days a week.</p> </div> <div> <div class="foot-heading">Studio</div> <ul class="foot-links"> <li><a href="#">About Sama</a></li> <li><a href="#">Our Instructors</a></li> <li><a href="#">Studio Rental</a></li> <li><a href="#">Press</a></li> </ul> </div> <div> <div class="foot-heading">Classes</div> <ul class="foot-links"> <li><a href="#">All Classes</a></li> <li><a href="#">Workshops</a></li> <li><a href="#">Retreats</a></li> <li><a href="#">Teacher Training</a></li> </ul> </div> <div> <div class="foot-heading">Contact</div> <ul class="foot-links"> <li><a href="#">12 Bloom Street, London</a></li> <li><a href="#">hello@sama.yoga</a></li> <li><a href="#">+44 20 7946 0321</a></li> <li><a href="#">Instagram</a></li> </ul> </div> </div> <div class="foot-bottom"> <span>ยฉ 2024 Sama Yoga Studio. All rights reserved.</span> <span>Privacy Policy ยท Terms</span> </div> </footer> </body> </html>
CSS
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RESET & ROOT โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --clay:#c8664a; --clay2:#d4826a; --terra:#e8a882; --sand:#f5ede2; --linen:#faf6f0; --bark:#2c1f14; --bark2:#3d2d1e; --sage:#7a8c6e; --ease:cubic-bezier(.4,0,.2,1); --slow:cubic-bezier(.77,0,.175,1); } html{scroll-behavior:smooth} body{ font-family:'Jost',sans-serif; background:var(--linen); color:var(--bark); overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ NAV โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:70px; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(1.5rem,5vw,4rem); transition:background .5s,box-shadow .5s; } .nav.solid{ background:rgba(250,246,240,.94); backdrop-filter:blur(16px); box-shadow:0 1px 0 rgba(44,31,20,.08); } .nav-logo{ font-family:'Italiana',serif; font-size:clamp(1.45rem,2.5vw,1.75rem); color:var(--bark);text-decoration:none;letter-spacing:.04em; } .nav-logo span{color:var(--clay)} .nav-links{ display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem); list-style:none; } .nav-links a{ font-size:.78rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--bark2);text-decoration:none; opacity:.65;transition:opacity .3s,color .3s; } .nav-links a:hover{opacity:1;color:var(--clay)} .nav-cta{ padding:.55em 1.6em; background:var(--clay);color:#fff; font-family:'Jost',sans-serif; font-size:.76rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;text-decoration:none; border-radius:100px; transition:background .3s,transform .2s; white-space:nowrap; } .nav-cta:hover{background:var(--clay2);transform:translateY(-1px)} .ham{ display:none;flex-direction:column;gap:5px; background:none;border:none;cursor:pointer;padding:4px;z-index:110; } .ham span{ display:block;width:22px;height:1.5px;background:var(--bark); transition:transform .35s,opacity .35s;transform-origin:center; } .ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .ham.open span:nth-child(2){opacity:0} .ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mob{ display:none; position:fixed;inset:0;top:70px;z-index:99; background:rgba(250,246,240,.97);backdrop-filter:blur(18px); flex-direction:column;align-items:center;justify-content:center; gap:2rem; opacity:0;pointer-events:none;transition:opacity .4s; } .mob.open{opacity:1;pointer-events:all} .mob a{ font-family:'Italiana',serif; font-size:clamp(2rem,7vw,3rem); color:var(--bark);text-decoration:none;transition:color .3s; } .mob a:hover{color:var(--clay)} .mob .mob-cta{ margin-top:.5rem;padding:.7em 2.8em; background:var(--clay);color:#fff; font-family:'Jost',sans-serif;font-size:.8rem; font-weight:500;letter-spacing:.14em;text-transform:uppercase; border-radius:100px;text-decoration:none; } /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ HERO โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .hero{ position:relative; width:100%;min-height:100svh; display:grid;grid-template-columns:1fr 1fr; overflow:hidden;background:var(--sand); } /* LEFT */ .hero-left{ position:relative;z-index:4; display:flex;flex-direction:column;justify-content:center; padding:100px clamp(2rem,4vw,4.5rem) clamp(3rem,5vw,4.5rem) clamp(1.5rem,6vw,5rem); } .hero-bg-glyph{ position:absolute; bottom:-.12em;left:-.04em; font-family:'Italiana',serif; font-size:clamp(14rem,24vw,22rem); color:rgba(200,102,74,.065); line-height:1;pointer-events:none;user-select:none; animation:glyphIn 1.4s var(--slow) .2s both; } @keyframes glyphIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .hero-eyebrow{ display:inline-flex;align-items:center;gap:.65em; font-size:clamp(.6rem,1vw,.68rem);font-weight:500; letter-spacing:.3em;text-transform:uppercase;color:var(--clay); margin-bottom:1.4rem; opacity:0;transform:translateY(16px); animation:up .6s var(--ease) .4s both; } .hero-eyebrow::before{ content:'';display:block; width:26px;height:1px;background:var(--clay);flex-shrink:0; } .hero-h1{ font-family:'Italiana',serif; font-size:clamp(3.4rem,6.5vw,6.5rem); line-height:.96;letter-spacing:-.01em;color:var(--bark); margin-bottom:1.4rem; opacity:0;transform:translateY(36px); animation:up .8s var(--slow) .55s both; } .hero-h1 em{font-style:italic;color:var(--clay)} .hero-p{ font-size:clamp(.85rem,1.2vw,.95rem);font-weight:300;line-height:1.8; color:rgba(44,31,20,.6);max-width:370px;margin-bottom:2.2rem; opacity:0;transform:translateY(18px); animation:up .65s var(--ease) .75s both; } .hero-btns{ display:flex;flex-wrap:wrap;gap:.9rem; opacity:0;transform:translateY(16px); animation:up .6s var(--ease) .9s both; } .btn-fill{ display:inline-flex;align-items:center;gap:.6em; padding:.9em 2em;border-radius:100px; background:var(--clay);color:#fff; font-size:.8rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;text-decoration:none; transition:background .3s,transform .25s,box-shadow .3s; box-shadow:0 4px 20px rgba(200,102,74,.3); } .btn-fill:hover{background:var(--clay2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,102,74,.38)} .btn-fill svg{width:15px;height:15px;transition:transform .3s} .btn-fill:hover svg{transform:translateX(3px)} .btn-ghost{ display:inline-flex;align-items:center; padding:.88em 1.9em;border-radius:100px; border:1.5px solid rgba(44,31,20,.22);color:var(--bark); font-size:.8rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;text-decoration:none; transition:border-color .3s,color .3s,transform .25s; } .btn-ghost:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-2px)} .hero-stats{ display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem; margin-top:2.4rem;padding-top:2rem; border-top:1px solid rgba(44,31,20,.1); opacity:0;animation:fadeIn .8s ease 1.1s both; } .stat-item{display:flex;flex-direction:column;gap:.2rem} .stat-num{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,2.2vw,2rem);font-weight:300; color:var(--clay);line-height:1; } .stat-lbl{ font-size:.62rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:rgba(44,31,20,.45); } .stat-div{width:1px;height:32px;background:rgba(44,31,20,.12)} /* RIGHT */ .hero-right{position:relative;overflow:hidden} .hero-img-wrap{position:absolute;inset:0} .hero-img-wrap img{ width:100%;height:100%;object-fit:cover;object-position:center 20%; transform:scale(1.08); animation:kenBurns 10s ease-out forwards; filter:brightness(.88) saturate(.92); } @keyframes kenBurns{to{transform:scale(1)}} .hero-img-wrap::before{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(135deg,rgba(200,102,74,.15) 0%,transparent 55%); } .hero-img-wrap::after{ content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(to right,var(--sand) 0%,transparent 18%); } /* Floating class card */ .float-card{ position:absolute; bottom:clamp(2.5rem,5vw,4rem);left:clamp(1.2rem,3vw,2.5rem); z-index:10; background:rgba(250,246,240,.9);backdrop-filter:blur(20px); border:1px solid rgba(200,102,74,.2); border-radius:16px;padding:1.2rem 1.5rem; min-width:200px; opacity:0;transform:translateY(24px) scale(.97); animation:cardIn .7s var(--slow) 1.2s both; } @keyframes cardIn{to{opacity:1;transform:none}} .fc-label{font-size:.58rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:.45rem} .fc-class{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--bark);margin-bottom:.3rem} .fc-time{font-size:.72rem;font-weight:300;color:rgba(44,31,20,.55);display:flex;align-items:center;gap:.4em} .fc-time svg{width:11px;height:11px;color:var(--clay);flex-shrink:0} .fc-row{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;padding-top:.75rem;border-top:1px solid rgba(44,31,20,.08)} .fc-spots{font-size:.65rem;font-weight:500;color:var(--sage)} .fc-join{ padding:.4em 1.1em;border-radius:100px; background:var(--clay);color:#fff; font-size:.62rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;text-decoration:none; transition:background .3s; } .fc-join:hover{background:var(--clay2)} /* Breathing circle */ .breath-ring{ position:absolute;top:clamp(5.5rem,9vw,8rem);right:clamp(1.5rem,3vw,3rem); z-index:10; width:clamp(78px,9vw,98px);height:clamp(78px,9vw,98px); display:flex;align-items:center;justify-content:center; } .breath-ring svg{ position:absolute;inset:0;width:100%;height:100%; animation:spinSlow 14s linear infinite; } @keyframes spinSlow{to{transform:rotate(360deg)}} .breath-core{ width:55%;height:55%;border-radius:50%; background:rgba(200,102,74,.15);backdrop-filter:blur(4px); border:1px solid rgba(200,102,74,.4); display:flex;align-items:center;justify-content:center; animation:breathe 4s ease-in-out infinite; font-size:.38rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--clay); } @keyframes breathe{ 0%,100%{transform:scale(1);background:rgba(200,102,74,.15)} 50%{transform:scale(1.22);background:rgba(200,102,74,.28)} } /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ WAVE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .wave{display:block;width:100%;overflow:hidden;line-height:0;background:var(--linen)} .wave svg{display:block;width:100%} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ SHARED SECTION STYLES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .sec-eye{font-size:.65rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--clay);margin-bottom:.7rem} .sec-h2{ font-family:'Italiana',serif; font-size:clamp(2.2rem,4.5vw,3.8rem);color:var(--bark);line-height:1.05; } .sec-h2 em{font-style:italic;color:var(--clay)} .sec-hd{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ CLASSES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .classes-sec{ background:var(--linen); padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem); } .classes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:1.5rem; } .class-card{ border-radius:18px;overflow:hidden; background:#fff; box-shadow:0 2px 20px rgba(44,31,20,.06); transition:transform .35s var(--ease),box-shadow .35s; cursor:pointer; } .class-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(44,31,20,.12)} .cc-img{position:relative;height:210px;overflow:hidden} .cc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .class-card:hover .cc-img img{transform:scale(1.06)} .cc-badge{ position:absolute;top:1rem;left:1rem; padding:.3em .9em;border-radius:100px; font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; } .cc-badge.b{background:rgba(122,140,110,.18);color:var(--sage);border:1px solid rgba(122,140,110,.3)} .cc-badge.m{background:rgba(200,102,74,.12);color:var(--clay);border:1px solid rgba(200,102,74,.25)} .cc-badge.a{background:rgba(44,31,20,.1);color:var(--bark);border:1px solid rgba(44,31,20,.18)} .cc-body{padding:1.4rem 1.5rem 1.6rem} .cc-name{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--bark);margin-bottom:.3rem;line-height:1.2} .cc-meta{font-size:.72rem;font-weight:300;color:rgba(44,31,20,.5);display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:.85rem} .cc-meta span{display:flex;align-items:center;gap:.28em} .cc-meta svg{width:11px;height:11px;color:var(--clay)} .cc-desc{font-size:.82rem;font-weight:300;line-height:1.65;color:rgba(44,31,20,.58);margin-bottom:1rem} .cc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid rgba(44,31,20,.08)} .cc-who{font-size:.72rem;font-weight:400;color:rgba(44,31,20,.55)} .cc-who strong{display:block;font-size:.8rem;color:var(--bark)} .cc-book{ padding:.48em 1.3em;border-radius:100px; background:var(--clay);color:#fff; font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;transition:background .3s,transform .2s; } .cc-book:hover{background:var(--clay2);transform:scale(1.04)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ PHILOSOPHY โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .philosophy{ background:var(--clay); padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem); display:grid;grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem);align-items:center; } .phil-eyebrow{font-size:.65rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.8rem} .phil-h2{font-family:'Italiana',serif;font-size:clamp(2rem,4vw,3.4rem);color:#fff;line-height:1.05;margin-bottom:1.2rem} .phil-p{font-size:clamp(.85rem,1.2vw,.92rem);font-weight:300;line-height:1.8;color:rgba(255,255,255,.72);margin-bottom:1.6rem} .phil-btn{ display:inline-flex;align-items:center;gap:.6em; padding:.85em 2em;border-radius:100px; background:#fff;color:var(--clay); font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;transition:transform .25s,box-shadow .3s; box-shadow:0 4px 18px rgba(0,0,0,.14); } .phil-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.2)} .phil-btn svg{width:14px;height:14px} .pillars{display:flex;flex-direction:column;gap:1.1rem} .pillar{ display:flex;align-items:flex-start;gap:1.1rem; padding:1.2rem 1.4rem;border-radius:14px; background:rgba(255,255,255,.11);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); transition:background .3s; } .pillar:hover{background:rgba(255,255,255,.18)} .p-icon{font-size:1.5rem;flex-shrink:0;line-height:1;margin-top:.1rem} .p-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:.2rem} .p-desc{font-size:.76rem;font-weight:300;color:rgba(255,255,255,.62);line-height:1.55} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ SCHEDULE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .schedule-sec{ background:var(--sand); padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem); } .tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem} .tab-btn{ padding:.52em 1.35em;border-radius:100px; border:1.5px solid rgba(44,31,20,.18);background:transparent; font-family:'Jost',sans-serif; font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:rgba(44,31,20,.55);cursor:pointer;transition:all .3s; } .tab-btn.active,.tab-btn:hover{background:var(--clay);border-color:var(--clay);color:#fff} .sched-list{display:flex;flex-direction:column;gap:.7rem} .sched-row{ display:grid; grid-template-columns:90px 1fr auto auto; align-items:center;gap:1rem; padding:1rem 1.5rem;border-radius:12px; background:#fff; box-shadow:0 1px 8px rgba(44,31,20,.05); transition:box-shadow .3s,transform .3s; } .sched-row:hover{box-shadow:0 4px 20px rgba(44,31,20,.1);transform:translateX(4px)} .sched-time{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600;color:var(--clay)} .sched-name{font-size:.88rem;font-weight:500;color:var(--bark)} .sched-meta{font-size:.7rem;font-weight:300;color:rgba(44,31,20,.48)} .sched-dur{ font-size:.68rem;font-weight:500;letter-spacing:.08em; color:var(--sage);background:rgba(122,140,110,.1); padding:.28em .85em;border-radius:100px;white-space:nowrap; } .sched-book-btn{ padding:.46em 1.3em;border-radius:100px; background:var(--clay);color:#fff; font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; border:none;cursor:pointer;white-space:nowrap; transition:background .3s,transform .2s; } .sched-book-btn:hover{background:var(--clay2);transform:scale(1.04)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ INSTRUCTORS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .instructors{ background:var(--linen); padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem); } .instr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:1.5rem 1.8rem; margin-top:clamp(2rem,4vw,3rem); } .instr-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;cursor:pointer} .instr-img{ width:clamp(100px,13vw,132px);height:clamp(100px,13vw,132px); border-radius:50%;overflow:hidden; border:2.5px solid rgba(200,102,74,.2); transition:border-color .35s,transform .35s; } .instr-card:hover .instr-img{border-color:var(--clay);transform:scale(1.05)} .instr-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:filter .35s} .instr-card:hover .instr-img img{filter:saturate(1)} .instr-name{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--bark)} .instr-spec{font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)} .instr-exp{font-size:.7rem;font-weight:300;color:rgba(44,31,20,.45);margin-top:-.3rem} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ TESTIMONIALS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .testimonials{ background:var(--bark); padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem); } .testi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:1.4rem;margin-top:clamp(2rem,4vw,3rem); } .testi-card{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); border-radius:16px;padding:1.8rem 1.7rem;transition:background .3s; } .testi-card:hover{background:rgba(255,255,255,.08)} .testi-stars{color:var(--terra);letter-spacing:.1em;font-size:.9rem;margin-bottom:.9rem} .testi-quote{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(1rem,1.4vw,1.1rem);font-weight:300;line-height:1.65; color:rgba(250,246,240,.82);margin-bottom:1.2rem; } .testi-author{display:flex;align-items:center;gap:.8rem} .testi-av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(200,102,74,.35);flex-shrink:0} .testi-av img{width:100%;height:100%;object-fit:cover} .testi-name{font-size:.82rem;font-weight:500;color:#fff} .testi-class{font-size:.68rem;font-weight:300;color:var(--terra)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ CTA BAND โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .cta-band{ background:var(--sand); padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem); text-align:center;position:relative;overflow:hidden; } .cta-band::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(200,102,74,.1) 0%,transparent 70%); } .cta-inner{position:relative;z-index:1;max-width:560px;margin:0 auto} .cta-inner h2{font-family:'Italiana',serif;font-size:clamp(2.4rem,5.5vw,4.2rem);color:var(--bark);line-height:1.05;margin-bottom:1rem} .cta-inner h2 em{font-style:italic;color:var(--clay)} .cta-inner p{font-size:.92rem;font-weight:300;line-height:1.75;color:rgba(44,31,20,.58);margin-bottom:2rem} .cta-btns{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ FOOTER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ footer{ background:var(--bark);color:rgba(250,246,240,.5); padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,5vw,4rem) clamp(1.5rem,3vw,2rem); } .foot-grid{ display:grid;grid-template-columns:1.4fr repeat(3,1fr); gap:2rem 3rem;margin-bottom:2.5rem; } .foot-logo{font-family:'Italiana',serif;font-size:1.75rem;color:#fff;text-decoration:none;letter-spacing:.04em;display:block;margin-bottom:.8rem} .foot-logo span{color:var(--terra)} .foot-about{font-size:.8rem;font-weight:300;line-height:1.7;color:rgba(250,246,240,.42)} .foot-heading{font-size:.63rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,246,240,.3);margin-bottom:1rem} .foot-links{list-style:none;display:flex;flex-direction:column;gap:.52rem} .foot-links a{font-size:.8rem;font-weight:300;color:rgba(250,246,240,.48);text-decoration:none;transition:color .3s} .foot-links a:hover{color:var(--terra)} .foot-bottom{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.07); font-size:.72rem;font-weight:300; } /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ KEYFRAMES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ @keyframes up{to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{to{opacity:1}} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RESPONSIVE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ @media(max-width:900px){ .hero{grid-template-columns:1fr;min-height:100svh} .hero-right{position:absolute;inset:0;z-index:0} .hero-img-wrap::after{background:linear-gradient(to right,rgba(245,237,226,.9) 0%,rgba(245,237,226,.6) 50%,transparent 100%)} .hero-left{ z-index:4;padding-top:90px; padding-bottom:clamp(3rem,8vw,5rem); min-height:100svh; } .hero-bg-glyph{display:none} .philosophy{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .sched-row{grid-template-columns:75px 1fr} .sched-dur,.sched-book-btn{display:none} } @media(max-width:768px){ .nav-links,.nav-cta{display:none} .ham{display:flex} .mob{display:flex} .float-card{display:none} } @media(max-width:520px){ .hero-stats{gap:.9rem} .stat-div{display:none} .foot-grid{grid-template-columns:1fr} }
JavaScript
// Nav window.addEventListener('scroll',()=>{ document.getElementById('mainNav').classList.toggle('solid',window.scrollY>30); },{passive:true}); // Mobile menu const ham=document.getElementById('ham'),mob=document.getElementById('mob'); ham.addEventListener('click',()=>{ ham.classList.toggle('open');mob.classList.toggle('open'); document.body.style.overflow=mob.classList.contains('open')?'hidden':''; }); mob.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{ ham.classList.remove('open');mob.classList.remove('open');document.body.style.overflow=''; })); // Schedule const schedules={ Monday:[ ['7:00 AM','Morning Vinyasa Flow','Lena Hoffmann ยท Studio A','60 min'], ['9:30 AM','Hatha Foundations','Maya Anand ยท Studio B','60 min'], ['12:00 PM','Guided Meditation','Sara Kim ยท Studio C','45 min'], ['5:30 PM','Yin & Restore','Sara Kim ยท Studio A','90 min'], ['7:15 PM','Ashtanga Primary Series','Rajan Nair ยท Studio A','90 min'], ], Tuesday:[ ['6:30 AM','Sunrise Flow','Tom Varela ยท Studio A','60 min'], ['10:00 AM','Yin & Restore','Sara Kim ยท Studio B','90 min'], ['6:00 PM','Power Vinyasa','Lena Hoffmann ยท Studio A','75 min'], ['7:45 PM','Guided Meditation','Maya Anand ยท Studio C','45 min'], ], Wednesday:[ ['7:00 AM','Hatha Foundations','Maya Anand ยท Studio B','60 min'], ['12:30 PM','Lunchtime Flow','Lena Hoffmann ยท Studio A','45 min'], ['5:30 PM','Prenatal Flow','Maya Anand ยท Studio C','60 min'], ['7:00 PM','Ashtanga Primary','Rajan Nair ยท Studio A','90 min'], ], Thursday:[ ['7:00 AM','Morning Vinyasa','Tom Varela ยท Studio A','60 min'], ['9:30 AM','Yin Deep Stretch','Sara Kim ยท Studio B','75 min'], ['6:00 PM','Kundalini','Tom Varela ยท Studio A','75 min'], ['7:30 PM','Guided Meditation','Sara Kim ยท Studio C','45 min'], ], Friday:[ ['6:45 AM','Rise & Flow','Lena Hoffmann ยท Studio A','60 min'], ['10:00 AM','Hatha Foundations','Maya Anand ยท Studio B','60 min'], ['5:30 PM','Vinyasa Flow','Rajan Nair ยท Studio A','75 min'], ['7:00 PM','Yin & Restore','Sara Kim ยท Studio B','90 min'], ], Saturday:[ ['8:00 AM','Community Flow','All Instructors ยท Main Hall','90 min'], ['10:30 AM','Ashtanga Primary','Rajan Nair ยท Studio A','90 min'], ['1:00 PM','Restorative Yoga','Sara Kim ยท Studio B','75 min'], ['4:00 PM','Kids Yoga','Maya Anand ยท Studio C','45 min'], ], Sunday:[ ['9:00 AM','Slow Sunday Flow','Tom Varela ยท Studio A','75 min'], ['11:00 AM','Meditation & Pranayama','Sara Kim ยท Studio C','60 min'], ['5:00 PM','Yin & Nidra','Sara Kim ยท Studio B','90 min'], ], }; const list=document.getElementById('schedList'); function renderSchedule(day){ const rows=schedules[day]||[]; list.innerHTML=rows.map(([t,n,m,d])=>` <div class="sched-row"> <div class="sched-time">${t}</div> <div><div class="sched-name">${n}</div><div class="sched-meta">${m}</div></div> <div class="sched-dur">${d}</div> <button class="sched-book-btn">Book</button> </div>`).join(''); } document.querySelectorAll('.tab-btn').forEach(btn=>{ btn.addEventListener('click',()=>{ document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active')); btn.classList.add('active'); renderSchedule(btn.textContent.trim()); }); }); renderSchedule('Monday');
Output Preview
Desktop
Mobile
Fullscreen