Skip to content
Submitted over 2 years ago

Stats Preview Card Component Using SCSS

Kehinde•660
@jonathan401
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @Sdann26Posted over 2 years ago

    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

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