🚀 Days 19–20 – Projects · Day 19
Day 19: Mini Project: Responsive Coaching Landing Page
⏱ 3–4 hours📶 Project🎯 100% self-study
Day 19 / 20
✅ Today you will learn
- Plan a landing page that converts visitors into enquiries
- Set up tokens, a base layer and a container
- Build header, hero, cards, stats, testimonials, fees, FAQ, form and footer
- Make it responsive with a mobile menu and fluid type
- Add dark mode, motion preferences and test on devices
🏢 In the real world
A coaching centre in Aligarh pays ₹15,000 for a one-page site before the admission season. The brief: “Parents must trust us in 10 seconds and book a free demo class from their phone.” This is one of the most common freelance jobs in India – and a perfect portfolio piece. Every technique comes from Days 1–18.
The finished page
Open the file from the download kit in your browser to see the full desktop layout (two-column hero, three course cards in a row) and resize the window to watch it adapt.
Step 1: plan the page like a marketer
💡 One goal, repeated
Notice that “Book a free demo” appears in the header, the hero, every course card, every fee plan and the final form. Landing pages convert because they keep one call to action in front of the visitor.
Step 2: tokens and base
CSS – 1. tokens (Day 12)
/* ---------- 1. TOKENS ---------- */
:root {
--brand: #264de4;
--brand-600: #1d3bb8;
--accent: #f59e0b;
--cyan: #06b6d4;
--ink: #0f172a;
--text: #1e293b;
--muted: #64748b;
--line: #e2e8f0;
--bg: #ffffff;
--surface: #f8fafc;
--tint: #eef2ff;
--radius: 14px;
--shadow: 0 10px 30px rgb(15 23 42 / 8%);
--space: clamp(48px, 8vw, 96px);
--font: "Poppins", system-ui, "Segoe UI", Roboto, sans-serif;
}CSS – 2. base (Days 3, 4, 10)
/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; }
a { color: var(--brand); }
input, select, button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }- Every colour, radius and shadow is a variable – the dark-mode block later only swaps these values.
--space: clamp(48px, 8vw, 96px)gives all sections fluid vertical padding without media queries.- The skip link and :focus-visible keep the page usable by keyboard (HTML course, Day 10).
Step 3: container and section rhythm
CSS – 3. layout
/* ---------- 3. LAYOUT ---------- */
.container { width: min(1120px, 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 32px); }
.section { padding-block: var(--space); }
.section--tint { background: var(--tint); }
.section__head { text-align: center; margin-bottom: 40px; }
.section__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.eyebrow { margin: 0 0 8px; color: var(--brand); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }🧠 The one-line container
width: min(1120px, 100% - 32px) means “1120px wide, but never wider than the screen minus a 16px gutter on each side”. No media query needed.
Step 4: sticky glass header and mobile menu
HTML – header
<header class="header">
<div class="container header__inner">
<a class="logo" href="#">
<span class="logo__mark" aria-hidden="true">V</span>
<span>Vidya<b>Coaching</b></span>
</a>
<button class="nav-toggle" aria-expanded="false" aria-controls="site-nav"
onclick="var o=document.body.classList.toggle('nav-open'); this.setAttribute('aria-expanded', o)">
<span class="sr-only">Menu</span>☰
</button>
<nav class="nav" id="site-nav" aria-label="Main">
<a class="nav__link" href="#courses">Courses</a>
<a class="nav__link" href="#results">Results</a>
<a class="nav__link" href="#fees">Fees</a>
<a class="nav__link" href="#faq">FAQ</a>
<a class="btn btn--primary btn--sm" href="#demo">Free demo</a>
</nav>
</div>
</header>CSS – header and navigation
/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 90%); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; margin: 0; }
.logo b { color: var(--brand); }
.logo__mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; font-weight: 800; }
.logo--light, .logo--light b { color: #fff; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav__link { color: var(--text); text-decoration: none; font-weight: 500; position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .25s; }
.nav__link:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; color: var(--ink); cursor: pointer; }CSS – the mobile switch (inside section 6)
@media (max-width: 860px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__art { max-width: 380px; margin-inline: auto; }
.nav-toggle { display: block; }
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; }
.nav-open .nav { display: flex; }
.nav__link { padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav .btn { margin-top: 12px; }
}- position: sticky + a semi-transparent background + backdrop-filter: blur = the “glass” header used by modern apps.
- The underline on links grows with transform: scaleX (Day 13) – smooth even on cheap phones.
- Below 860px the links become a dropdown panel shown only when the body has .nav-open; one line of JS toggles that class and aria-expanded.
Step 5: the hero
CSS – 5. hero (Days 2, 7, 9, 12, 14)
/* ---------- 5. SECTIONS: HERO ---------- */
.hero { background: radial-gradient(circle at 85% 20%, #e0f2fe, transparent 45%), radial-gradient(circle at 10% 90%, #eef2ff, transparent 40%); padding-block: clamp(40px, 7vw, 88px); overflow: hidden; }
.hero__grid { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero__title { font-size: clamp(2rem, 1.3rem + 3.5vw, 3.6rem); letter-spacing: -.02em; margin-bottom: 16px; }
.highlight { background: linear-gradient(90deg, var(--brand), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 52ch; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 32px 0 0; color: var(--muted); }
.trust b { color: var(--ink); font-size: 1.2rem; }
.hero__art { position: relative; }
.hero__svg { width: 100%; animation: float 6s ease-in-out infinite; }
.float-card { position: absolute; background: var(--bg); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.float-card--top { top: 8%; left: 0; }
.float-card--bottom { bottom: 6%; right: 0; }
@keyframes float { 50% { transform: translateY(-12px); } }| Detail | Technique | Day |
|---|---|---|
| Two columns that stack | grid 1.1fr .9fr → 1fr in the media query | 9, 11 |
| Giant fluid headline | clamp(2rem, 1.3rem + 3.5vw, 3.6rem) | 12 |
| Gradient text “JEE & NEET” | background-clip: text + transparent colour | 2 |
| Soft background blobs | Two radial-gradients | 2 |
| Floating cards on the art | position: absolute inside a relative parent | 6 |
| Gentle floating SVG | @keyframes float, disabled for reduced motion | 14 |
Step 6: course cards, stats and testimonials
CSS – cards, stats, testimonials
/* Cards */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.card { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgb(15 23 42 / 12%); }
.card--featured { border: 2px solid var(--brand); }
.card__icon { font-size: 2rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--tint); border-radius: 14px; margin-bottom: 16px; }
.card__title { font-size: 1.25rem; margin-bottom: 8px; }
.card__text { color: var(--muted); margin: 0 0 12px; }
.card__list { list-style: none; padding: 0; margin: 0 0 20px; }
.card__list li::before { content: "✔"; color: #16a34a; margin-right: 8px; }
.card__cta { margin-top: auto; }
/* Stats */
.stats { background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; padding-block: 48px; }
.stats__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.stat__num { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.1; }
/* Testimonials */
.quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.quote { margin: 0; background: var(--surface); border-radius: var(--radius); padding: 28px; border-left: 5px solid var(--accent); }
.quote blockquote { margin: 0 0 18px; font-size: 1.1rem; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote small { color: var(--muted); }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; flex: 0 0 46px; }
.avatar--alt { background: #c2410c; }- auto-fit + minmax(260px, 1fr): three cards on a laptop, one on a phone – no media query (Day 9).
- Cards are column flex containers and the button has margin-top: auto, so all “Book demo” buttons line up even with different text lengths (Day 8).
- The “Most popular” badge is centred with left: 50% + translateX(-50%) (Days 6, 13).
- ✔ ticks come from li::before – no extra HTML (Day 5).
Step 7: fees, FAQ and the demo form
CSS – pricing, FAQ, CTA and form
/* Pricing */
.plans { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; }
.plan { background: var(--bg); border-radius: var(--radius); padding: 32px 24px; text-align: center; border: 1px solid var(--line); }
.plan--featured { padding-block: 44px; border: 2px solid var(--brand); box-shadow: 0 20px 40px rgb(38 77 228 / 18%); }
.plan__name { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.plan__price { font-size: 2.2rem; font-weight: 800; color: var(--ink); margin: 8px 0 16px; }
.plan__price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 0 0 24px; line-height: 2.1; }
.note { text-align: center; color: var(--muted); margin: 32px 0 0; }
/* FAQ */
.faq { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--bg); }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--muted); }
/* CTA + form */
.cta { background: var(--ink); color: #cbd5e1; }
.cta__grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.cta__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 12px; }
.cta a { color: #93c5fd; }
.form { background: var(--bg); color: var(--text); border-radius: var(--radius); padding: 28px; display: grid; gap: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(38 77 228 / 15%); }
.field input:user-invalid { border-color: #dc2626; }💡 Why the form sits on a dark section
Contrast draws the eye. After many light sections, the dark CTA band with a white form card is impossible to miss – exactly where you want the visitor to act.
Step 8: footer, dark mode and motion
CSS – dark mode and reduced motion
/* ---------- 7. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
:root { --ink: #f1f5f9; --text: #e2e8f0; --muted: #94a3b8; --line: #1e293b; --bg: #0b1120; --surface: #111827; --tint: #111a33; --shadow: 0 10px 30px rgb(0 0 0 / 40%); }
.header { background: rgb(11 17 32 / 85%); }
.hero { background: radial-gradient(circle at 85% 20%, #0c2a4a, transparent 45%); }
.badge { color: #0f172a; }
}
/* ---------- 8. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}Step 9: test and hand over
| Check | How | Our result |
|---|---|---|
| No sideways scroll | DevTools 320–1440px; document.documentElement.scrollWidth vs innerWidth | 0px overflow at 1280px and 375px ✅ |
| Mobile menu | Width < 860px → ☰ opens and closes, aria-expanded updates | Works with mouse and keyboard ✅ |
| Contrast | DevTools colour picker | Body text 14.6:1, buttons 6.4:1 ✅ |
| Dark mode | Rendering → prefers-color-scheme: dark | All text readable ✅ |
| Lighthouse | Mobile audit | Aim 90+ in all categories |
Complete source code
HTML – index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vidya Coaching Aligarh – JEE, NEET & Class 10 Coaching</title>
<meta name="description" content="Vidya Coaching Centre, Civil Lines, Aligarh: JEE, NEET and Class 10 board coaching in small batches with weekly tests and doubt support. Book a free demo class.">
<meta name="theme-color" content="#264de4">
<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=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<!-- ========== HEADER ========== -->
<header class="header">
<div class="container header__inner">
<a class="logo" href="#">
<span class="logo__mark" aria-hidden="true">V</span>
<span>Vidya<b>Coaching</b></span>
</a>
<button class="nav-toggle" aria-expanded="false" aria-controls="site-nav"
onclick="var o=document.body.classList.toggle('nav-open'); this.setAttribute('aria-expanded', o)">
<span class="sr-only">Menu</span>☰
</button>
<nav class="nav" id="site-nav" aria-label="Main">
<a class="nav__link" href="#courses">Courses</a>
<a class="nav__link" href="#results">Results</a>
<a class="nav__link" href="#fees">Fees</a>
<a class="nav__link" href="#faq">FAQ</a>
<a class="btn btn--primary btn--sm" href="#demo">Free demo</a>
</nav>
</div>
</header>
<main id="main">
<!-- ========== HERO ========== -->
<section class="hero">
<div class="container hero__grid">
<div class="hero__text">
<p class="eyebrow">Admissions open · 2026–27 batches</p>
<h1 class="hero__title">Crack <span class="highlight">JEE & NEET</span> with teachers who know your name</h1>
<p class="hero__lead">Small batches of 30, weekly All-India tests and doubt support every evening – right here in Civil Lines, Aligarh.</p>
<div class="hero__actions">
<a class="btn btn--primary btn--lg" href="#demo">Book a free demo class</a>
<a class="btn btn--outline btn--lg" href="#courses">Explore courses</a>
</div>
<ul class="trust">
<li><b>412</b> selections in 2026</li>
<li><b>16</b> years of teaching</li>
<li><b>4.8★</b> parent rating</li>
</ul>
</div>
<div class="hero__art" aria-hidden="true">
<svg viewBox="0 0 320 280" class="hero__svg">
<circle cx="170" cy="140" r="120" fill="#dbeafe"/>
<rect x="70" y="150" width="190" height="26" rx="6" fill="#264de4"/>
<rect x="85" y="122" width="170" height="26" rx="6" fill="#06b6d4"/>
<rect x="60" y="94" width="180" height="26" rx="6" fill="#f59e0b"/>
<path d="M120 70 l60 -28 60 28 -60 28z" fill="#0f172a"/>
<path d="M150 84 v22 q30 16 60 0 v-22" fill="#0f172a"/>
<line x1="240" y1="70" x2="240" y2="110" stroke="#0f172a" stroke-width="4"/>
<circle cx="240" cy="114" r="6" fill="#f59e0b"/>
</svg>
<div class="float-card float-card--top">📝 Test #18 · Rank 3</div>
<div class="float-card float-card--bottom">✅ Doubt solved in 12 min</div>
</div>
</div>
</section>
<!-- ========== COURSES ========== -->
<section class="section" id="courses" aria-labelledby="courses-title">
<div class="container">
<header class="section__head">
<p class="eyebrow">Courses</p>
<h2 id="courses-title" class="section__title">Choose your goal</h2>
</header>
<div class="cards">
<article class="card">
<span class="card__icon" aria-hidden="true">⚙️</span>
<h3 class="card__title">JEE Main + Advanced</h3>
<p class="card__text">2-year classroom programme for Class 11–12 with Physics, Chemistry and Maths.</p>
<ul class="card__list"><li>6 days a week</li><li>Weekly JEE-pattern tests</li></ul>
<a class="btn btn--primary card__cta" href="#demo">Book demo</a>
</article>
<article class="card card--featured">
<span class="badge">Most popular</span>
<span class="card__icon" aria-hidden="true">🩺</span>
<h3 class="card__title">NEET</h3>
<p class="card__text">Biology-focused batch with NCERT line-by-line revision, doctor mentors and daily practice questions.</p>
<ul class="card__list"><li>Printed notes delivered home</li><li>Monthly parent meeting</li></ul>
<a class="btn btn--primary card__cta" href="#demo">Book demo</a>
</article>
<article class="card">
<span class="card__icon" aria-hidden="true">📘</span>
<h3 class="card__title">Class 10 Boards</h3>
<p class="card__text">Maths and Science with chapter tests.</p>
<ul class="card__list"><li>Evening batch</li><li>Sample paper marathon</li></ul>
<a class="btn btn--primary card__cta" href="#demo">Book demo</a>
</article>
</div>
</div>
</section>
<!-- ========== STATS ========== -->
<section class="stats" id="results" aria-label="Results">
<div class="container stats__grid">
<div class="stat"><b class="stat__num">412</b><span>selections in 2026</span></div>
<div class="stat"><b class="stat__num">98.4%</b><span>top Class 10 score</span></div>
<div class="stat"><b class="stat__num">30</b><span>students per batch</span></div>
<div class="stat"><b class="stat__num">24 h</b><span>doubt reply time</span></div>
</div>
</section>
<!-- ========== TESTIMONIALS ========== -->
<section class="section" aria-labelledby="t-title">
<div class="container">
<header class="section__head">
<p class="eyebrow">Students & parents</p>
<h2 id="t-title" class="section__title">What they say</h2>
</header>
<div class="quotes">
<figure class="quote">
<blockquote>“The weekly tests showed exactly where I was weak. I improved 140 marks in three months.”</blockquote>
<figcaption><span class="avatar" aria-hidden="true">AK</span><span><b>Ayesha K.</b><br><small>NEET 2026, AIR 2,341</small></span></figcaption>
</figure>
<figure class="quote">
<blockquote>“Teachers call us every month about our son’s progress. We always know where he stands.”</blockquote>
<figcaption><span class="avatar avatar--alt" aria-hidden="true">RS</span><span><b>Mr. R. Sharma</b><br><small>Parent, Class 12</small></span></figcaption>
</figure>
</div>
</div>
</section>
<!-- ========== FEES ========== -->
<section class="section section--tint" id="fees" aria-labelledby="fees-title">
<div class="container">
<header class="section__head">
<p class="eyebrow">Fees</p>
<h2 id="fees-title" class="section__title">Simple, transparent fees</h2>
</header>
<div class="plans">
<div class="plan"><h3 class="plan__name">Class 10</h3><p class="plan__price">₹18,000<small>/year</small></p><ul class="plan__list"><li>Maths + Science</li><li>Chapter tests</li><li>Doubt support</li></ul><a class="btn btn--outline" href="#demo">Enquire</a></div>
<div class="plan plan--featured"><h3 class="plan__name">NEET / JEE</h3><p class="plan__price">₹65,000<small>/year</small></p><ul class="plan__list"><li>All subjects</li><li>Weekly All-India tests</li><li>Printed notes + mentor</li></ul><a class="btn btn--primary" href="#demo">Enquire</a></div>
<div class="plan"><h3 class="plan__name">Crash course</h3><p class="plan__price">₹12,000<small>/45 days</small></p><ul class="plan__list"><li>Full syllabus revision</li><li>15 mock tests</li><li>Analysis sessions</li></ul><a class="btn btn--outline" href="#demo">Enquire</a></div>
</div>
<p class="note">Scholarships up to 50% based on our admission test. EMI available.</p>
</div>
</section>
<!-- ========== FAQ ========== -->
<section class="section" id="faq" aria-labelledby="faq-title">
<div class="container container--narrow">
<header class="section__head">
<p class="eyebrow">FAQ</p>
<h2 id="faq-title" class="section__title">Questions parents ask</h2>
</header>
<details class="faq" name="faq" open><summary>Is there a free demo class?</summary><p>Yes – attend two classes free before paying any fee.</p></details>
<details class="faq" name="faq"><summary>What if my child misses a class?</summary><p>Every lecture is recorded and available in the student app the same night.</p></details>
<details class="faq" name="faq"><summary>Do you provide hostel facilities?</summary><p>We have tie-ups with two verified hostels within 1 km of the centre.</p></details>
</div>
</section>
<!-- ========== DEMO FORM ========== -->
<section class="section cta" id="demo" aria-labelledby="demo-title">
<div class="container cta__grid">
<div>
<h2 id="demo-title" class="cta__title">Book a free demo class</h2>
<p>We will call you within 2 hours to fix a time. No spam, promise.</p>
<p>📍 2nd floor, Rana Complex, Civil Lines, Aligarh<br>📞 <a href="tel:+919876543210">+91 98765 43210</a></p>
</div>
<form class="form" action="#" onsubmit="alert('Thank you! We will call you soon.'); return false">
<div class="field"><label for="name">Student name</label><input id="name" required minlength="2" autocomplete="name"></div>
<div class="field"><label for="phone">Parent’s mobile</label><input id="phone" type="tel" required pattern="[6-9][0-9]{9}" placeholder="10-digit mobile"></div>
<div class="field"><label for="course">Course</label>
<select id="course" required><option value="">Choose…</option><option>JEE</option><option>NEET</option><option>Class 10</option></select></div>
<button class="btn btn--primary btn--block" type="submit">Request call back</button>
</form>
</div>
</section>
</main>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="container footer__grid">
<div><p class="logo logo--light"><span class="logo__mark" aria-hidden="true">V</span> Vidya<b>Coaching</b></p><p>JEE, NEET and Boards coaching in Aligarh since 2010.</p></div>
<div><h3 class="footer__title">Courses</h3><a href="#courses">JEE</a><a href="#courses">NEET</a><a href="#courses">Class 10</a></div>
<div><h3 class="footer__title">Contact</h3><a href="tel:+919876543210">+91 98765 43210</a><a href="mailto:info@vidyacoaching.example">info@vidyacoaching.example</a></div>
</div>
<p class="footer__copy">© 2026 Vidya Coaching Centre (sample project)</p>
</footer>
</body>
</html>CSS – css/style.css
/* =========================================================
Vidya Coaching – landing page stylesheet
1. Tokens 2. Base 3. Layout 4. Components 5. Sections
6. Responsive 7. Dark mode 8. Motion preferences
========================================================= */
/* ---------- 1. TOKENS ---------- */
:root {
--brand: #264de4;
--brand-600: #1d3bb8;
--accent: #f59e0b;
--cyan: #06b6d4;
--ink: #0f172a;
--text: #1e293b;
--muted: #64748b;
--line: #e2e8f0;
--bg: #ffffff;
--surface: #f8fafc;
--tint: #eef2ff;
--radius: 14px;
--shadow: 0 10px 30px rgb(15 23 42 / 8%);
--space: clamp(48px, 8vw, 96px);
--font: "Poppins", system-ui, "Segoe UI", Roboto, sans-serif;
}
/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; }
a { color: var(--brand); }
input, select, button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }
/* ---------- 3. LAYOUT ---------- */
.container { width: min(1120px, 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 32px); }
.section { padding-block: var(--space); }
.section--tint { background: var(--tint); }
.section__head { text-align: center; margin-bottom: 40px; }
.section__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.eyebrow { margin: 0 0 8px; color: var(--brand); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
/* ---------- 4. COMPONENTS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 20px; border-radius: 10px; border: 2px solid transparent;
font-weight: 600; text-decoration: none; cursor: pointer;
transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgb(38 77 228 / 25%); }
.btn--primary:hover { background: var(--brand-600); }
.btn--outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--outline:hover { background: var(--brand); color: #fff; }
.btn--sm { padding: 8px 14px; font-size: .9rem; }
.btn--lg { padding: 14px 24px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--ink); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; white-space: nowrap; }
/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 90%); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; margin: 0; }
.logo b { color: var(--brand); }
.logo__mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; font-weight: 800; }
.logo--light, .logo--light b { color: #fff; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav__link { color: var(--text); text-decoration: none; font-weight: 500; position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .25s; }
.nav__link:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; color: var(--ink); cursor: pointer; }
/* Cards */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.card { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgb(15 23 42 / 12%); }
.card--featured { border: 2px solid var(--brand); }
.card__icon { font-size: 2rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--tint); border-radius: 14px; margin-bottom: 16px; }
.card__title { font-size: 1.25rem; margin-bottom: 8px; }
.card__text { color: var(--muted); margin: 0 0 12px; }
.card__list { list-style: none; padding: 0; margin: 0 0 20px; }
.card__list li::before { content: "✔"; color: #16a34a; margin-right: 8px; }
.card__cta { margin-top: auto; }
/* Stats */
.stats { background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; padding-block: 48px; }
.stats__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.stat__num { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.1; }
/* Testimonials */
.quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.quote { margin: 0; background: var(--surface); border-radius: var(--radius); padding: 28px; border-left: 5px solid var(--accent); }
.quote blockquote { margin: 0 0 18px; font-size: 1.1rem; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote small { color: var(--muted); }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; flex: 0 0 46px; }
.avatar--alt { background: #c2410c; }
/* Pricing */
.plans { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; }
.plan { background: var(--bg); border-radius: var(--radius); padding: 32px 24px; text-align: center; border: 1px solid var(--line); }
.plan--featured { padding-block: 44px; border: 2px solid var(--brand); box-shadow: 0 20px 40px rgb(38 77 228 / 18%); }
.plan__name { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.plan__price { font-size: 2.2rem; font-weight: 800; color: var(--ink); margin: 8px 0 16px; }
.plan__price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 0 0 24px; line-height: 2.1; }
.note { text-align: center; color: var(--muted); margin: 32px 0 0; }
/* FAQ */
.faq { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--bg); }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--muted); }
/* CTA + form */
.cta { background: var(--ink); color: #cbd5e1; }
.cta__grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.cta__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 12px; }
.cta a { color: #93c5fd; }
.form { background: var(--bg); color: var(--text); border-radius: var(--radius); padding: 28px; display: grid; gap: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(38 77 228 / 15%); }
.field input:user-invalid { border-color: #dc2626; }
/* Footer */
.footer { background: #020617; color: #94a3b8; padding-top: 56px; }
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer__title { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer a { display: block; color: #cbd5e1; text-decoration: none; line-height: 2; }
.footer a:hover { color: #fff; }
.footer__copy { text-align: center; border-top: 1px solid #1e293b; margin: 40px 0 0; padding: 20px 16px; font-size: .9rem; }
/* ---------- 5. SECTIONS: HERO ---------- */
.hero { background: radial-gradient(circle at 85% 20%, #e0f2fe, transparent 45%), radial-gradient(circle at 10% 90%, #eef2ff, transparent 40%); padding-block: clamp(40px, 7vw, 88px); overflow: hidden; }
.hero__grid { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero__title { font-size: clamp(2rem, 1.3rem + 3.5vw, 3.6rem); letter-spacing: -.02em; margin-bottom: 16px; }
.highlight { background: linear-gradient(90deg, var(--brand), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 52ch; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 32px 0 0; color: var(--muted); }
.trust b { color: var(--ink); font-size: 1.2rem; }
.hero__art { position: relative; }
.hero__svg { width: 100%; animation: float 6s ease-in-out infinite; }
.float-card { position: absolute; background: var(--bg); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.float-card--top { top: 8%; left: 0; }
.float-card--bottom { bottom: 6%; right: 0; }
@keyframes float { 50% { transform: translateY(-12px); } }
/* ---------- 6. RESPONSIVE ---------- */
@media (max-width: 860px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__art { max-width: 380px; margin-inline: auto; }
.nav-toggle { display: block; }
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; }
.nav-open .nav { display: flex; }
.nav__link { padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav .btn { margin-top: 12px; }
}
/* ---------- 7. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
:root { --ink: #f1f5f9; --text: #e2e8f0; --muted: #94a3b8; --line: #1e293b; --bg: #0b1120; --surface: #111827; --tint: #111a33; --shadow: 0 10px 30px rgb(0 0 0 / 40%); }
.header { background: rgb(11 17 32 / 85%); }
.hero { background: radial-gradient(circle at 85% 20%, #0c2a4a, transparent 45%); }
.badge { color: #0f172a; }
}
/* ---------- 8. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}🏅 Job skills unlocked today
✔ Plan a conversion-focused landing page✔ Structure CSS into tokens, base, layout, components and sections✔ Build a sticky header with a mobile menu✔ Ship a responsive, dark-mode-ready, accessible page
Practice tasks
🏋️ Practice – do it yourself
Task 1: Re-brand the page for a computer institute: change only the tokens (colours, font) and the text – no component CSS.
Task 2: Add a “Our toppers” section with 6 photo cards in an auto-fit grid using aspect-ratio and object-fit.
Task 3: Add a WhatsApp floating button (position: fixed) that hides when printing.
Quick quiz
🧠 Quick Quiz – test yourself
1. Why put the call-to-action in many sections?
Conversion.
2. width: min(1120px, 100% - 32px) creates…
No media query.
3. Gradient-coloured text needs…
Clip the background to the letters.
4. All “Book demo” buttons line up because…
Day 8 trick.
5. Dark mode in this project is achieved by…
Tokens make it cheap.
Interview corner
💼 Interview Corner
Walk me through how you built a landing page.
Start from the goal (demo bookings) and section plan, then tokens and a base reset, a min()-based container, mobile-first components (cards with auto-fit, flex internals), a sticky header with an accessible toggle, fluid type with clamp(), dark mode via variables, reduced-motion support, then test overflow, contrast and Lighthouse on real devices.
How do you keep a page fast while making it attractive?
Use CSS for decoration (gradients, SVG, shadows) instead of heavy images, animate only transform/opacity, load one font family with few weights, lazy-load below-the-fold media and keep one small stylesheet.
Summary
- Plan sections around one goal and repeat the call to action.
- Tokens → base → layout → components → sections → responsive → dark → motion.
- Grid/auto-fit for cards, flex for internals, clamp() for type, sticky glass header.
- Test overflow, menu, contrast, dark mode and Lighthouse before handing over.
➡️ Next
Day 20 – Major project: redesign the complete 6-page Sharma Sweets website with a professional stylesheet – without touching its HTML.
Frequently Asked Questions
How much can I charge for this?
For local businesses in tier-2 cities, one-page sites like this typically go for around ₹8,000–₹20,000 plus hosting; your portfolio decides the rate.
Where does the form data go?
Like in the HTML course: Formspree/Netlify Forms on static hosting or a PHP script on shared hosting. The JavaScript course adds validation messages and fetch().
