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.
This is my solution to making a responsive card using flexbox mainly. I have learned alot of new things in this project especially how to use flex direction, using mix-blend-mode to give the child container a color from its parent. Overall i am satisfied with the outcome.
Users should be able to:
- View the optimal layout depending on their device's screen size
Desktop Version Screenshot
Mobile Version Screenshot
- Repo URL: https://github.com/itspavit/previewcard.github.io
- Live Site URL: https://itspavit.github.io/previewcard.github.io/
I started by thinking about how i should write my HTML. After i was convinced with the HTML i started styling the card using CSS. After all the basic styling was done. I used flexbox to align the card to the center of the page and added media query for desktop. Lastly i added blend mode for the image. Finally made some small changes.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Learned alot especially to not be afraid of making mistakes and experimenting.
Here is some code i am proud of i will use the mix blend mode in future as well.
.header picture img { width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0.9; }
In future i will try using grid for this if time allows.
Pavitpal Singh Bhagat