A clean, responsive pricing section built with pure HTML & CSS — three-tier layout, a highlighted "Popular" plan, smooth hover interactions, and a mobile-first responsive grid.
- Three-tier pricing layout (Starter / Professional / Enterprise) on a CSS Grid
- "Popular" plan highlighted with a distinct border and floating tag
- Card lift + shadow animation on hover
- Animated shine sweep effect on CTA buttons (
::beforeskew transform) - Feature list items shift color and indent on hover for subtle feedback
- Subtle graph-paper background using layered linear gradients
- Font Awesome icon in the footer trial note
- Fully responsive: 3 → 2 → 1 column grid across breakpoints (992px, 768px, 480px)
- Google Fonts (Manrope, weights 400–800) for consistent typography
- HTML5
- CSS3 — Grid, Flexbox, pseudo-elements, media querie
- Google Fonts — Manrope
Clone the repository:
git clone https://github.com/chitrangna-dev/pricing-card.gitMove into the project folder:
cd pricing-cardOpen index.html in your browser — no build step required.
pricing-card/
├── index.html
├── style.css
└── assets/
└── preview.PNG
| Breakpoint | Layout |
|---|---|
| > 992px | 3-column grid |
| ≤ 992px | 2-column grid (Enterprise card spans full width, centered) |
| ≤ 768px | Single column, cards stacked |
| ≤ 480px | Reduced padding, font-size, and badge sizing for small screens |
Deployed on Vercel, connected to GitHub for automatic deployments on every push.
🌐 Live Demo: pricing-card-mauve.vercel.app
- Add a monthly/yearly billing toggle
- Wire up "Get Started" buttons to real checkout / signup flows
- Extract repeated card markup into a JS-driven data map (avoid HTML duplication)
- Add
prefers-reduced-motionsupport to disable hover/shine animations - Improve accessibility — semantic list roles, focus states on buttons/links
Chitrangna
First-year B.Tech CSE student building toward full-stack development. This component is part of my ongoing practice with layout systems, responsive design, and micro-interactions.
This project is licensed under the MIT License.