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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Stats Preview Card with Sassy
- Live Site URL: Frontend Mentor | Stats preview card component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- SaSS
- Gulp
Before this, I use ::before
selector to add color on the image :
.card {
&__image {
background-image: url('../images/image-header-mobile.jpg');
&::before {
content: '';
background-color: var(--softviolet);
display: block;
width: 100%;
height: 100%;
}
}
}
But, I found a way to make the css code shorter using the background-blend-mode
as below :
.card {
&__image {
background-color: var(--softviolet);
background-blend-mode: multiply;
background-image: url('../images/image-header-mobile.jpg');
}
}
I found that flexbox can help me to create website layout. So, I think I should improve my knowledge on flexbox.
- A Complete Guide to Flexbox - This website help me a lot to understand more about flexbox. The guide involve flexbox basic, terms and other that useful for the beginner.
- background-blend-mode - Since in this challenge need me to add color to the image, I found this website help me to get better understanding about background blend.
- background-image - CSS: Cascading Style Sheets | MDN - MDN Web Docs providing lot of information about website and I think this help a lot.
- Frontend Mentor - @AimanAnizan56