Elementor #811

<!doctype html>

<head>

<title>Weekly Gym Schedule</title>

<style>

:root{

–bg:#0f1115;

–card:#161a22;

–muted:#8b93a7;

–text:#e9ecf1;

–accent:#3de27e; /* neon green */

–accent-2:#ff4757; /* action red */

–ring:0 0 0 3px rgba(61,226,126,.25);

–radius:18px;

}

*{box-sizing:border-box}

body{margin:0;background:var(–bg);color:var(–text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

.wrap{max-width:1120px;margin-inline:auto;padding:28px;}

/* Hero */

.hero{position:relative;overflow:hidden;border-radius:var(–radius);background:radial-gradient(1200px 400px at 80% -10%,rgba(61,226,126,.15),transparent 60%),

linear-gradient(135deg,#121622 0%,#0f1115 60%);padding:48px 28px}

.hero h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin:0 0 8px;font-weight:700}

.hero p{margin:0;color:var(–muted)}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.badge{background:#1d2330;color:#c7cede;border:1px solid #2a3243;padding:6px 10px;border-radius:999px;font-size:12px}

/* Toolbar */

.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:22px 0 16px;flex-wrap:wrap}

.toolbar .left{display:flex;gap:10px;align-items:center}

.select, .search{background:var(–card);border:1px solid #252c3b;border-radius:12px;padding:10px 12px;color:var(–text)}

.select{min-width:180px}

.search{min-width:240px}

.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:var(–accent);color:#0b0f14;border:0;font-weight:700;cursor:pointer}

.cta:focus{outline:none;box-shadow:var(–ring)}

/* Table */

.table-wrap{background:var(–card);border:1px solid #222a3a;border-radius:var(–radius);overflow:hidden}

.table-scroll{overflow:auto}

table{width:100%;border-collapse:separate;border-spacing:0;min-width:880px}

thead th{position:sticky;top:0;background:#1b2130;border-bottom:1px solid #2a3243;padding:14px 14px;text-align:left;font-size:14px}

tbody td{border-bottom:1px solid #232a3a;padding:14px 14px;vertical-align:top}

tbody tr:hover{background:#151a24}

.slot{display:flex;gap:10px;align-items:flex-start}

.slot .time{font-weight:700;font-size:13px;color:#b7c1d8;min-width:96px}

.tag{display:inline-flex;align-items:center;gap:6px;background:#20273a;border:1px solid #2b3447;color:#cfe9d9;padding:6px 10px;border-radius:999px;font-size:12px;margin:6px 6px 0 0}

.tag i{font-size:12px}

/* Trainers */

.grid{display:grid;gap:16px;margin-top:22px}

@media(min-width:840px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{background:var(–card);border:1px solid #222a3a;border-radius:var(–radius);padding:18px}

.trainer{display:flex;gap:14px;align-items:center}

.trainer img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid #2a3243}

.trainer h4{margin:0 0 2px}

.muted{color:var(–muted);font-size:14px}

/* CTA band */

.cta-band{margin-top:28px;padding:22px;border-radius:var(–radius);border:1px dashed #2a3243;background:linear-gradient(0deg,rgba(61,226,126,.09),rgba(61,226,126,.09)),#141925}

.cta-band h3{margin:0 0 8px}

.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid #2a3243;background:#101521;color:var(–text);text-decoration:none;font-weight:600}

.btn.primary{background:var(–accent);color:#0b0f14;border:0}

/* Footer note */

.note{color:#9aa3b7;font-size:12px;margin-top:14px}

</style>

</head>

<body>

<!– HERO –>

<h1>Weekly Gym Schedule</h1>

<p>Your fitness journey starts here — pick a time, show up, and we’ll handle the plan.</p>

<span class=”badge”><i class=”fa-solid fa-dumbbell”></i> Strength • HIIT • Yoga</span>

<span class=”badge”><i class=”fa-solid fa-mobile-screen”></i> Mobile‑friendly timetable</span>

</div>

</section>

<!– TOOLBAR –>

<option>Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

<option>Thursday</option>

<option>Friday</option>

<option>Saturday</option>

<option>Sunday</option>

</select>

</div>

<i class=”fa-solid fa-ticket”></i> Book Your Slot

</button>

</div>

<!– SCHEDULE TABLE –>

<thead>

<tr>

<th>Morning (6:00 – 9:00)</th>

<th>Afternoon (12:00 – 15:00)</th>

<th>Evening (17:00 – 21:00)</th>

</tr>

</thead>

<tbody>

<!– MON –>

<td><strong>Monday</strong></td>

<td>

<div class=”muted”>Coach: Rahul • Hall A</div></div></div>

<div class=”tag”><i class=”fa-solid fa-dumbbell”></i> Strength + Abs</div>

<div class=”muted”>Coach: Neha • Hall B</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-running”></i> Cardio Circuit</div>

<div class=”muted”>Coach: Arjun • Hall C</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-praying”></i> Yoga & Stretch</div>

<div class=”muted”>Coach: Pooja • Studio 2</div></div></div>

<div class=”tag”><i class=”fa-solid fa-bolt”></i> CrossFit</div>

<div class=”muted”>Coach: Kabir • Box</div></div></div>

</td>

</tr>

<!– TUE –>

<td><strong>Tuesday</strong></td>

<td>

<div class=”tag”><i class=”fa-solid fa-heart-pulse”></i> Functional Training</div>

<div class=”muted”>Coach: Neeraj • Hall A</div></div></div>

<div class=”tag”><i class=”fa-solid fa-bicycle”></i> Spin Class</div>

<div class=”muted”>Coach: Aisha • Studio 1</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-dumbbell”></i> Weight Training</div>

<div class=”muted”>Coach: Rohan • Hall B</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-music”></i> Zumba</div>

<div class=”muted”>Coach: Meera • Studio 2</div></div></div>

<div class=”tag”><i class=”fa-solid fa-person-walking”></i> Pilates</div>

<div class=”muted”>Coach: Tara • Studio 3</div></div></div>

</td>

</tr>

<!– WED –>

<td><strong>Wednesday</strong></td>

<td>

<div class=”tag”><i class=”fa-solid fa-dumbbell”></i> Strength Training</div>

<div class=”muted”>Coach: Neha • Hall B</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-flask”></i> Mobility & Rehab</div>

<div class=”muted”>Coach: Aman • PT Zone</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-bolt”></i> CrossFit</div>

<div class=”muted”>Coach: Kabir • Box</div></div></div>

</td>

</tr>

<!– THU –>

<td><strong>Thursday</strong></td>

<td>

<div class=”tag”><i class=”fa-solid fa-fire”></i> Tabata</div>

<div class=”muted”>Coach: Rahul • Hall A</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-heart-pulse”></i> Conditioning</div>

<div class=”muted”>Coach: Arjun • Hall C</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-praying”></i> Power Yoga</div>

<div class=”muted”>Coach: Pooja • Studio 2</div></div></div>

<div class=”tag”><i class=”fa-solid fa-basketball”></i> Bootcamp</div>

<div class=”muted”>Coach: Ankit • Turf</div></div></div>

</td>

</tr>

<!– FRI –>

<td><strong>Friday</strong></td>

<td>

<div class=”muted”>Coach: Rohan • Hall B</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-running”></i> Cardio Blast</div>

<div class=”muted”>Coach: Aisha • Studio 1</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-walking”></i> Pilates</div>

<div class=”muted”>Coach: Tara • Studio 3</div></div></div>

</td>

</tr>

<!– SAT –>

<td><strong>Saturday</strong></td>

<td>

<div class=”tag”><i class=”fa-solid fa-people-group”></i> Partner Workout</div>

<div class=”muted”>Coach: Team • Main Floor</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-flask”></i> Technique Clinic</div>

<div class=”muted”>Coach: Aman • PT Zone</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-music”></i> Bolly‑Zumba</div>

<div class=”muted”>Coach: Meera • Studio 2</div></div></div>

</td>

</tr>

<!– SUN –>

<td><strong>Sunday</strong></td>

<td>

<div class=”tag”><i class=”fa-solid fa-person-praying”></i> Sunrise Yoga</div>

<div class=”muted”>Coach: Pooja • Terrace</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-heart”></i> Mobility & Breathwork</div>

<div class=”muted”>Coach: Neha • Studio 1</div></div></div>

</td>

<td>

<div class=”tag”><i class=”fa-solid fa-dumbbell”></i> Full‑Body Strength</div>

<div class=”muted”>Coach: Rahul • Hall A</div></div></div>

</td>

</tr>

</tbody>

</table>

</div>

<!– TRAINERS –>

<div>

<h4>Rahul Singh</h4>

<div class=”muted”>Strength & Conditioning • 8 yrs exp.</div>

</div>

<div>

<h4>Pooja Mehta</h4>

<div class=”muted”>Yoga & Mobility • 6 yrs exp.</div>

</div>

<div>

<h4>Kabir Khan</h4>

<div class=”muted”>CrossFit & Bootcamp • 7 yrs exp.</div>

</div>

<!– CTA / CONTACT –>

<h3>Ready to train? Book your trial class today.</h3>

<p class=”muted”>Fill the quick form and we’ll confirm your slot within 24 hours.</p>

<a class=”btn primary” href=”#” onclick=”alert(‘Replace with your form or WhatsApp link’)”><i class=”fa-brands fa-whatsapp”></i> WhatsApp Us</a>

<a class=”btn” href=”#” onclick=”alert(‘Replace with your membership page link’)”><i class=”fa-solid fa-ticket”></i> Membership Plans</a>

</div>

<p class=”note”>Tip: In WordPress, link these buttons to your WPForms form, tel:+91 number, or pricing page.</p>

</section>

<p class=”note”>Admin note: To edit classes, just change the tags/times inside the table rows above. The day filter and search will work automatically.</p>

</div>

// Simple filter & search for the table

const dayFilter = document.getElementById(‘dayFilter’);

const search = document.getElementById(‘search’);

const rows = Array.from(document.querySelectorAll(‘#schedule tbody tr’));

function applyFilters(){

const day = dayFilter.value;

const q = search.value.toLowerCase().trim();

rows.forEach(tr=>{

const matchDay = (day === ‘all’) || (tr.dataset.day === day);

const text = tr.innerText.toLowerCase();

const matchQuery = !q || text.includes(q);

tr.style.display = (matchDay && matchQuery) ? ” : ‘none’;

});

}

dayFilter.addEventListener(‘change’, applyFilters);

search.addEventListener(‘input’, applyFilters);

</script>

</body>

</html>

1 thought on “Elementor #811”

Leave a Comment Cancel Reply

Related Posts

1 thought on “Elementor #811”

Leave a Comment Cancel Reply