Stats preview Flexbox, Mobile-first Workflow
Design comparison
Solution retrospective
- I had two difficulties in this challange:
- Make the flex items equal width (img and item-content), i ended up having to use the
flex
property but i dont know if that is the best option. - Adding the color overlay, i watched a video that teached me how to do it.
Any feedback is appreciated.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Deren D, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
1.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.
2.One alternative to the overlay effect is to use
mix-blend-mode
instead of this:#color-overlay { width: 100%; height: 100%; background: var(--color-primary-300); opacity: .6; z-index: 1; position: absolute; }
Import the image using
<img>
and apply:img { mix-blend-mode: multiply; opacity: 75%;}
✌️ I hope this helps you and happy coding!
Marked as helpful0@MorbitDemonPosted about 2 years ago@correlucas Thank you for the tips Lucas!! this is really helpful :)
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord