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.
A challenge to make a product preview card layout change depending on the size of the screen. It's asked to follow two designs: one made for mobile devices with screen width of 375px, and one made for desktop devices with screen width of 1440px. The designs that mus be followed are inside the design folder.
I started with the HTML5 and then went to the styles on CSS3. The first design I replicated was the mobile one. When I fisinhed it I started the desktop design using the Media Querry technique.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned how to make a filter above an image using the linear gradient and the image desired. It took me awhile to get it done, but what I did was to put this filter on the parent element of the image, not on the image itself, and then I set the opacity of the element to zero. I couldn't get the right aspects of the filter, but that's on me, not on the technique I used.
- Semi-transparent color layer over background-image? - This helped me find a way to make the filter of the image.
- LinkedIn - [https://www.linkedin.com/in/wiklyn-craveiro/]
- Frontend Mentor - @Wiklyn