🚀 Days 19–20 – Projects · दिन 19

दिन 19: Mini Project: Responsive Coaching Landing Page

Q: इसके लिए कितना charge करूँ?

Tier-2 शहरों के local businesses के लिए ऐसी one-page sites आम तौर पर लगभग ₹8,000–₹20,000 और hosting पर बनती हैं; आपका portfolio rate तय करता है।

Q: Form data कहाँ जाता है?

HTML course की तरह: static hosting पर Formspree/Netlify Forms या shared hosting पर PHP script। JavaScript course validation messages और fetch() जोड़ता है।

⏱ 3–4 hours📶 Project🎯 100% self-study

दिन 19 / 20

✅ आज आप सीखेंगे

ऐसा landing page plan करना जो visitors को enquiries में बदले
Tokens, base layer और container setup
Header, hero, cards, stats, testimonials, fees, FAQ, form और footer बनाना
Mobile menu और fluid type से responsive बनाना
Dark mode, motion preferences जोड़ना और devices पर test करना

🏢 असली दुनिया में

Aligarh का एक coaching centre admission season से पहले one-page site के लिए ₹15,000 देता है। Brief: “Parents 10 सेकंड में हम पर भरोसा करें और phone से free demo class book करें।” यह India के सबसे आम freelance कामों में से एक है – और portfolio के लिए perfect। हर तकनीक Days 1–18 से है।

तैयार page

▶ Vidya Coaching – scroll inside. The box is narrow, so you see the tablet/mobile layout with the ☰ menu.

Desktop layout (दो-column hero, एक row में तीन course cards) देखने के लिए download kit की file browser में खोलें और window छोटी-बड़ी करके इसे ढलते देखें।

Step 1: marketer की तरह page plan करें

हर section parent को form के एक क़दम पास ले जाता है

💡 एक लक्ष्य, बार-बार

ध्यान दें “Book a free demo” header, hero, हर course card, हर fee plan और आख़िरी form में है। Landing pages इसलिए काम करते हैं क्योंकि एक ही call to action visitor के सामने रहता है।

Step 2: tokens और 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; }

हर colour, radius और shadow variable है – बाद का dark-mode block सिर्फ़ ये values बदलता है।
--space: clamp(48px, 8vw, 96px) सभी sections को बिना media queries fluid vertical padding देता है।
Skip link और :focus-visible page को keyboard से उपयोगी रखते हैं (HTML course, Day 10)।

Step 3: container और section लय

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; }

🧠 एक-line container

width: min(1120px, 100% - 32px) का मतलब “1120px चौड़ा, पर screen से हर तरफ़ 16px gutter घटाकर उससे कभी ज़्यादा नहीं”। कोई media query नहीं।

Step 4: sticky glass header और 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 + आधा-पारदर्शी background + backdrop-filter: blur = आधुनिक apps वाला “glass” header।
Links का underline transform: scaleX से बढ़ता है (Day 13) – सस्ते phones पर भी smooth।
860px से नीचे links dropdown panel बनते हैं जो सिर्फ़ body पर .nav-open होने पर दिखते हैं; JS की एक line वह class और aria-expanded बदलती है।

Step 5: 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	तकनीक	Day
Stack होने वाले दो columns	grid 1.1fr .9fr → media query में 1fr	9, 11
बड़ा fluid headline	clamp(2rem, 1.3rem + 3.5vw, 3.6rem)	12
Gradient text “JEE & NEET”	background-clip: text + पारदर्शी colour	2
हल्के background blobs	दो radial-gradients	2
Art पर तैरते cards	Relative parent के अंदर position: absolute	6
धीरे तैरता SVG	@keyframes float, reduced motion में बंद	14

Step 6: course cards, stats और 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): laptop पर तीन cards, phone पर एक – बिना media query (Day 9)।
Cards column flex containers हैं और button पर margin-top: auto है, इसलिए text की अलग लंबाई के बावजूद सब “Book demo” buttons एक सीध में (Day 8)।
“Most popular” badge left: 50% + translateX(-50%) से बीच में (Days 6, 13)।
✔ ticks li::before से – कोई अतिरिक्त HTML नहीं (Day 5)।

Step 7: fees, FAQ और 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; }

💡 Form गहरे section पर क्यों

Contrast नज़र खींचता है। कई हल्के sections के बाद सफ़ेद form card वाला गहरा CTA band छूट नहीं सकता – ठीक वहीं जहाँ visitor से action चाहिए।

Step 8: footer, dark mode और 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 करके सौंपें

जाँच	कैसे	हमारा नतीजा
बग़ल में scroll नहीं	DevTools 320–1440px; document.documentElement.scrollWidth बनाम innerWidth	1280px और 375px पर 0px overflow ✅
Mobile menu	Width < 860px → ☰ खुलता-बंद होता, aria-expanded बदलता	Mouse और keyboard दोनों से ✅
Contrast	DevTools colour picker	Body text 14.6:1, buttons 6.4:1 ✅
Dark mode	Rendering → prefers-color-scheme: dark	सारा text पढ़ने लायक ✅
Lighthouse	Mobile audit	सभी categories में 90+ लक्ष्य

पूरा 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 &amp; 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 &amp; 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 &amp; 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

✔ Conversion पर केंद्रित landing page plan करना✔ CSS को tokens, base, layout, components और sections में बाँटना✔ Mobile menu वाला sticky header✔ Responsive, dark-mode-ready, accessible page ship करना

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: Page को computer institute के लिए re-brand करें: सिर्फ़ tokens (colours, font) और text बदलें – कोई component CSS नहीं।

Task 2: aspect-ratio और object-fit से auto-fit grid में 6 photo cards वाला “Our toppers” section जोड़ें।

Task 3: WhatsApp floating button (position: fixed) जोड़ें जो print में छिप जाए।

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. Call-to-action कई sections में क्यों?

Conversion।

2. width: min(1120px, 100% - 32px) बनाता है…

Media query नहीं।

3. Gradient रंग वाला text चाहिए…

Background अक्षरों तक काटें।

4. सब “Book demo” buttons एक सीध में क्योंकि…

Day 8 trick।

5. इस project में dark mode…

Tokens से आसान।

Interview corner

💼 Interview Corner

आपने landing page कैसे बनाया, समझाइए।

लक्ष्य (demo bookings) और section plan से शुरू, फिर tokens और base reset, min() वाला container, mobile-first components (auto-fit cards, flex internals), accessible toggle वाला sticky header, clamp() से fluid type, variables से dark mode, reduced-motion support, फिर असली devices पर overflow, contrast और Lighthouse test।

Page आकर्षक बनाते हुए तेज़ कैसे रखें?

भारी images की जगह सजावट CSS से (gradients, SVG, shadows), सिर्फ़ transform/opacity animate, कम weights वाली एक font family, नीचे की media lazy-load, और एक छोटी stylesheet।

सारांश

एक लक्ष्य के आसपास sections plan करें और call to action दोहराएँ।
Tokens → base → layout → components → sections → responsive → dark → motion।
Cards के लिए Grid/auto-fit, internals के लिए flex, type के लिए clamp(), sticky glass header।
सौंपने से पहले overflow, menu, contrast, dark mode और Lighthouse test।

➡️ आगे

Day 20 – Major project: पूरी 6-page Sharma Sweets website को professional stylesheet से redesign करें – उसका HTML छुए बिना।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

इसके लिए कितना charge करूँ?