Project 1: Responsive Landing Page with Flexbox

Intermediate16 min read•Updated: 2026-09-10

Project 1: Responsive Landing Page with Flexbox

Welcome to your first major capstone project in Intermediate CSS! Throughout the earlier chapters, you learned about Flexbox containers, alignment properties, custom CSS variables, and media queries. Now, it is time to assemble these concepts into a production-grade, commercial-quality website.

In this project, we will design and code a complete Educational Coaching Academy Landing Page ("Apex Academy"). The entire layout—from the sticky navigation header to the hero banner, features cards, statistics ribbon, and footer—is powered purely by modern Flexbox and CSS variables.

1. Project Blueprint and Wireframe

Before typing CSS, professional developers examine the visual wireframe to identify how containers split along main axes and cross axes across desktop and mobile screens:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  DESKTOP FLEXBOX LAYOUT (min-width: 768px)              |
+-------------------------------------------------------------------------+

  [HEADER] (display: flex; justify-content: space-between; align-items: center)
  +-----------------------------------------------------------------------+
  | [LOGO]                [Home] [Courses] [Faculty] [Results]    [ENROLL]|
  +-----------------------------------------------------------------------+

  [HERO SECTION] (display: flex; align-items: center; gap: 40px)
  +-----------------------------------+-----------------------------------+
  | LEFT COLUMN:                      | RIGHT COLUMN:                     |
  |  - High-impact Headline           |  - Visual Hero Card / Image       |
  |  - Descriptive Paragraph          |  - Floating Experience Badge      |
  |  - Flex CTA Buttons Container     |                                   |
  +-----------------------------------+-----------------------------------+

  [STATS RIBBON] (display: flex; justify-content: space-around; gap: 20px)
  +-----------------+-----------------+-----------------+-----------------+
  | 15,000+ Alumni  | 98.4% Top Ranks | 50+ Top Mentors | 4.9/5 Rating    |
  +-----------------+-----------------+-----------------+-----------------+

  [3-CARD FEATURES] (display: flex; flex-wrap: wrap; gap: 24px)
  +---------------------+ +---------------------+ +---------------------+
  | Card 1 (flex: 1 1)  | | Card 2 (flex: 1 1)  | | Card 3 (flex: 1 1)  |
  +---------------------+ +---------------------+ +---------------------+

+-------------------------------------------------------------------------+
|                  MOBILE RESPONSIVE COLLAPSE (max-width: 767px)          |
+-------------------------------------------------------------------------+

  - Header navigation stacks or wraps cleanly.
  - Hero section flips direction: flex-direction: column-reverse or column.
  - 3-Card features wrap automatically to 100% width via flex-basis: 100%.
  - Stats ribbon wraps into a 2x2 cluster.

2. Core Concepts Reinforced in this Project

1
Global Design Tokens (:root): Centralizing theme colors, typography fonts, and border radii so changing a brand color takes 2 seconds.
2
Sticky Flex Navigation: Using position: sticky, top: 0, and backdrop-filter for modern frosted glass navigation.
3
Equal-Height Flex Cards: Utilizing align-items: stretch so all feature cards match height automatically regardless of text length.
4
Flexible Responsive Wrapping: Combining flex-wrap: wrap with flex: 1 1 280px to create fluid columns that adapt to any screen width without hardcoded pixel widths.
5
Fluid Button Groups: Laying out primary and secondary action buttons using a nested flex container.

3. Step-by-Step Architecture Breakdown

Step 1: Design Tokens & Base Setup

We establish CSS variables for our brand color palette (deep slate blue, vibrant emerald green accents, and neutral background tones):

root {
--primary: #1e3a8a;
--primary-hover: #1d4ed8;
--accent: #10b981;
--accent-light: #d1fae5;
--text-dark: #0f172a;
--text-muted: #475569;
--bg-canvas: #f8fafc;
--bg-card: #ffffff;
--radius-md: 12px;
--radius-lg: 20px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.1);
--transition-fast: 0.25s ease;
15}

The brand logo sits on the far left, links in the center, and the call-to-action button on the far right using justify-content: space-between:

navbar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 5%;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid #e2e8f0;
13}

Step 3: Two-Column Hero Split

On desktop monitors, text and image sit side-by-side. When the screen drops below 768px, media queries switch the hero container to flex-direction: column:

1.hero-section {
2  display: flex;
3  align-items: center;
4  justify-content: space-between;
5  gap: 48px;
6  padding: 60px 5%;
7}
8 
9.hero-content {
10  flex: 1 1 500px;
11}
12 
13.hero-visual {
14  flex: 1 1 420px;
15}
16 
17@media (max-width: 768px) {
18  .hero-section {
19    flex-direction: column;
20    text-align: center;
21    padding: 40px 5%;
22  }
23}

Step 4: The 3-Column Feature Cards Deck

