✅ Practice + Quiz · Lesson 42

Project: Landing Page

What We Will Build — a full landing page

This is the capstone project — a complete, responsive landing page with four classic sections: a navigation bar, a hero section, a features grid, and a footer. We'll use CSS variables for theming, flexbox for the nav and hero, grid for the features, and media queries to make it work beautifully on phones. This is the real thing — the structure behind countless websites you visit daily. By the end, you'll have built a genuine, professional page and seen how every part of this course fits together into a finished product.

Step 1: Setup and Variables

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #2563eb;
    --dark: #1f2937;
    --gray: #6b7280;
    --light: #f9fafb;
    --space: 20px;
    --radius: 12px;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
}
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;      /* the responsive container pattern */
}

We begin with the professional foundations from best practices. The box-sizing reset, a set of design-token variables in :root (colours, spacing, radius — so we theme the whole page from one place), and a base body style with comfortable line-height. The .container class is our golden responsive-width pattern (width: 90%; max-width: 1100px; margin: 0 auto) that we'll wrap each section's content in to keep it centered and readable on any screen. This setup block is how nearly every real stylesheet starts.

Step 2: The Navigation Bar

.navbar {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: var(--space) 0;
}
.nav-inner {
    display: flex;
    justify-content: space-between;   /* logo left, links right */
    align-items: center;
}
.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s;
}
.nav-links a:hover { color: var(--primary); }

The navigation bar is pure flexbox. justify-content: space-between pushes the logo to the left and the links to the right — the classic nav layout you learned. The links themselves are a <ul> with list-style: none and display: flex + gap to lay them in a neat row (the lists-into-navigation pattern). A hover colour transition adds polish. Every technique here is one you've already met — now assembled into a real header.

Step 3: The Hero Section

.hero {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    text-align: center;
    padding: 80px 0;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 28px;
    opacity: 0.9;
}
.hero-btn {
    display: inline-block;
    background: white;
    color: var(--primary);
    padding: 14px 36px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}
.hero-btn:hover { transform: translateY(-3px); }

The hero is the big eye-catching banner at the top. It uses a linear-gradient background (a colourful gradient from the backgrounds chapter) for a modern look, centered white text with a large heading, and a prominent call-to-action button. The button is an inline-block styled link with a hover-lift (translateY(-3px) + transition). Generous padding: 80px 0 gives it that spacious, impactful feel. This section is designed to grab attention and drive the one action you want visitors to take — the whole point of a landing page.

Step 4: The Features Grid

.features {
    padding: 70px 0;
    background: var(--light);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.feature-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.feature-card h3 { margin-bottom: 12px; }
.feature-card p { color: var(--gray); }

The features section shows off CSS Grid's superpower. That one line — grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) — creates a responsive card grid that automatically shows 3 columns on desktop, 2 on tablet, and 1 on phone, with NO media query needed (the auto-fit magic from the grid chapter). Each feature card reuses the exact card-lift hover effect from the previous project. This is the beauty of what you've learned: a few well-chosen rules produce a fully responsive, interactive feature showcase almost for free.

Step 5: Making It Responsive

/* On phones, stack the nav and shrink the hero text */
@media (max-width: 600px) {
    .nav-inner {
        flex-direction: column;
        gap: 12px;
    }
    .hero h1 {
        font-size: 2rem;      /* smaller heading on small screens */
    }
    .hero {
        padding: 60px 0;
    }
}

The features grid is already responsive thanks to auto-fit, so we only need a few media-query tweaks for the rest. On narrow screens (max-width: 600px), we switch the nav to a vertical stack (flex-direction: column) so the logo and links don't cram together, and we shrink the oversized hero heading so it fits comfortably. This is mobile-friendly design in practice: most of the layout adapts automatically (fluid container, flexible grid), and media queries handle just the specific spots that need deliberate adjustment. That's the efficient, modern responsive workflow.

The Finished Page — full HTML structure

<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="container nav-inner">
            <div class="logo"><strong>MySite</strong></div>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero -->
    <section class="hero">
        <div class="container">
            <h1>Build Beautiful Websites</h1>
            <p>Learn HTML & CSS the simple way with CodeKaFunda.</p>
            <a href="#" class="hero-btn">Get Started</a>
        </div>
    </section>

    <!-- Features -->
    <section class="features">
        <div class="container">
            <h2 style="text-align:center">Why Choose Us</h2>
            <div class="features-grid">
                <div class="feature-card"><h3>Simple</h3><p>Easy to follow lessons.</p></div>
                <div class="feature-card"><h3>Bilingual</h3><p>Hindi and English both.</p></div>
                <div class="feature-card"><h3>Free</h3><p>100% free forever.</p></div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer style="background:var(--dark);color:white;text-align:center;padding:30px 0">
        <p>&copy; 2026 MySite. All rights reserved.</p>
    </footer>
</body>

And that's a complete, responsive landing page — congratulations, you've finished the CSS course! Combine this HTML with all the CSS from the steps above (in a <style> tag or linked file) and open it in a browser — resize the window to watch it adapt. Look at everything you used: variables, flexbox, grid, box model, shadows, transitions, transforms, and media queries — the ENTIRE course, working together in one real page. You now have the skills to style any website. The best next step is to keep building: tweak this page, invent your own, and make things. That's how you truly master CSS. Well done!

क्या बनाएंगे — पूरा landing page

यह capstone project है — एक पूरा, responsive landing page चार classic sections के साथ: navigation bar, hero section, features grid, और footer. हम theming के लिए CSS variables, nav और hero के लिए flexbox, features के लिए grid, और phones पर खूबसूरती से चलाने को media queries use करेंगे. यह असली चीज़ है — अनगिनत websites के पीछे का structure जो आप रोज़ visit करते हैं. अंत तक, आपने एक असली, professional page बना लिया होगा और देखा होगा इस course का हर हिस्सा कैसे एक तैयार product में एक साथ आता है.

Step 1: Setup और Variables

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #2563eb;
    --dark: #1f2937;
    --gray: #6b7280;
    --light: #f9fafb;
    --space: 20px;
    --radius: 12px;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
}
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;      /* responsive container pattern */
}

