This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
I have analyzed the design first and found out the key things to be implemented..then after visualizing i have coded with mobile first approach..please note that this is best viewable on mobiles and laptops but not tablets.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
While making this stats card the most challenging part for me was the soft violet overlay over the image. this is the first time i have made an overlay by doing a bit research on internet.
I would like to make some cool card effects as well as numbers growing effects using Css animations in future
- Overlays - This blog helped me to understand Image Overlays.It is well structured and easy to understand