Instead of writing complex math, we use flex: 1 1 280px. On desktops, three cards sit on a single row. On mid-size tablets, two cards sit on row 1, and the third stretches across row 2. On phones, each card occupies 100% width!

features-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
5}
6 
feature-card {
flex: 1 1 280px;
background: var(--bg-card);
padding: 32px 24px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
14}
15 
feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
19}

4. Complete, Runnable Project Code

Here is the entire standalone HTML and CSS file. You can save this as index.html and open it directly in any browser:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Academy - Premier Coaching Institute</title>
<style>
  /* ==========================================================================
     1. CSS VARIABLES & SYSTEM RESETS
     ========================================================================== */
  :root {
    --primary: #1e3a8a;
    --primary-dark: #172554;
    --accent: #059669;
    --accent-light: #ecfdf5;
    --text-main: #0f172a;
    --text-muted: #475569;
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --border-subtle: #e2e8f0;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-hover: 0 20px 30px -10px rgba(30, 58, 138, 0.15);
    --speed-normal: 0.3s ease;
  }
28 
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }
35 
  body {
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.6;
  }
41 
  /* ==========================================================================
     2. STICKY FLEXBOX NAVIGATION
     ========================================================================== */
  .header-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 6%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }
58 
  .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
  }
68 
  .brand-logo .logo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
  }
81 
  .nav-menu {
    display: flex;
    gap: 28px;
    list-style: none;
  }
87 
  .nav-menu a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color var(--speed-normal);
  }
95 
  .nav-menu a:hover {
    color: var(--primary);
  }
99 
  .btn-primary {
    padding: 10px 22px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background var(--speed-normal), transform var(--speed-normal);
  }
113 
  .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }
118 
  /* ==========================================================================
     3. HERO SECTION (2-COLUMN FLEX)
     ========================================================================== */
  .hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 70px 6% 50px;
    max-width: 1280px;
    margin: 0 auto;
  }
131 
  .hero-info {
    flex: 1 1 520px;
  }
135 
  .pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
  }
148 
  .hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-dark);
    margin-bottom: 18px;
  }
156 
  .hero-title span {
    color: var(--accent);
  }
160 
  .hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 500px;
  }
167 
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
173 
  .btn-secondary {
    padding: 10px 22px;
    background: #ffffff;
    color: var(--text-main);
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--speed-normal), background var(--speed-normal);
  }
185 
  .btn-secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }
190 
  .hero-graphic {
    flex: 1 1 450px;
    position: relative;
  }
195 
  .hero-graphic img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
  }
203 
  .floating-stats-card {
    position: absolute;
    bottom: -20px;
    left: 30px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 14px;
  }
216 
  .stats-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
  }
229 
  /* ==========================================================================
     4. STATS RIBBON (FLEX HORIZONTAL DISTRIBUTION)
     ========================================================================== */
  .stats-ribbon {
    max-width: 1280px;
    margin: 40px auto 70px;
    padding: 0 6%;
  }
238 
  .stats-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    background: #ffffff;
    padding: 30px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-subtle);
  }
251 
  .stat-item {
    text-align: center;
    flex: 1 1 160px;
  }
256 
  .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 4px;
  }
263 
  .stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
  }
269 
  /* ==========================================================================
     5. FEATURES SECTION (3-CARD FLEX DECK)
     ========================================================================== */
  .section-container {
    max-width: 1280px;
    margin: 0 auto 80px;
    padding: 0 6%;
  }
278 
  .section-header {
    text-align: center;
    margin-bottom: 44px;
  }
283 
  .section-header h2 {
    font-size: 2.2rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
  }
289 
  .section-header p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
  }
295 
  .cards-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
301 
  .card {
    flex: 1 1 300px;
    background: var(--bg-card);
    padding: 36px 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--speed-normal), box-shadow var(--speed-normal);
  }
314 
  .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
319 
  .card-icon-box {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
332 
  .card h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
  }
338 
  .card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
    flex-grow: 1;
  }
345 
  .card-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
355 
  .card-link:hover {
    text-decoration: underline;
  }
359 
  /* ==========================================================================
     6. FOOTER
     ========================================================================== */
  .site-footer {
    background: var(--primary-dark);
    color: #cbd5e1;
    padding: 40px 6%;
    text-align: center;
    border-top: 1px solid #1e293b;
  }
370 
  /* ==========================================================================
     7. RESPONSIVE MEDIA QUERIES
     ========================================================================== */
  @media (max-width: 880px) {
    .hero-container {
      flex-direction: column;
      text-align: center;
      padding-top: 40px;
    }
380 
    .hero-subtitle {
      margin: 0 auto 32px;
    }
384 
    .hero-actions {
      justify-content: center;
    }
388 
    .floating-stats-card {
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
      justify-content: center;
    }
  }
