Project 3 — Pricing Page

1. Learning Objectives

In this project guide, you will build a comparative Pricing Page. By the end of this project, you will be able to:

• Build an interactive billing toggle switch using CSS pseudo-elements and checkboxes.
• Create a multi-column pricing card layout using Flexbox or CSS Grid.
• Highlight a featured "most popular" card using scale transforms and badge indicators.
• Style clean, list-based feature checklists.
• Manage responsive font and layout scaling.

2. What We Are Building & Design System

We are building a responsive pricing page for a SaaS platform named Indigo SaaS. The page features:

• Billing Toggle: A switch that toggles between Monthly and Yearly billing options.
• Pricing Cards Grid: A 3-column layout (Basic, Pro, Enterprise). The Pro plan card is highlighted to draw attention.
• Feature Checklists: Clean list checkmarks with aligned descriptions.

3. Step-by-Step Implementation Guide

Step 1: HTML Semantic structure

Set up your HTML structure. Use a checkbox input to handle the toggle switch state, and group pricing cards inside a container:

Step 2: Toggle Switch styling

Hide the checkbox input visually, and style its label container as a rounded pill. Use the ::before pseudo-element on the slider class to create the switch knob, and animate its position on click using transform: translateX():

Step 3: Highlight the Featured Card

Highlight your primary offer card (e.g. the Pro plan) by scaling it up slightly, applying a border accent, and adding a "Popular" badge at the top:

4. Full Working Code

Save this self-contained code block as pricing.html to test the responsive pricing page:

5. Reviewing the Build / Self-Correction Checks

Verify your layout handles common web layout constraints:

• Test the toggle switch keyboard focus: Verify that the billing switch checkbox can be focused and toggled using the keyboard (using the Spacebar) to support accessibility.
• Verify cards align: Verify that the footer CTA buttons on adjacent pricing cards align horizontally even if the card description lengths vary. Using display: flex with flex-direction: column and setting margin-top: auto on the button wrapper handles this alignment.
• Check spacing overlap: Verify that the Pro plan "Popular" badge has enough margins to avoid overlapping header layout sections.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this pricing page, you have combined comparative grid structures, toggle buttons, and dynamic price switching logic.

• Next, proceed to **Project 4 — Dashboard** to design layout frames with sticky side panels and data tables.