Pages Medium
Streaming — Kids Streaming Landing
A bright, playful marketing landing page for a fictional kids streaming service. Floating characters and a glowing screen ring anchor the hero, while age-tab tiles swap age-appropriate show cards with quality and edu badges. A live parental-controls panel offers a screen-time slider and PIN toggles, plus educational-value cards, a monthly/yearly pricing switch with three family plans, parent testimonials, an email-capture CTA, and a full footer. Bouncy micro-interactions, scroll reveals, toasts, and a mobile menu throughout.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Kids palette — bright purple / sky / sunshine */
--bg: #f7f3ff;
--bg-2: #efe6ff;
--surface: #ffffff;
--surface-2: #faf6ff;
--ink: #2b1d52;
--ink-2: #5a4b86;
--muted: #8a7fb0;
--line: rgba(108, 74, 211, 0.14);
--line-2: rgba(108, 74, 211, 0.24);
--purple: #8b46ff;
--purple-deep: #6a2fd6;
--sky: #34b8ff;
--sun: #ffc23d;
--mint: #3fd1a8;
--pink: #ff7ac6;
--brand: var(--purple);
--r-sm: 12px;
--r-md: 18px;
--r-lg: 28px;
--r-pill: 999px;
--shadow-sm: 0 6px 18px rgba(108, 74, 211, 0.12);
--shadow-md: 0 16px 40px rgba(108, 74, 211, 0.18);
--shadow-glow: 0 18px 44px rgba(139, 70, 255, 0.34);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Nunito", system-ui, -apple-system, sans-serif;
background:
radial-gradient(900px 500px at 10% -5%, #ffe9f7 0%, transparent 55%),
radial-gradient(900px 600px at 95% 0%, #e3f4ff 0%, transparent 55%),
var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .brand__name {
font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
font-weight: 800;
line-height: 1.1;
margin: 0;
color: var(--ink);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.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;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--purple); color: #fff; padding: 10px 16px; border-radius: var(--r-pill);
transition: top .2s ease; font-weight: 700;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
/* ---------- buttons ---------- */
.btn {
font-family: "Baloo 2", sans-serif;
font-weight: 700;
font-size: .98rem;
border: 0;
border-radius: var(--r-pill);
padding: .7em 1.3em;
cursor: pointer;
display: inline-flex; align-items: center; gap: .5em; justify-content: center;
transition: transform .18s var(--ease-bounce), box-shadow .2s ease, background .2s ease;
color: var(--ink);
}
.btn:active { transform: scale(.95); }
.btn--lg { padding: .85em 1.7em; font-size: 1.08rem; }
.btn--block { width: 100%; }
.btn--primary {
background: linear-gradient(135deg, var(--purple), var(--pink));
color: #fff; box-shadow: var(--shadow-glow);
}
.btn--primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 52px rgba(139,70,255,.46); }
.btn--soft { background: var(--bg-2); color: var(--purple-deep); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn--soft:hover { transform: translateY(-2px); background: #e6d8ff; }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-2); }
.bounce-hover:hover { animation: wobble .6s var(--ease-bounce); }
.play { font-size: .8em; }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.is-stuck {
background: rgba(255,255,255,.82);
backdrop-filter: blur(12px);
box-shadow: 0 6px 24px rgba(108,74,211,.12);
}
.nav__inner {
max-width: 1180px; margin: 0 auto; padding: 14px 22px;
display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__name { font-size: 1.4rem; color: var(--purple-deep); letter-spacing: -.01em; }
.brand__mark { position: relative; width: 36px; height: 36px; display: inline-block; }
.blob { position: absolute; border-radius: 50%; }
.b1 { width: 22px; height: 22px; background: var(--purple); left: 0; top: 6px; }
.b2 { width: 16px; height: 16px; background: var(--sun); right: 0; top: 0; }
.b3 { width: 14px; height: 14px; background: var(--sky); right: 4px; bottom: 0; }
.brand__mark { animation: floaty 4s ease-in-out infinite; }
.nav__links { display: flex; gap: 6px; margin-left: 8px; }
.nav__links a {
padding: 8px 14px; border-radius: var(--r-pill); font-weight: 700; color: var(--ink-2);
transition: background .2s ease, color .2s ease, transform .2s var(--ease-bounce);
}
.nav__links a:hover { background: var(--bg-2); color: var(--purple-deep); transform: translateY(-2px); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__toggle { display: none; background: var(--bg-2); border: 0; border-radius: 12px; width: 42px; height: 42px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.nav__toggle span { width: 20px; height: 2.5px; background: var(--purple-deep); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
display: flex; flex-direction: column; gap: 6px; padding: 10px 22px 20px;
background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
border-top: 1px solid var(--line);
}
.mobile-menu a { padding: 12px 14px; border-radius: 12px; font-weight: 700; color: var(--ink-2); }
.mobile-menu a:hover { background: var(--bg-2); }
.mobile-menu .btn { margin-top: 8px; }
/* ---------- sections ---------- */
.section { max-width: 1180px; margin: 0 auto; padding: 78px 22px; }
.section__head { text-align: center; max-width: 620px; margin: 0 auto 38px; }
.section__head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.section__head p { color: var(--ink-2); font-size: 1.08rem; margin: 12px 0 0; }
.pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(139,70,255,.12); color: var(--purple-deep);
font-weight: 800; font-size: .82rem; padding: 7px 14px; border-radius: var(--r-pill);
letter-spacing: .02em;
}
.pill--alt { background: rgba(52,184,255,.16); color: #1f7fb8; }
/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.floaty { position: absolute; font-size: 2rem; opacity: .8; animation: floaty 6s ease-in-out infinite; }
.f1 { left: 6%; top: 22%; animation-delay: .2s; }
.f2 { right: 9%; top: 16%; font-size: 2.6rem; animation-delay: 1s; }
.f3 { left: 16%; bottom: 18%; animation-delay: 1.8s; }
.f4 { right: 18%; bottom: 14%; font-size: 1.7rem; animation-delay: .6s; }
.f5 { right: 40%; top: 8%; animation-delay: 2.4s; }
.hero__inner {
max-width: 1180px; margin: 0 auto; padding: 56px 22px 70px;
display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.hero__title { font-size: clamp(2.2rem, 6vw, 3.9rem); letter-spacing: -.02em; }
.pop {
background: linear-gradient(120deg, var(--purple), var(--sky), var(--sun));
-webkit-background-clip: text; background-clip: text; color: transparent;
display: inline-block;
}
.hero__sub { font-size: 1.18rem; color: var(--ink-2); max-width: 30ch; margin: 18px 0 26px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row { list-style: none; display: flex; gap: 26px; padding: 0; margin: 30px 0 0; flex-wrap: wrap; }
.trust-row li { color: var(--muted); font-weight: 600; font-size: .92rem; }
.trust-row strong { display: block; color: var(--purple-deep); font-family: "Baloo 2"; font-size: 1.5rem; }
/* hero characters */
.hero__art { position: relative; height: 380px; }
.screen-ring {
position: absolute; inset: 8% 8% 8% 8%;
border-radius: 50%;
background:
radial-gradient(circle at 50% 40%, rgba(255,255,255,.7), transparent 60%),
conic-gradient(from 0deg, var(--purple), var(--sky), var(--sun), var(--pink), var(--purple));
filter: blur(2px); opacity: .55; z-index: 0;
animation: spin 22s linear infinite;
}
.char {
position: absolute; z-index: 2; border-radius: 38% 42% 40% 40%;
box-shadow: var(--shadow-md);
animation: bob 4s ease-in-out infinite;
}
.char .face { position: absolute; inset: 0; }
.char .eye { position: absolute; width: 12%; height: 12%; background: #2b1d52; border-radius: 50%; top: 38%; }
.char .eye:nth-child(1) { left: 30%; }
.char .eye:nth-child(2) { right: 30%; }
.char .smile { position: absolute; left: 34%; right: 34%; top: 54%; height: 18%; border: 4px solid #2b1d52; border-top: 0; border-radius: 0 0 40px 40px; }
.char--star { width: 150px; height: 150px; left: 50%; top: 8%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #ffd870, var(--sun)); animation-delay: 0s; }
.char--bot { width: 118px; height: 118px; left: 10%; bottom: 6%; background: radial-gradient(circle at 35% 30%, #7ad3ff, var(--sky)); border-radius: 30%; animation-delay: 1s; }
.char--bot .face--bot .smile { border-radius: 0 0 14px 14px; }
.char--cloud { width: 120px; height: 120px; right: 8%; bottom: 12%; background: radial-gradient(circle at 35% 30%, #f3a8e0, var(--pink)); animation-delay: 2s; }
/* ---------- age tiles ---------- */
.age-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.age-tab {
font-family: "Baloo 2"; font-weight: 700; font-size: 1rem;
border: 0; cursor: pointer; padding: 11px 20px; border-radius: var(--r-pill);
background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm);
transition: transform .2s var(--ease-bounce), background .2s ease, color .2s ease;
}
.age-tab:hover { transform: translateY(-3px); }
.age-tab.is-active { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; box-shadow: var(--shadow-glow); }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.show-card {
position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line);
transition: transform .25s var(--ease-bounce), box-shadow .25s ease;
display: flex; flex-direction: column;
animation: pop-in .4s var(--ease-bounce) both;
}
.show-card:hover, .show-card:focus-visible { transform: translateY(-6px) scale(1.025); box-shadow: var(--shadow-glow); }
.show-card__art {
height: 130px; display: grid; place-items: center; font-size: 3rem; position: relative;
}
.show-card__badge {
position: absolute; top: 10px; left: 10px;
background: rgba(255,255,255,.92); color: var(--purple-deep);
font-size: .68rem; font-weight: 800; padding: 4px 9px; border-radius: var(--r-pill);
text-transform: uppercase; letter-spacing: .04em;
}
.show-card__q {
position: absolute; top: 10px; right: 10px;
background: var(--ink); color: #fff; font-size: .62rem; font-weight: 800;
padding: 3px 7px; border-radius: 6px;
}
.show-card__body { padding: 12px 14px 16px; }
.show-card__title { font-size: 1.02rem; }
.show-card__meta { color: var(--muted); font-size: .82rem; margin-top: 3px; font-weight: 600; }
/* ---------- safe ---------- */
.safe { background: linear-gradient(180deg, transparent, rgba(52,184,255,.06)); border-radius: var(--r-lg); }
.safe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.feature-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.feature-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); font-size: 1.02rem; }
.fi { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg-2); font-size: 1.1rem; flex: 0 0 auto; }
.control-card {
background: var(--surface); border-radius: var(--r-lg); padding: 22px;
box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.control-card__top { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.control-card__top .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.control-card__top .dot:nth-child(1) { background: var(--pink); }
.control-card__top .dot:nth-child(2) { background: var(--sun); }
.control-card__top .dot:nth-child(3) { background: var(--mint); }
.control-card__title { margin-left: auto; font-weight: 800; font-family: "Baloo 2"; color: var(--purple-deep); }
.control-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-weight: 700; }
.control-row output { color: var(--purple-deep); font-family: "Baloo 2"; font-size: 1.1rem; }
.slider {
width: 100%; height: 8px; border-radius: var(--r-pill); margin: 0 0 22px;
-webkit-appearance: none; appearance: none;
background: linear-gradient(90deg, var(--purple) var(--fill, 33%), var(--bg-2) var(--fill, 33%));
}
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--purple); cursor: pointer; box-shadow: var(--shadow-sm); }
.slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--purple); cursor: pointer; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.control-card__note { color: var(--muted); font-size: .85rem; margin: 12px 0 0; }
.switch {
width: 50px; height: 28px; border-radius: var(--r-pill); border: 0; cursor: pointer;
background: var(--line-2); position: relative; flex: 0 0 auto; transition: background .25s ease;
}
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .25s var(--ease-bounce); }
.switch.is-on { background: var(--purple); }
.switch.is-on span { transform: translateX(22px); }
/* ---------- learn ---------- */
.learn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.learn-card {
background: var(--surface); border-radius: var(--r-md); padding: 26px 22px;
box-shadow: var(--shadow-sm); border: 1px solid var(--line); text-align: center;
border-top: 5px solid var(--c);
transition: transform .25s var(--ease-bounce), box-shadow .25s ease;
}
.learn-card:hover { transform: translateY(-7px) rotate(-1deg); box-shadow: var(--shadow-md); }
.learn-ico {
display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px;
border-radius: 20px; font-size: 1.9rem;
background: color-mix(in srgb, var(--c) 16%, #fff);
}
.learn-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.learn-card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
/* ---------- pricing ---------- */
.bill-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 36px; }
.bill-label { font-weight: 700; color: var(--muted); }
.bill-label.is-active { color: var(--purple-deep); }
.switch--bill { background: var(--line-2); }
.switch--bill.is-on { background: var(--sky); }
.save-tag { background: var(--mint); color: #0b3d2e; font-style: normal; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: var(--r-pill); margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
background: var(--surface); border-radius: var(--r-lg); padding: 28px 24px;
box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: relative;
display: flex; flex-direction: column;
transition: transform .25s var(--ease-bounce), box-shadow .25s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan--featured { border: 2px solid var(--purple); box-shadow: var(--shadow-glow); transform: scale(1.03); }
.plan--featured:hover { transform: scale(1.03) translateY(-6px); }
.plan__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-weight: 800; font-size: .78rem; padding: 6px 16px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-sm); }
.plan h3 { font-size: 1.4rem; }
.plan__desc { color: var(--ink-2); font-size: .94rem; margin: 6px 0 14px; }
.plan__price { display: flex; align-items: baseline; gap: 2px; margin: 0 0 18px; font-family: "Baloo 2"; }
.plan__price .cur { font-size: 1.3rem; color: var(--purple-deep); }
.plan__price .amt { font-size: 2.8rem; font-weight: 800; color: var(--ink); }
.plan__price .per { color: var(--muted); font-weight: 700; margin-left: 4px; }
.plan__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; flex: 1; }
.plan__list li { padding-left: 26px; position: relative; color: var(--ink-2); font-weight: 600; font-size: .96rem; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--mint); font-weight: 900; }
/* ---------- quotes ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { margin: 0; background: var(--surface); border-radius: var(--r-md); padding: 26px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .25s var(--ease-bounce); }
.quote:hover { transform: translateY(-5px); }
.stars { color: var(--sun); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px; }
.quote blockquote { margin: 0 0 18px; font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.quote figcaption { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 700; font-size: .92rem; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--a); color: #fff; font-family: "Baloo 2"; font-weight: 800; }
/* ---------- cta band ---------- */
.cta-band { max-width: 1100px; margin: 20px auto 70px; padding: 0 22px; }
.cta-band__inner {
background: linear-gradient(135deg, var(--purple), var(--sky));
border-radius: var(--r-lg); padding: 52px 28px; text-align: center; color: #fff;
box-shadow: var(--shadow-glow); position: relative; overflow: hidden;
}
.cta-band__inner::after { content: "🎈🚀⭐🌈"; position: absolute; inset: 0; font-size: 4rem; opacity: .12; display: grid; place-items: center; letter-spacing: 30px; pointer-events: none; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.7rem); position: relative; }
.cta-band p { color: rgba(255,255,255,.92); font-size: 1.1rem; margin: 12px 0 26px; position: relative; }
.cta-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-form input {
flex: 1; min-width: 240px; max-width: 360px; border: 0; border-radius: var(--r-pill);
padding: .85em 1.3em; font-size: 1rem; font-family: "Nunito"; font-weight: 600;
}
.cta-form input:focus-visible { outline: 3px solid var(--sun); }
.cta-band .btn--primary { background: var(--sun); color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.cta-band .btn--primary:hover { background: #ffce5e; }
.cta-fine { font-size: .85rem !important; margin-top: 16px !important; }
/* ---------- footer ---------- */
.footer { background: #1c1336; color: #cfc4ec; margin-top: 20px; }
.footer__inner { max-width: 1180px; margin: 0 auto; padding: 54px 22px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer__brand .brand__name { color: #fff; font-size: 1.6rem; }
.footer__brand p { color: #a99fd0; max-width: 28ch; margin: 10px 0 0; }
.footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer__col a { display: block; color: #b3a8d8; padding: 5px 0; transition: color .2s ease; }
.footer__col a:hover { color: var(--sun); }
.footer__bar { max-width: 1180px; margin: 0 auto; padding: 18px 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: #9b91c4; }
.footer__legal a:hover { color: var(--sun); }
/* ---------- toast ---------- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 24px);
background: var(--ink); color: #fff; font-weight: 700; padding: 13px 22px; border-radius: var(--r-pill);
box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 300;
transition: opacity .25s ease, transform .35s var(--ease-bounce); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s var(--ease-bounce); }
.reveal.in { opacity: 1; transform: none; }
/* ---------- animations ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(2deg); } }
.char--star { animation-name: bob; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.04); } }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__art { height: 300px; order: -1; }
.hero__sub { max-width: none; }
.safe__grid { grid-template-columns: 1fr; }
.card-grid, .learn-grid { grid-template-columns: repeat(2, 1fr); }
.plans, .quote-grid { grid-template-columns: 1fr; }
.plan--featured { transform: none; }
.plan--featured:hover { transform: translateY(-6px); }
.footer__inner { grid-template-columns: 1fr 1fr; }
.nav__links { display: none; }
.nav__toggle { display: flex; }
.signin-hide #signinBtn { display: none; }
}
@media (max-width: 520px) {
.section { padding: 54px 18px; }
#signinBtn { display: none; }
.card-grid, .learn-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-row { gap: 18px; }
.footer__inner { grid-template-columns: 1fr 1fr; }
.cta-form input { min-width: 0; }
.hero__cta .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html { scroll-behavior: auto; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---------- sticky nav ---------- */
var nav = document.getElementById("nav");
function onScroll() {
if (window.scrollY > 24) nav.classList.add("is-stuck");
else nav.classList.remove("is-stuck");
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- mobile menu ---------- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("mobileMenu");
function setMenu(open) {
toggle.setAttribute("aria-expanded", String(open));
menu.hidden = !open;
}
toggle.addEventListener("click", function () {
setMenu(toggle.getAttribute("aria-expanded") !== "true");
});
menu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () { setMenu(false); });
});
/* ---------- scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("in"); });
}
/* ---------- age-tab show grids ---------- */
var SHOWS = {
toddler: [
{ t: "Hop & Bloom", m: "Songs · 5 min", b: "New", q: "HD", e: "🐰", c: "#ffe1f0" },
{ t: "Twinkle Town", m: "Lullabies · 6 min", b: "Calm", q: "HD", e: "🌙", c: "#e6e1ff" },
{ t: "Baby Beats", m: "Music · 4 min", b: "Popular", q: "HD", e: "🥁", c: "#e1f4ff" },
{ t: "Color Pals", m: "Learning · 5 min", b: "Edu", q: "HD", e: "🎨", c: "#fff3d6" }
],
little: [
{ t: "Captain Comet", m: "Adventure · 11 min", b: "New", q: "4K", e: "🚀", c: "#e1f0ff" },
{ t: "The Giggle Garden", m: "Comedy · 12 min", b: "Top 10", q: "4K", e: "🌻", c: "#fff3d6" },
{ t: "Mira & the Map", m: "Explore · 13 min", b: "Edu", q: "HD", e: "🗺️", c: "#e7ffef" },
{ t: "Dino Dance Club", m: "Music · 9 min", b: "Popular", q: "4K", e: "🦕", c: "#ffe1f0" }
],
big: [
{ t: "Robo Rangers", m: "Action · 18 min", b: "New", q: "4K", e: "🤖", c: "#e1f4ff" },
{ t: "Mystery Mansion", m: "Puzzle · 20 min", b: "Top 10", q: "4K", e: "🔍", c: "#ece1ff" },
{ t: "Code Quest", m: "Learning · 16 min", b: "Edu", q: "4K", e: "💡", c: "#fff3d6" },
{ t: "Ocean Outlaws", m: "Adventure · 19 min", b: "Popular", q: "4K", e: "🐙", c: "#e7ffef" }
]
};
var grid = document.getElementById("showGrid");
function renderShows(age) {
var list = SHOWS[age] || [];
grid.innerHTML = "";
list.forEach(function (s, i) {
var card = document.createElement("button");
card.type = "button";
card.className = "show-card";
card.style.animationDelay = (i * 0.06) + "s";
card.innerHTML =
'<div class="show-card__art" style="background:' + s.c + '">' +
'<span class="show-card__badge">' + s.b + "</span>" +
'<span class="show-card__q">' + s.q + "</span>" +
"<span>" + s.e + "</span>" +
"</div>" +
'<div class="show-card__body">' +
'<div class="show-card__title">' + s.t + "</div>" +
'<div class="show-card__meta">' + s.m + "</div>" +
"</div>";
card.addEventListener("click", function () {
toast("▶ Playing “" + s.t + "” — enjoy!");
});
grid.appendChild(card);
});
}
var tabs = document.querySelectorAll(".age-tab");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
tabs.forEach(function (t) {
t.classList.remove("is-active");
t.setAttribute("aria-selected", "false");
});
tab.classList.add("is-active");
tab.setAttribute("aria-selected", "true");
grid.setAttribute("aria-labelledby", tab.id);
renderShows(tab.dataset.age);
});
});
renderShows("toddler");
/* ---------- parental controls ---------- */
var limit = document.getElementById("limit");
var limitOut = document.getElementById("limitOut");
function syncLimit() {
var v = +limit.value;
limitOut.textContent = v >= 120 ? "No limit" : v + " min";
var pct = ((v - limit.min) / (limit.max - limit.min)) * 100;
limit.style.setProperty("--fill", pct + "%");
}
limit.addEventListener("input", syncLimit);
limit.addEventListener("change", function () {
toast("Screen-time limit saved: " + limitOut.textContent);
});
syncLimit();
document.querySelectorAll(".switch").forEach(function (sw) {
if (sw.id === "billSwitch") return; // handled separately
sw.addEventListener("click", function () {
var on = !sw.classList.contains("is-on");
sw.classList.toggle("is-on", on);
sw.setAttribute("aria-checked", String(on));
});
});
/* ---------- pricing toggle ---------- */
var billSwitch = document.getElementById("billSwitch");
var lblMonthly = document.getElementById("lblMonthly");
var lblYearly = document.getElementById("lblYearly");
var amts = document.querySelectorAll(".plan__price .amt");
var pers = document.querySelectorAll(".plan__price .per");
function setBilling(yearly) {
billSwitch.classList.toggle("is-on", yearly);
billSwitch.setAttribute("aria-checked", String(yearly));
lblMonthly.classList.toggle("is-active", !yearly);
lblYearly.classList.toggle("is-active", yearly);
amts.forEach(function (a) {
a.textContent = yearly ? a.dataset.y : a.dataset.m;
});
pers.forEach(function (p) {
p.textContent = yearly ? "/mo billed yearly" : "/mo";
});
}
billSwitch.addEventListener("click", function () {
setBilling(!billSwitch.classList.contains("is-on"));
});
setBilling(false);
document.querySelectorAll("[data-plan]").forEach(function (btn) {
btn.addEventListener("click", function () {
toast("🎉 " + btn.dataset.plan + " plan selected — 30 days free!");
});
});
/* ---------- generic CTAs ---------- */
["heroCta", "navCta", "mobileCta", "signinBtn", "safeCta", "trailerBtn"].forEach(function (id) {
var el = document.getElementById(id);
if (!el) return;
el.addEventListener("click", function () {
if (id === "trailerBtn") { toast("🎬 Loading the PixiePlay trailer…"); return; }
if (id === "signinBtn") { toast("Sign in is just for show here ✨"); return; }
if (id === "safeCta") {
document.getElementById("safe").scrollIntoView({ behavior: "smooth" });
return;
}
toast("✨ Your 30-day free trial is ready to go!");
});
});
/* ---------- email capture ---------- */
var form = document.getElementById("ctaForm");
var email = document.getElementById("email");
var ctaMsg = document.getElementById("ctaMsg");
form.addEventListener("submit", function (e) {
e.preventDefault();
var v = email.value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
if (!ok) {
ctaMsg.textContent = "Oops! Please enter a valid email address.";
ctaMsg.style.color = "#ffe08a";
email.focus();
return;
}
ctaMsg.textContent = "Yay! Check " + v + " for your welcome link 🎈";
ctaMsg.style.color = "#fff";
email.value = "";
toast("🎉 Welcome to PixiePlay! Trial activated.");
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PixiePlay — Streaming Made for Kids</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=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="nav">
<div class="nav__inner">
<a class="brand" href="#top" aria-label="PixiePlay home">
<span class="brand__mark" aria-hidden="true">
<span class="blob b1"></span><span class="blob b2"></span><span class="blob b3"></span>
</span>
<span class="brand__name">PixiePlay</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#shows">Shows</a>
<a href="#safe">Parents</a>
<a href="#learn">Learning</a>
<a href="#pricing">Plans</a>
</nav>
<div class="nav__actions">
<button class="btn btn--ghost" id="signinBtn" type="button">Sign in</button>
<button class="btn btn--primary" id="navCta" type="button">Start free</button>
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span><span></span><span></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu" hidden>
<a href="#shows">Shows</a>
<a href="#safe">Parents</a>
<a href="#learn">Learning</a>
<a href="#pricing">Plans</a>
<button class="btn btn--primary btn--block" id="mobileCta" type="button">Start free trial</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" id="top">
<div class="hero__bg" aria-hidden="true">
<span class="floaty f1">⭐</span>
<span class="floaty f2">🚀</span>
<span class="floaty f3">🌈</span>
<span class="floaty f4">🎈</span>
<span class="floaty f5">🪐</span>
</div>
<div class="hero__inner">
<div class="hero__copy reveal">
<span class="pill">No ads · 100% kid-safe</span>
<h1 class="hero__title">Where little imaginations <span class="pop">play big</span></h1>
<p class="hero__sub">Hundreds of shows, songs and games made for ages 2–9 — picked by teachers, loved by kids, and fully controlled by you.</p>
<div class="hero__cta">
<button class="btn btn--primary btn--lg bounce-hover" id="heroCta" type="button">Start 30-day free trial</button>
<button class="btn btn--soft btn--lg" id="trailerBtn" type="button">
<span class="play" aria-hidden="true">▶</span> Watch the trailer
</button>
</div>
<ul class="trust-row" aria-label="Highlights">
<li><strong>4,200+</strong> safe episodes</li>
<li><strong>0</strong> ads, ever</li>
<li><strong>8M+</strong> happy families</li>
</ul>
</div>
<div class="hero__art reveal" aria-hidden="true">
<div class="char char--star">
<div class="face"><span class="eye"></span><span class="eye"></span><span class="smile"></span></div>
</div>
<div class="char char--bot">
<div class="face face--bot"><span class="eye"></span><span class="eye"></span><span class="smile"></span></div>
</div>
<div class="char char--cloud">
<div class="face"><span class="eye"></span><span class="eye"></span><span class="smile"></span></div>
</div>
<div class="screen-ring"></div>
</div>
</div>
</section>
<!-- AGE TILES -->
<section class="section shows" id="shows" aria-labelledby="showsTitle">
<div class="section__head reveal">
<h2 id="showsTitle">Just right for every age</h2>
<p>Tap an age to see shows picked for that stage of growing up.</p>
</div>
<div class="age-tabs reveal" role="tablist" aria-label="Choose an age group">
<button class="age-tab is-active" role="tab" aria-selected="true" data-age="toddler" id="tab-toddler">Toddlers · 2–3</button>
<button class="age-tab" role="tab" aria-selected="false" data-age="little" id="tab-little">Littles · 4–6</button>
<button class="age-tab" role="tab" aria-selected="false" data-age="big" id="tab-big">Big kids · 7–9</button>
</div>
<div class="card-grid reveal" id="showGrid" role="tabpanel" aria-labelledby="tab-toddler"></div>
</section>
<!-- SAFE / PARENTAL CONTROLS -->
<section class="section safe" id="safe" aria-labelledby="safeTitle">
<div class="safe__grid">
<div class="safe__copy reveal">
<span class="pill pill--alt">Parents in control</span>
<h2 id="safeTitle">You set the rules. We keep it safe.</h2>
<p>PixiePlay is built ad-free and walled off from the open internet. Set screen-time limits, lock profiles with a PIN, and approve every show before it plays.</p>
<ul class="feature-list">
<li><span class="fi" aria-hidden="true">🔒</span> PIN-locked parent zone & profile switching</li>
<li><span class="fi" aria-hidden="true">⏰</span> Daily screen-time limits with gentle wind-downs</li>
<li><span class="fi" aria-hidden="true">🚫</span> Zero ads, zero in-app purchases, no chat</li>
<li><span class="fi" aria-hidden="true">📊</span> Weekly watch reports sent to your inbox</li>
</ul>
<button class="btn btn--primary" id="safeCta" type="button">See parental controls</button>
</div>
<aside class="control-card reveal" aria-label="Parental controls preview">
<div class="control-card__top">
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
<span class="control-card__title">Parent Zone</span>
</div>
<div class="control-row">
<label for="limit">Daily screen time</label>
<output id="limitOut">45 min</output>
</div>
<input id="limit" class="slider" type="range" min="15" max="120" step="15" value="45" aria-label="Daily screen time minutes" />
<div class="toggle-row">
<span>Block scary themes</span>
<button class="switch is-on" id="sw1" role="switch" aria-checked="true" type="button"><span></span></button>
</div>
<div class="toggle-row">
<span>Require PIN to exit kids mode</span>
<button class="switch is-on" id="sw2" role="switch" aria-checked="true" type="button"><span></span></button>
</div>
<div class="toggle-row">
<span>Autoplay next episode</span>
<button class="switch" id="sw3" role="switch" aria-checked="false" type="button"><span></span></button>
</div>
<p class="control-card__note">Changes save instantly to every device.</p>
</aside>
</div>
</section>
<!-- LEARNING / EDUCATIONAL VALUE -->
<section class="section learn" id="learn" aria-labelledby="learnTitle">
<div class="section__head reveal">
<h2 id="learnTitle">Play that teaches</h2>
<p>Every PixiePlay show is reviewed by early-childhood educators for one of these learning goals.</p>
</div>
<div class="learn-grid">
<article class="learn-card reveal" style="--c:var(--purple)"><span class="learn-ico">🔤</span><h3>Early literacy</h3><p>Letters, sounds and first words through song and story.</p></article>
<article class="learn-card reveal" style="--c:var(--sky)"><span class="learn-ico">🔢</span><h3>Numbers & logic</h3><p>Counting, shapes and simple problem-solving puzzles.</p></article>
<article class="learn-card reveal" style="--c:var(--sun)"><span class="learn-ico">💛</span><h3>Kindness & feelings</h3><p>Sharing, empathy and naming big emotions out loud.</p></article>
<article class="learn-card reveal" style="--c:var(--mint)"><span class="learn-ico">🌍</span><h3>World & nature</h3><p>Animals, planets and how the great big world works.</p></article>
</div>
</section>
<!-- PRICING -->
<section class="section pricing" id="pricing" aria-labelledby="pricingTitle">
<div class="section__head reveal">
<h2 id="pricingTitle">One plan for the whole family</h2>
<p>Switch or cancel anytime. The first 30 days are on us.</p>
</div>
<div class="bill-toggle reveal">
<span class="bill-label is-active" id="lblMonthly">Monthly</span>
<button class="switch switch--bill" id="billSwitch" role="switch" aria-checked="false" type="button" aria-label="Toggle yearly billing"><span></span></button>
<span class="bill-label" id="lblYearly">Yearly <em class="save-tag">Save 25%</em></span>
</div>
<div class="plans">
<article class="plan reveal">
<h3>Single</h3>
<p class="plan__desc">For one little viewer.</p>
<p class="plan__price"><span class="cur">$</span><span class="amt" data-m="5.99" data-y="4.49">5.99</span><span class="per">/mo</span></p>
<ul class="plan__list">
<li>1 kid profile</li><li>Watch on 1 screen</li><li>HD streaming</li><li>Offline downloads</li>
</ul>
<button class="btn btn--soft btn--block" type="button" data-plan="Single">Choose Single</button>
</article>
<article class="plan plan--featured reveal">
<span class="plan__flag">Most loved</span>
<h3>Family</h3>
<p class="plan__desc">For the whole crew.</p>
<p class="plan__price"><span class="cur">$</span><span class="amt" data-m="9.99" data-y="7.49">9.99</span><span class="per">/mo</span></p>
<ul class="plan__list">
<li>Up to 6 kid profiles</li><li>Watch on 4 screens</li><li>4K Ultra HD</li><li>Offline downloads</li><li>Weekly parent reports</li>
</ul>
<button class="btn btn--primary btn--block bounce-hover" type="button" data-plan="Family">Choose Family</button>
</article>
<article class="plan reveal">
<h3>Learn+</h3>
<p class="plan__desc">Family plan plus learning games.</p>
<p class="plan__price"><span class="cur">$</span><span class="amt" data-m="13.99" data-y="10.49">13.99</span><span class="per">/mo</span></p>
<ul class="plan__list">
<li>Everything in Family</li><li>200+ learning games</li><li>Progress dashboard</li><li>Printable activity packs</li>
</ul>
<button class="btn btn--soft btn--block" type="button" data-plan="Learn+">Choose Learn+</button>
</article>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section quotes" aria-labelledby="quotesTitle">
<div class="section__head reveal">
<h2 id="quotesTitle">Loved by grown-ups too</h2>
<p>What parents say after the first month.</p>
</div>
<div class="quote-grid">
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"Finally a screen I don't have to hover over. The PIN lock and time limits give me real peace of mind."</blockquote>
<figcaption><span class="avatar" style="--a:var(--purple)">M</span> Maya R., mom of 2</figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"My 4-year-old learned her letters from the singalongs. No ads sneaking junk in — that's huge."</blockquote>
<figcaption><span class="avatar" style="--a:var(--sky)">D</span> Dev & Anika, parents</figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>"The weekly report is my favorite touch. I actually know what my kids are watching now."</blockquote>
<figcaption><span class="avatar" style="--a:var(--sun)">T</span> Theo L., dad of 3</figcaption>
</figure>
</div>
</section>
<!-- FINAL CTA -->
<section class="cta-band reveal" aria-labelledby="ctaTitle">
<div class="cta-band__inner">
<h2 id="ctaTitle">Ready to press play?</h2>
<p>Start your free month today. No ads, no worries, cancel anytime.</p>
<form class="cta-form" id="ctaForm" novalidate>
<label class="sr-only" for="email">Email address</label>
<input id="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn--primary btn--lg" type="submit">Start free trial</button>
</form>
<p class="cta-fine" id="ctaMsg">30 days free, then a plan of your choice. Cancel anytime.</p>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__name">PixiePlay</span>
<p>Streaming made for kids — safe, smart and full of wonder.</p>
</div>
<nav class="footer__col" aria-label="Watch">
<h4>Watch</h4><a href="#shows">Shows</a><a href="#learn">Learning games</a><a href="#top">New & popular</a>
</nav>
<nav class="footer__col" aria-label="Parents">
<h4>Parents</h4><a href="#safe">Parental controls</a><a href="#safe">Screen time</a><a href="#pricing">Plans</a>
</nav>
<nav class="footer__col" aria-label="Company">
<h4>Company</h4><a href="#top">About</a><a href="#top">Careers</a><a href="#top">Help center</a>
</nav>
</div>
<div class="footer__bar">
<span>© 2026 PixiePlay Studios. A fictional service.</span>
<span class="footer__legal"><a href="#top">Privacy</a> · <a href="#top">Kids safety</a> · <a href="#top">Terms</a></span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Kids Streaming Landing
A full marketing landing page for PixiePlay, a make-believe streaming service for ages 2–9. The hero pairs a gradient headline with floating emoji, bobbing cartoon characters, and a spinning rainbow screen ring, plus dual calls to action and a trust row of stats. A sticky nav fades into a blurred bar on scroll and collapses into a bouncy hamburger menu on small screens.
The “just right for every age” section uses an accessible tab list — Toddlers, Littles, Big kids — that re-renders a grid of show cards with HD/4K quality chips, category badges, and a staggered pop-in animation; clicking a card fires a friendly toast. A parental-controls panel is genuinely interactive: a screen-time slider fills as you drag and saves on release, and PIN/scary-theme toggles flip with spring motion. Pricing offers a monthly/yearly switch that rewrites every plan price, three plan tiers with a highlighted favorite, parent testimonials, an email-capture form with inline validation, and a deep footer.
Everything is vanilla HTML, CSS, and JS — no frameworks. Scroll-reveal via IntersectionObserver,
a reusable toast() helper, reduced-motion support, semantic landmarks, and a responsive layout
that holds together down to ~360px.
Illustrative UI only — fictional titles, not a real streaming service.