396 
  @media (max-width: 640px) {
    .header-nav {
      flex-direction: column;
      gap: 16px;
    }
402 
    .nav-menu {
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
408 
    .hero-title {
      font-size: 2rem;
    }
  }
</style>
414</head>
415<body>
416 
<!-- 1. STICKY FLEX NAVBAR -->
<header class="header-nav">
  <a href="#" class="brand-logo">
    <div class="logo-icon">A</div>
    Apex Academy
  </a>
423 
  <ul class="nav-menu">
    <li><a href="#about">About</a></li>
    <li><a href="#courses">Courses</a></li>
    <li><a href="#mentors">Mentors</a></li>
    <li><a href="#results">Results</a></li>
  </ul>
430 
  <a href="#enroll" class="btn-primary">Enroll Now</a>
</header>
433 
<!-- 2. HERO SECTION -->
<main>
  <section class="hero-container">
    <div class="hero-info">
      <div class="pill-badge">
        <span>&#9733;</span> Admissions Open for 2026-27
      </div>
      <h1 class="hero-title">Empowering Future <span>Olympiad & IIT</span> Champions</h1>
      <p class="hero-subtitle">Comprehensive coaching for CBSE, ICSE, JEE, and NEET with personalized mentor sessions and weekly assessment diagnostics.</p>
      <div class="hero-actions">
        <a href="#register" class="btn-primary">Book Free Trial Class</a>
        <a href="#syllabus" class="btn-secondary">Download Syllabus</a>
      </div>
    </div>
448 
    <div class="hero-graphic">
      <img 
        src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&auto=format&fit=crop&q=80" 
        alt="Students learning together in modern classroom"
      >
      <div class="floating-stats-card">
        <div class="stats-circle">&#10003;</div>
        <div>
          <strong>100% Concept Mastery</strong>
          <p style="font-size: 0.8rem; color: #64748b;">Adaptive AI Tests Included</p>
        </div>
      </div>
    </div>
  </section>
463 
  <!-- 3. STATS RIBBON -->
  <section class="stats-ribbon">
    <div class="stats-inner">
      <div class="stat-item">
        <div class="stat-number">15,000+</div>
        <div class="stat-label">Successful Students</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">99.2%</div>
        <div class="stat-label">Board Exam Pass Rate</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">45+</div>
        <div class="stat-label">IIT-JEE Top 500 Ranks</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">4.9 / 5</div>
        <div class="stat-label">Parent Satisfaction Score</div>
      </div>
    </div>
  </section>
485 
  <!-- 4. 3-CARD FEATURES DECK -->
  <section class="section-container" id="courses">
    <div class="section-header">
      <h2>Why Parents & Students Choose Us</h2>
      <p>Proven educational pedagogy paired with interactive problem-solving workshops designed for Indian competitive examinations.</p>
    </div>
492 
    <div class="cards-deck">
      <div class="card">
        <div>
          <div class="card-icon-box">&#9881;</div>
          <h3>Conceptual Foundation</h3>
          <p>We eliminate rote memorization. Every science and math theorem is demystified through hands-on lab experiments and real-life models.</p>
        </div>
        <a href="#" class="card-link">Learn about pedagogy &rarr;</a>
      </div>
502 
      <div class="card">
        <div>
          <div class="card-icon-box">&#9783;</div>
          <h3>1-on-1 Doubt Resolution</h3>
          <p>Never get stuck on difficult questions. Our certified faculty conducts daily post-class doubt-clearing sessions both offline and online.</p>
        </div>
        <a href="#" class="card-link">Meet our mentors &rarr;</a>
      </div>
511 
      <div class="card">
        <div>
          <div class="card-icon-box">&#128200;</div>
          <h3>Diagnostic Analytics</h3>
          <p>Receive detailed weekly performance graphs highlighting strengths, time spent per MCQ, and pinpointed improvement areas.</p>
        </div>
        <a href="#" class="card-link">View sample report &rarr;</a>
      </div>
    </div>
  </section>
</main>
523 
<!-- 5. SITE FOOTER -->
<footer class="site-footer">
  <p>&copy; 2026 Apex Academy Educational Trust. Designed with Modern CSS Flexbox. All rights reserved.</p>
</footer>
528 
529</body>
530</html>

5. Do's and Don'ts

Practice	Bad Approach	Good Approach	Why It Matters
Card Column Sizing	Hardcoding fixed widths like `width: 350px;`	Using `flex: 1 1 280px;`	Fixed widths overflow on small mobile screens; flexible bases adapt fluidly.
Navbar Alignment	Using `float: left` and manual margins for menu links	Using `display: flex; justify-content: space-between;`	Flexbox distributes spacing automatically without fragile clearfixes.
Card Content Stretch	Letting cards become different heights when description text varies	Using default `align-items: stretch` on the flex deck and `display: flex; flex-direction: column` inside the card	Produces a clean, cohesive visual baseline across all cards.
Theme Consistency	Hardcoding `#1e3a8a` across 40 separate lines of CSS	Storing the primary color in `--primary` under `:root`	Enables global theme adjustments in one centralized place.

6. Quick Revision Summary Cheat Sheet

Sticky Navigation: position: sticky; top: 0; paired with backdrop-filter: blur(10px); produces modern frosted headers.
Hero Stacking: Change flex-direction: row to flex-direction: column inside media queries for effortless mobile adaptations.
Multi-Card Wrap: Set display: flex; flex-wrap: wrap; gap: 24px; on the parent and flex: 1 1 280px; on each card for automatic multi-device grids.
Nested Flex Containers: Use inner flex columns (flex-direction: column; justify-content: space-between;) to push card action buttons neatly to the bottom edge.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

In the 3-card features deck, what is the effect of setting flex: 1 1 280px on each card inside a container with flex-wrap: wrap?

Question 2

Which Flexbox property on the navigation bar keeps the brand logo on the left and the CTA button on the right?

Question 3

How does the hero section transition from a side-by-side desktop layout to a stacked mobile layout?

Question 4

Why is backdrop-filter: blur(10px) paired with a translucent background like rgba(255, 255, 255, 0.9) on the sticky header?

Question 5

Why should design variables like --primary and --radius-md be declared inside the :root selector?

Hands-on Practice Challenge

Enhance the Apex Academy landing page by adding a responsive FAQ accordion preview section using pure CSS Flexbox.

Requirements:

1
Create a section titled "Frequently Asked Questions" with a container max-width of 900px.
2
Build 3 FAQ question-and-answer rows using display: flex; flex-direction: column; gap: 16px;.
3
Each FAQ card must have an inner header flexbox row (display: flex; justify-content: space-between; align-items: center;) with the question on the left and a circular plus icon on the right.
4
Add smooth hover elevation with a subtle border highlight.

Complete Solution:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Apex Academy FAQ Challenge</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
13 
  body {
    background: #f1f5f9;
    padding: 40px 20px;
  }
18 
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
  }