हम best practices की professional नींव से शुरू करते हैं. box-sizing reset, :root में design-token variables का समूह (colours, spacing, radius — ताकि पूरा page एक जगह से theme करें), और आरामदायक line-height वाली base body style. .container class हमारा golden responsive-width pattern है (width: 90%; max-width: 1100px; margin: 0 auto) जिसमें हम हर section का content लपेटेंगे ताकि यह किसी भी screen पर centered और readable रहे. यह setup block ऐसे ही लगभग हर असली stylesheet शुरू होती है.

Step 2: Navigation Bar

.navbar {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: var(--space) 0;
}
.nav-inner {
    display: flex;
    justify-content: space-between;   /* logo left, links right */
    align-items: center;
}
.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s;
}
.nav-links a:hover { color: var(--primary); }

Navigation bar शुद्ध flexbox है. justify-content: space-between logo को left और links को right धकेलता है — वही classic nav layout जो आपने सीखा. Links खुद एक <ul> हैं list-style: none और display: flex + gap के साथ उन्हें साफ row में रखने को (lists-into-navigation pattern). Hover colour transition polish जोड़ता है. यहां हर तकनीक वह है जो आप पहले मिल चुके — अब असली header में जोड़ी गई.

Step 3: Hero Section

.hero {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    text-align: center;
    padding: 80px 0;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 28px;
    opacity: 0.9;
}
.hero-btn {
    display: inline-block;
    background: white;
    color: var(--primary);
    padding: 14px 36px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}
.hero-btn:hover { transform: translateY(-3px); }

Hero ऊपर का बड़ा नज़र खींचने वाला banner है. यह modern look के लिए linear-gradient background (backgrounds chapter से रंगीन gradient), बड़ी heading वाला centered white text, और प्रमुख call-to-action button use करता है. Button hover-lift वाला inline-block styled link है (translateY(-3px) + transition). उदार padding: 80px 0 उसे वह विशाल, प्रभावशाली feel देता है. यह section ध्यान खींचने और वह एक action कराने को design किया गया है जो आप visitors से चाहते हैं — landing page का पूरा मकसद.

Step 4: Features Grid

.features {
    padding: 70px 0;
    background: var(--light);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.feature-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.feature-card h3 { margin-bottom: 12px; }
.feature-card p { color: var(--gray); }

Features section CSS Grid की superpower दिखाता है. वह एक line — grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) — एक responsive card grid बनाता है जो अपने आप desktop पर 3 columns, tablet पर 2, और phone पर 1 दिखाता है, KOI media query की ज़रूरत नहीं (grid chapter का auto-fit जादू). हर feature card पिछले project का ठीक वही card-lift hover effect reuse करता है. यही आपने जो सीखा उसकी खूबसूरती है: कुछ अच्छे चुने rules लगभग मुफ्त में पूरी तरह responsive, interactive feature showcase बनाते हैं.

