Skip to content
Submitted almost 3 years ago

stats-preview-card-component-main

Victor•50
@zekt1209
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

I had to improvise the images color because it originally came in back & white, I added a violet container and reduce the opacity of the image to %50 and I got that result, My question is if im okay on that step.

Community feedback

  • Maciej Duda•100
    @mcdudPosted almost 3 years ago

    Hi, @zekt1209!

    Really nice job with this one!

    • nice, clean code, easy to understand.
    • you could look into CSS relative units, to make your card scalable.
    • your solution with the image looks fine, you could also do this like this:
    .article-img {
  width: 50%;
  background-color: rgb(166, 102, 206);
}
.article-img img {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  mix-blend-mode: multiply;
}

    You can also look at my solution and see how you can add overlay on image with ::after pseudoelement.

    Good luck!

    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