23 
  .faq-title {
    text-align: center;
    color: #1e3a8a;
    font-size: 2rem;
    margin-bottom: 30px;
  }
30 
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
36 
  .faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
46 
  .faq-item:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.1);
  }
52 
  .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
58 
  .faq-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
  }
64 
  .faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
  }
77 
  .faq-answer {
    margin-top: 12px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
  }
</style>
85</head>
86<body>
87 
<div class="faq-container">
  <h2 class="faq-title">Frequently Asked Questions</h2>
90 
  <div class="faq-list">
    <div class="faq-item">
      <div class="faq-header">
        <div class="faq-question">What is the student-to-mentor ratio at Apex Academy?</div>
        <div class="faq-icon">+</div>
      </div>
      <p class="faq-answer">We strictly cap batches at 25 students per class to ensure personalized doubt resolution and targeted homework feedback for every student.</p>
    </div>
99 
    <div class="faq-item">
      <div class="faq-header">
        <div class="faq-question">Are trial classes free of cost?</div>
        <div class="faq-icon">+</div>
      </div>
      <p class="faq-answer">Yes! Every newly registered student receives 2 full days of complimentary trial classes across Mathematics, Physics, and Chemistry.</p>
    </div>
107 
    <div class="faq-item">
      <div class="faq-header">
        <div class="faq-question">Do you offer weekend scholarship entrance tests?</div>
        <div class="faq-icon">+</div>
      </div>
      <p class="faq-answer">Yes, our Apex Talent Search Exam (ATSE) is conducted every alternate Sunday, offering up to 100% tuition scholarship fee waivers.</p>
    </div>
  </div>
</div>
117 
118</body>
119</html>

Next Lesson

Project 2: Blog Layout using CSS Grid

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Glassmorphism and Modern Visual Effects: Frosted Glass and Soft UI Design	Project 2: Blog Layout using CSS Grid

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Loading Page Content...

Project 1: Responsive Landing Page with Flexbox

Project 1: Responsive Landing Page with Flexbox

1. Project Blueprint and Wireframe

2. Core Concepts Reinforced in this Project

3. Step-by-Step Architecture Breakdown

Step 1: Design Tokens & Base Setup

Step 2: The Navigation Bar (Space-Between Flex)

Step 3: Two-Column Hero Split

Step 4: The 3-Column Feature Cards Deck

4. Complete, Runnable Project Code

5. Do's and Don'ts

6. Quick Revision Summary Cheat Sheet

Multiple Choice Questions

Hands-on Practice Challenge

Requirements:

Complete Solution:

Project 2: Blog Layout using CSS Grid

Related Lessons

Practice Quiz