Project 3: Animated Pricing Table

Whether you are signing up for an online video streaming service or choosing a classroom tuition package at a premier coaching institute, you have seen a Pricing Table. A great pricing table is not just a lifeless list of numbers—it is an interactive, psychology-driven interface that clearly highlights the most popular tier, rewards user hover with satisfying micro-interactions, and adapts smoothly to any screen size.

In this capstone project for Intermediate CSS, we will combine Flexbox, CSS Variables, Transitions, Transforms, Pseudo-elements, and Box-Shadows to build an animated, commercial-quality Course Tuition Pricing Table.

1. Project Blueprint and Visual Hierarchy

A successful pricing table directs the student's eyes immediately to the best value option. Here is the architectural layout:

+-------------------------------------------------------------------------+
|                  PRICING TABLE ARCHITECTURE & INTERACTION               |
+-------------------------------------------------------------------------+

              [SECTION HEADER: Choose Your Learning Track]
              
                 [TOGGLE PILL: (o) Monthly  |  ( ) Annual (Save 20%)]
                                     |
                                     v
   +--------------------+  +--------------------+  +--------------------+
   | TIER 1: FOUNDATION |  | TIER 2: PRO (HERO) |  | TIER 3: MASTER     |
   |                    |  |                    |  |                    |
   |                    |  | [POPULAR BADGE]    |  |                    |
   | Rs 1,499 / mo      |  | Rs 2,999 / mo      |  | Rs 4,999 / mo      |
   |                    |  |                    |  |                    |
   | - Recorded Lectures|  | - Recorded + LIVE  |  | - Everything in Pro|
   | - Weekly Quizzes   |  | - 1-on-1 Mentorship|  | - Personal Coach   |
   | - Standard Notes   |  | - All Test Series  |  | - Physical Books   |
   |                    |  |                    |  |                    |
   | [Select Plan]      |  | [JOIN PRO TRACK]   |  | [Select Plan]      |
   +--------------------+  +--------------------+  +--------------------+
     (Base Elevation)       (Pre-scaled 1.05x,      (Base Elevation)
                             Emerald Border,
                             Multi-layered Glow)
                                     |
               [HOVER EFFECT: Cards lift translateY(-8px)]

2. Key CSS Techniques Showcased

1. 1
   Visual Hierarchy & Middle Card Elevation: Scaling the popular tier (transform: scale(1.05)) so it physically stands out even before the user hovers.
2. 2
   "Most Popular" Ribbon with Absolute Positioning: Crafting a badge that overlaps the top border using position: absolute; top: -14px; left: 50%; transform: translateX(-50%);.
3. 3
   Smooth Micro-Interactions: Combining transition: transform 0.3s ease, box-shadow 0.3s ease; with subtle lift (translateY(-8px)).
4. 4
   CSS Feature Checkmarks: Styling custom green checkmarks and disabled strikethroughs using CSS pseudo-elements (::before).
5. 5
   Interactive Toggle Switch: Building a pure CSS monthly/annual pill toggle using an invisible <input type="checkbox"> and the adjacent sibling selector (+ .toggle-slider).

3. Step-by-Step Construction

Step 1: The Design Tokens & Base Theme

We define our primary indigo brand color, vibrant emerald for the recommended package, neutral card backgrounds, and easing speeds:

Step 2: Flexbox Card Container

The container uses display: flex with align-items: center so the non-featured cards sit comfortably while the featured card can naturally expand taller:

Step 3: Elevating the "Most Popular" Card

The middle card is given a prominent gradient border, subtle default scaling, and high-contrast button:

Step 4: Fluid Hover Micro-Interactions

When a student hovers over any card, it floats upward with an expanded ambient glow:

4. Complete, Runnable Project Code

Save this complete HTML and CSS file as pricing.html and view it in your browser:

5. Do's and Don'ts

6. Quick Revision Summary Cheat Sheet

• Visual Dominance: Use transform: scale(1.04) and a distinctive border to create natural focal emphasis on the recommended plan.
• Micro-Interaction: transform: translateY(-8px) combined with soft expanding box-shadow provides responsive tactile feedback.
• Button Pinning: Applying flex-grow: 1 on the feature checklist ensures all buttons align horizontally across every tier card.
• Responsive Stacking: Switch the flex parent to flex-direction: column and reset card scaling on small mobile devices.

Multiple Choice Questions

1. In modern pricing tables, why is the middle or recommended card often given transform: scale(1.04) by default?

A. Because the browser renders large text faster B. To create visual hierarchy and immediately draw the student's eyes to the highest-value option C. To prevent the user from clicking the other cards D. To disable CSS transitions on the side cards Answer: B Explanation: Visual hierarchy in UI design guides user focus. Pre-scaling the recommended option makes it instantly distinguishable as the primary plan.

2. How can you ensure that the CTA buttons across all three pricing cards stay aligned at the exact bottom, even if one card has more feature bullets?

A. Use margin-top: 500px on all buttons B. Set display: flex; flex-direction: column; on the card and flex-grow: 1; on the features list C. Set position: fixed on the buttons D. Make the text inside all cards identical Answer: B Explanation: Giving flex-grow: 1 to the features checklist absorbs all leftover vertical space in the flex column, pushing the button directly to the bottom.

3. Which CSS positioning strategy allows the "Most Recommended" pill tag to float half-way over the top edge of the card?

A. position: static; margin-top: -10px; B. position: absolute; top: -14px; left: 50%; transform: translateX(-50%); on a relatively-positioned card C. display: inline-block; float: left; D. position: fixed; top: 0; left: 0; Answer: B Explanation: Positioning the badge absolute with top: -14px, left: 50%, and transform: translateX(-50%) anchors it relative to the parent card and centers it horizontally across the top border.

4. What happens when a user hovers over a card with transform: translateY(-8px);?

A. The card shrinks by 8 pixels B. The card smoothly elevates 8 pixels upward towards the top of the viewport C. The card shifts 8 pixels to the left D. The background color turns transparent Answer: B Explanation: Negative translateY moves an element upwards along the vertical Y-axis, creating an appealing floating or lift effect.

5. Why should transform: scale(1.04) on the featured card be reset or removed inside mobile media queries (max-width: 740px)?

A. Mobile browsers do not support CSS transforms B. When stacked vertically, an oversized card can look awkwardly misaligned or trigger unwanted horizontal scrollbars on narrow screens C. It speeds up mobile network loading times D. Mobile devices do not support box-shadows Answer: B Explanation: On mobile screens where cards are stacked in a single vertical column, oversized scaling can cause awkward layout asymmetry and horizontal overflow.

Hands-on Practice Challenge

Add a pure CSS "Annual Billing (Save 20%)" discount toggle badge above the pricing table.

Requirements:

1. 1
   Above the cards, create a toggle pill container with two options: "Monthly" and "Annual (Save 20%)".
2. 2
   When the "Annual" option is active, display a glowing emerald discount tag (background: #10b981; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem;).
3. 3
   Add a smooth transition when switching between the active and inactive options.

Complete Solution: