Stats Preview Card Component
✨ Overview
This project is a responsive stats card component that combines text, layout, and an image overlay using modern CSS practices. It’s designed to be centered vertically and horizontally in the viewport, with smooth typography and visually engaging color overlays.
📐 Layout Features
Full-page centered layout using CSS Grid Split content between textual details and a background image Overlay with blend color for visual contrast Clean reset styles for consistency across browsers Organized with utility classes and BEM-style naming
🛠️ Built With
HTML5
- CSS3 (Flexbox, Grid, Custom Properties)
- Responsive Design Principles
- Utility-first structure for scalable layout
- Google Fonts: Inter and Lexend Deca
🎨 What I Learned
How to center content using display: grid and place-content: center Creating image overlays using ::before, isolation: isolate, and position: absolute Structuring a layout using flexbox within a card component Using semantic naming conventions and CSS variables for color and spacing
🔁 Continued Development
Add mobile styles to make it responsive Include JavaScript interactions like hover effects or animated counters Refactor using a CSS preprocessor like SCSS Convert to a component in a design system