Stats-preview-card-component-solution
This is a solution to Stats preview card component challenge on Frontend Mentor on Frontend Mentor challenge developed using HTML and CSS
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
Style Guide
Colors
- Very dark blue (main background): hsl(233, 47%, 7%)
- Dark desaturated blue (card background): hsl(244, 38%, 16%)
- Soft violet (accent): hsl(277, 64%, 61%)
- White (main heading, stats): hsl(0, 0%, 100%)
- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)
Typography
Font size
- Heading: 28px
- paragraph: 14px, 24px
Font
- Family: Inter
- Weights: 400, 700
- Family: Lexend Deca
- Weights: 400
What I learned
- use of responisve design elements like, fluid layout, responsize units(rem), flexible images.
- usage of media queries.