Frontend Mentor - Stats preview card component

The challenge

My challenge was to build out this card component and get it looking as close to the design as possible.

My biggest challenge in this project was to get the purple filter on the picture. So thank you for this challenge becouse now I am familiar with the 'background-blend-mode' property in CSS.

Screenshot

Links

https://ginver.github.io/fm-stats-preview-card-component/

My process

• identifing elements
• building the html sturcture
• giving names to elements for styling using BEM
• styling (reset, width&flow, fonts, padding & margin, colors, fine-tuning the rest)
• responsive design

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

Author

• Frontend Mentor - @Ginver (https://www.frontendmentor.io/profile/Ginver)

Acknowledgments

Thank you for #Reinoptland (https://youcancodeit.com/) to start with this challenge and make me realize how much I like coding.