Step 5: Responsive बनाना

/* Phones par nav stack karo aur hero text chhota karo */
@media (max-width: 600px) {
    .nav-inner {
        flex-direction: column;
        gap: 12px;
    }
    .hero h1 {
        font-size: 2rem;      /* chhoti screens par chhoti heading */
    }
    .hero {
        padding: 60px 0;
    }
}

Features grid auto-fit की वजह से पहले से responsive है, तो हमें बाकी के लिए सिर्फ कुछ media-query tweaks चाहिए. तंग screens (max-width: 600px) पर, हम nav को vertical stack में switch करते हैं (flex-direction: column) ताकि logo और links न ठुंसें, और बड़ी hero heading सिकोड़ते हैं ताकि आराम से fit हो. यह mobile-friendly design practice में है: ज़्यादातर layout अपने आप adapt होता है (fluid container, flexible grid), और media queries सिर्फ उन specific जगहों को संभालती हैं जिन्हें जानबूझकर adjustment चाहिए. वही efficient, modern responsive workflow है.

तैयार Page — पूरा HTML structure

<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="container nav-inner">
            <div class="logo"><strong>MySite</strong></div>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero -->
    <section class="hero">
        <div class="container">
            <h1>Build Beautiful Websites</h1>
            <p>Learn HTML & CSS the simple way with CodeKaFunda.</p>
            <a href="#" class="hero-btn">Get Started</a>
        </div>
    </section>

    <!-- Features -->
    <section class="features">
        <div class="container">
            <h2 style="text-align:center">Why Choose Us</h2>
            <div class="features-grid">
                <div class="feature-card"><h3>Simple</h3><p>Easy to follow lessons.</p></div>
                <div class="feature-card"><h3>Bilingual</h3><p>Hindi and English both.</p></div>
                <div class="feature-card"><h3>Free</h3><p>100% free forever.</p></div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer style="background:var(--dark);color:white;text-align:center;padding:30px 0">
        <p>&copy; 2026 MySite. All rights reserved.</p>
    </footer>
</body>

और यह एक पूरा, responsive landing page है — बधाई हो, आपने CSS course पूरा कर लिया! इस HTML को ऊपर के steps की सारी CSS के साथ जोड़िए (<style> tag या linked file में) और browser में खोलिए — window resize करके इसे adapt होते देखिए. देखिए आपने क्या-क्या use किया: variables, flexbox, grid, box model, shadows, transitions, transforms, और media queries — POORA course, एक असली page में एक साथ काम करते. अब आपके पास किसी भी website को style करने का कौशल है. सबसे अच्छा अगला कदम है बनाते रहना: इस page को tweak कीजिए, अपना खुद का बनाइए, और चीज़ें बनाइए. ऐसे ही आप CSS में सच में महारत पाते हैं. शाबाश!

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

<body>
    
    <nav class="navbar">
        <div class="container nav-inner">
            <div class="logo"><strong>MySite</strong></div>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

<section class="hero">
        <div class="container">
            <h1>Build Beautiful Websites</h1>
            <p>Learn HTML & CSS the simple way with CodeKaFunda.</p>
            <a href="#" class="hero-btn">Get Started</a>
        </div>
    </section>

<section class="features">
        <div class="container">
            <h2 style="text-align:center">Why Choose Us</h2>
            <div class="features-grid">
                <div class="feature-card"><h3>Simple</h3><p>Easy to follow lessons.</p></div>
                <div class="feature-card"><h3>Bilingual</h3><p>Hindi and English both.</p></div>
                <div class="feature-card"><h3>Free</h3><p>100% free forever.</p></div>
            </div>
        </div>
    </section>

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #2563eb;
    --dark: #1f2937;
    --gray: #6b7280;
    --light: #f9fafb;
    --space: 20px;
    --radius: 12px;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
}
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;      /* the responsive container pattern */
}

.navbar {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: var(--space) 0;
}
.nav-inner {
    display: flex;
    justify-content: space-between;   /* logo left, links right */
    align-items: center;
}
.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s;
}
.nav-links a:hover { color: var(--primary); }

.hero {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    text-align: center;
    padding: 80px 0;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 16px;
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 28px;
    opacity: 0.9;
}
.hero-btn {
    display: inline-block;
    background: white;
    color: var(--primary);
    padding: 14px 36px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}
.hero-btn:hover { transform: translateY(-3px); }

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.