Solution : Live Site URL
Solution submitted at Frontend Mentor - Submission link
This is a solution to the Stats preview card component challenge on Frontend Mentor.
Your challenge is to build out this card component and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout depending on their device's screen size
- HTML
- CSS
- CSS Grid
- CSS Flexbox
- CSS Animations
Most of the challenge was straightforward except the hero image's position and color tint. I tried using CSS background properties for the hero image and its color tint, I struggled with its positioning and getting the perfect color tint as per the challenge specs. A lot to learn about CSS background image properties.
Need to do some more reading and practice of the CSS background image and color properties.
- Live solution screenshot(s)