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.
If you can suggest any improvements or have seen any thing I should know then feel free to let me know.
In this challenge we have to code the given design of what frontend mentor named as stats preview card components. These are comparatively easy challanges in newbie section. The screenshot below shows you my take on this challenge.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
This is the screenshot of the challenge solution by me.
The design output is as asked, however I have take a different approach on this to make the border-radius work in both horizontal and on vertical view card (or desktop view or mobile view) by a wrapping individual card inside a main div and then applying the border-radius on the main div, and then overflow hidden will cover the extra visible corners.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
In this challange the everything else is relatively easy or I can say that it has been normally done many times but the most difficult or brain squeezer part of this challange was to change the image with respect to width as well as to change its position from left in desktop mode to top in the mobile view mode, and also a little bit new concept for me was to put color overlay on top of the image.
It does taught a lot a lot about position of elements and responsiveness to the screen-size. It was a fun challange to complete.
- This article will introduce a few methods to overlay an image with color in CSS. - Link
- Website - Add your website here
- Frontend Mentor - @v-codey