<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Your Show — Episode Hub</title>
<meta name="description" content="Official site for 'Your Show' — episodes, guests, news, and booking." />
<link rel="icon" href="#" />
<style>
/* Simple modern styling (self-contained) */
:root{
--bg:#0f1724; --card:#0b1220; --muted:#98a3b3; --accent:#ff6b6b; --glass: rgba(255,255,255,0.04);
--radius:12px; --maxw:1100px;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{
margin:0; background:linear-gradient(180deg,var(--bg),#071226);
color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
line-height:1.45;
}
.wrap{max-width:var(--maxw); margin:36px auto; padding:20px;}
header{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.logo{
width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ffa07a);
display:flex;align-items:center;justify-content:center;font-weight:700;color:#071226;font-size:22px;
box-shadow:0 6px 20px rgba(0,0,0,0.45);
}
nav{margin-left:auto;display:flex;gap:12px;align-items:center}
a.navlink{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px}
a.navlink:hover{color:#fff;background:var(--glass)}
.hero{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center;margin-bottom:28px}
@media (max-width:880px){.hero{grid-template-columns:1fr;}.hero-right{order:-1}}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(2,6,23,0.6)}
h1{font-size:28px;margin:0 0 8px}
p.lead{color:var(--muted);margin:0 0 14px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--accent);color:#071226;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.06)}
.hero-art{height:240px;background-image:url('https://images.unsplash.com/photo-1541996701-0f90a6a5f7f9?q=80&w=800&auto=format&fit=crop');background-size:cover;border-radius:10px;box-shadow:inset 0 -40px 60px rgba(0,0,0,0.4)}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px;margin-top:12px}
/* Episodes grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.episode{
display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
border:1px solid rgba(255,255,255,0.02)
}
.thumb{width:84px;height:84px;border-radius:8px;flex:0 0 84px;background-size:cover}
.episode h3{margin:0;font-size:16px}
.ep-meta{color:var(--muted);font-size:13px;margin:6px 0}
audio{width:100%; margin-top:8px; outline:none}
/* Events & booking */
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:18px}
@media (max-width:880px){.two-col{grid-template-columns:1fr}}
.event{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border:1px solid rgba(255,255,255,0.02); margin-bottom:10px}
form.subscribe{display:flex;gap:8px}
input, textarea, select{background:transparent;color:#eaf3ff;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;width:100%}
footer{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.small{font-size:13px}
/* utility */
.muted{color:var(--muted)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);font-size:13px}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo" aria-hidden="true">Z</div>
<div>
<div class="muted small">The Z Spot Presents</div>
<div style="font-weight:700">Your Show Title</div>
</div>
<nav aria-label="Main Navigation">
<a class="navlink" href="#episodes">Episodes</a>
<a class="navlink" href="#about">About</a>
<a class="navlink" href="#events">Events</a>
<a class="navlink" href="#booking">Booking</a>
</nav>
</header>
<section class="hero">
<div class="card">
<h1>Your Show — Short catchy subtitle here</h1>
<p class="lead">A quick 1–2 line description: what the show is about, vibe (funny, cheeky, raw), and the rhythm (weekly, biweekly).</p>
<div class="meta">
<span class="pill">New episode every Tuesday</span>
<span class="muted"> · </span>
<span class="muted">Hosted by <strong>Zaria Linton</strong></span>
</div>
<div style="margin-top:14px" class="cta">
<a class="btn" href="#episodes">Listen Now</a>
<a class="btn ghost" href="#subscribe">Subscribe</a>
</div>
<!-- featured episode -->
<div style="margin-top:18px">
<div class="muted small">Featured episode</div>
<div style="margin-top:8px">
<div style="font-weight:700">Episode 27 — Finding the Z</div>
<div class="muted small">with Guest Name • 42 min</div>
<!-- native audio player: replace src with your mp3 -->
<audio controls preload="none" aria-label="Featured episode audio player">
<source src="https://cdn.simplecast.com/audio/example-episode.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
<aside class="card hero-right" style="padding:14px;">
<div class="hero-art" role="img" aria-label="Show artwork"></div>
<div style="margin-top:12px">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<div style="font-weight:700">What's new</div>
<div class="muted small">Latest news, collaborations, tour info</div>
</div>
<div class="muted small">Nov 21, 2025</div>
</div>
<div style="margin-top:12px">
<a class="btn" href="#events">See Tour Dates</a>
</div>
</div>
</aside>
</section>
<!-- Episodes -->
<section id="episodes" style="margin-top:12px">
<div style="display:flex;justify-content:space-between;align-items:end;margin-bottom:12px">
<div>
<h2 style="margin:0">Episodes</h2>
<div class="muted small">Browse recent episodes — click play to stream.</div>
</div>
<div class="muted small">Showing latest 9</div>
</div>
<div class="grid" role="list">
<!-- Episode item (duplicate/replace as needed) -->
<article class="episode card" role="listitem" aria-labelledby="ep1-title">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=400&auto=format&fit=crop');"></div>
<div style="flex:1">
<h3 id="ep1-title">Episode 27 — Finding the Z</h3>
<div class="ep-meta">Guest: Guest Name • 42 min • Released Nov 14, 2025</div>
<audio controls preload="none" aria-label="Episode 27 player">
<source src="https://cdn.simplecast.com/audio/example-episode.mp3" type="audio/mpeg">
</audio>
</div>
</article>
<article class="episode card" role="listitem" aria-labelledby="ep2-title">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop');"></div>
<div style="flex:1">
<h3 id="ep2-title">Episode 26 — Not Your Average Sex Ed</h3>
<div class="ep-meta">Guest: Expert Name • 36 min • Released Nov 7, 2025</div>
<audio controls preload="none">
<source src="https://cdn.simplecast.com/audio/example-episode-26.mp3" type="audio/mpeg">
</audio>
</div>
</article>
<!-- add more episodes here -->
<article class="episode card" role="listitem">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop');"></div>
<div style="flex:1">
<h3>Episode 25 — Let's Get Awkward</h3>
<div class="ep-meta">Solo • 28 min • Released Oct 31, 2025</div>
<audio controls preload="none">
<source src="https://cdn.simplecast.com/audio/example-episode-25.mp3" type="audio/mpeg">
</audio>
</div>
</article>
<!-- placeholders -->
<article class="episode card" role="listitem">
<div class="thumb" style="background:#223344;display:flex;align-items:center;justify-content:center;color:var(--muted)">Art</div>
<div style="flex:1">
<h3>Episode 24 — Past Ep</h3>
<div class="ep-meta">Guest • 30 min • Sept 2025</div>
<audio controls preload="none">
<!-- replace with audio source -->
</audio>
</div>
</article>
<article class="episode card" role="listitem">
<div class="thumb" style="background:#223344;display:flex;align-items:center;justify-content:center;color:var(--muted)">Art</div>
<div style="flex:1">
<h3>Episode 23 — Deep Dive</h3>
<div class="ep-meta">Guest • 50 min • Aug 2025</div>
<audio controls preload="none"></audio>
</div>
</article>
<article class="episode card" role="listitem">
<div class="thumb" style="background:#223344;display:flex;align-items:center;justify-content:center;color:var(--muted)">Art</div>
<div style="flex:1">
<h3>Episode 22 — Roundtable</h3>
<div class="ep-meta">Panel • 62 min • Jul 2025</div>
<audio controls preload="none"></audio>
</div>
</article>
<article class="episode card" role="listitem">
<div class="thumb" style="background:#223344;display:flex;align-items:center;justify-content:center;color:var(--muted)">Art</div>
<div style="flex:1">
<h3>Episode 21 — Listener Qs</h3>
<div class="ep-meta">Q&A • 24 min • Jun 2025</div>
<audio controls preload="none"></audio>
</div>
</article>
<article class="episode card" role="listitem">
<div class="thumb" style="background:#223344;display:flex;align-items:center;justify-content:center;color:var(--muted)">Art</div>
<div style="flex:1">
<h3>Episode 20 — Origins</h3>
<div class="ep-meta">Solo • 18 min • May 2025</div>
<audio controls preload="none"></audio>
</div>
</article>
</div>
</section>
<!-- About / Host -->
<section id="about" style="margin-top:18px">
<div class="card">
<h2 style="margin-top:0">About the Show & Host</h2>
<p class="muted">A little blurb about the show's mission — drop the old, basic teachings and bring something inclusive, raw, and fun. Mention style, tone, and what listeners can expect.</p>
<div style="display:flex;gap:16px;margin-top:14px;align-items:center">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" alt="Host portrait" style="width:110px;height:110px;border-radius:12px;object-fit:cover;border:3px solid rgba(255,255,255,0.02)">
<div>
<div style="font-weight:700">Zaria Linton</div>
<div class="muted small">Host, Producer, Chief Awkward-ness Wrangler</div>
<p class="muted" style="margin-top:8px">Short bio: who you are, why you started the show, notable guests or moments, and where people can follow you on socials.</p>
</div>
</div>
</div>
</section>
<!-- Events + Booking -->
<section id="events" style="margin-top:18px">
<div class="two-col">
<div class="card">
<h3 style="margin-top:0">Upcoming Events</h3>
<div class="event">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<div style="font-weight:700">Live Recording — Washington DC</div>
<div class="muted small">With special guest • Q&A after the show</div>
</div>
<div class="muted small">Dec 12, 2025</div>
</div>
<div style="margin-top:8px"><a class="btn" href="#booking">Book Tickets</a></div>
</div>
<div class="event">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<div style="font-weight:700">Panel: Human Sexuality & Media</div>
<div class="muted small">Roundtable with experts</div>
</div>
<div class="muted small">Jan 14, 2026</div>
</div>
<div style="margin-top:8px"><a class="btn ghost" href="#booking">Inquire</a></div>
</div>
</div>
<aside id="booking" class="card">
<h3 style="margin-top:0">Press & Booking</h3>
<p class="muted small">For press inquiries, interviews, or bookings, email: <strong><a href="mailto:booking@yoursite.com" style="color:#fff;text-decoration:underline">booking@yoursite.com</a></strong></p>
<div style="margin-top:12px">
<div class="muted small">One-sheet / Press Kit</div>
<div style="margin-top:8px">
<a class="btn" href="#" download>Download Press Kit (PDF)</a>
</div>
</div>
<div style="margin-top:14px">
<div class="muted small">Booking form</div>
<form style="margin-top:8px" onsubmit="event.preventDefault(); alert('Booking inquiry sent (stub). Replace this with server endpoint or mailto handler.');">
<input type="text" name="name" placeholder="Your name" required>
<input type="email" name="email" placeholder="Email" required style="margin-top:8px">
<textarea name="message" placeholder="Tell us about the event (date, location)..." rows="4" style="margin-top:8px"></textarea>
<button class="btn" style="margin-top:8px" type="submit">Send inquiry</button>
</form>
</div>
</aside>
</div>
</section>
<!-- Subscribe -->
<section id="subscribe" style="margin-top:18px">
<div class="card">
<h3 style="margin-top:0">Subscribe</h3>
<p class="muted small">Get new episodes in your inbox. Replace this form action with your email provider or Mailchimp endpoint.</p>
<form class="subscribe" onsubmit="event.preventDefault(); alert('Thanks — subscribe endpoint not configured in this template.');">
<input aria-label="Email address" type="email" placeholder="Your email address" required>
<button class="btn" type="submit">Subscribe</button>
</form>
</div>
</section>
<footer>
<div class="small">© <span id="year"></span> Your Show • Made with ❤</div>
<div class="small muted">Follow: <a href="#" class="muted" style="text-decoration:underline">Instagram</a> · <a class="muted" href="#" style="text-decoration:underline">Twitter</a> · <a class="muted" href="#" style="text-decoration:underline">YouTube</a></div>
</footer>
</div>
<script>
// small logic: update year and lightweight accessibility helpers
document.getElementById('year').textContent = new Date().getFullYear();
// Example: lightweight keyboard focus for audio players (optional)
document.querySelectorAll('audio').forEach(a => {
a.addEventListener('play', (e) => {
// pause other audio players
document.querySelectorAll('audio').forEach(other => { if (other !== e.target) other.pause(); });
});
});
</script>
</body>
</html>
The Z-Spot 