Stats-preview-card-component-using-basic-HTML-and-CSS
Design comparison
Solution retrospective
Hello, World! :)
My main problem solving this challenge was the shade that appears over the picture on the right side, any solution would be much appreciated :D.
Of course, any piece of advice or feedback is welcomed as to how I could improve certain aspects in writing my own code. Thanks to anyone willing to spare a few moments to leave a short recommendation or advice.
As always, big thumbs up for the community :)
Community feedback
- @heisemmaco-devPosted over 1 year ago
Hi sorin7345, Congratulations 👏👏 on completing your project, I like the position your layout. Ok about the purple 💜 color that fade on the pic, you can actually do that by add background color to the tag that wrapped the picture then you add this css property "background-blend-mode: multiple" to that same tag.
I hope you fine this helpful
0 - @justEferePosted over 1 year ago
Hello, you did really great with the result, and here are a few corrections I'll like to point out. You are using the wrong html semantic element. the whole component can be in the <body></body>, a <main></main> or a container div (<div class="container"></div>) as you did. The use of <footer> for the image is wrong, as it can only be used for the footer aspect of the content which there is none here. With that out of the way, Here is the possible way you can implement the color shade over the image.
the image can be set as background value e.g CSS: footer { background: url(image-link); } if that is used, then you can overlay the color over the image by using two background property. see below
footer { background: color, url(image-link); }
or using
footer { background-image: color, url(image-link); }
You can also set a linear-gradient color property value using this. To read more about this, check the link below.
https://css-tricks.com/tinted-images-multiple-backgrounds/
0
Please log in to post a comment
Log in with GitHub
Join 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