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-main

Eríck 130

@Erick-SL

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


What specific areas of your project would you like help with?

I had problems placing the purple color over the image, so I decided to make a background, however, I believe there is an easier way. If you could help me by giving me a tip, I would be grateful.

Community feedback

@AkoToSiJeromeEh

Posted

Hey ! Great work out there with regards on adding color overlay on the image you are correct by adding background-color in .background and adding opacity in img element but it does not match color as the design has , i suggest that you can use mix-blend-mode in order to achieve the color overlay same as the original design . that's all happy coding !

section .imagem img {
  border-radius: 0px 10px 10px 0px;
  height: 100%;
  opacity: .7; // you can adjust this
  object-fit: cover;
  width: 100%;
  mix-blend-mode: multiply; // add this
}

Marked as helpful

0

Eríck 130

@Erick-SL

Posted

@AkoToSiJeromeEh Thank you, I didn't know about this property. I'm still new at this!

0

@AkoToSiJeromeEh

Posted

@Erick-SL np man !

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