Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component Using SCSS

#sass/scss
Kehinde 660

@jonathan401

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


So this is my first project built using scss. It was a wonderful experience for me as I got to use nesting, mixins and stuff. How could I make this solution better?. Your feedback will be highly appreciated.

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

If you want the image to be the same color as in the final design you must move the image and the overlay layer.

So the background image should be the purple layer with the color background-color: rgb(170, 92, 219); (This would be in the parent box) and then the inside box would be with background-image: url("../images/image-header-desktop.jpg"); and to this you put the effect mix-blend-mode: multiply (This property mixes the element that you have put the present property with the background color of the parent element or container element).

In the case that you do not understand me you can review my project of this challenge that I made so that you see more or less to what I refer.

For everything else you have been very well the challenge, congratulations.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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