Skip to content
Submitted over 3 years ago

Stats preview card component - HTML & CSS

Oghenekome Akaka•90
@komecodes
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 am having some problems implementing the color overlay in the header image. I'll try again and update this solution but any feedback or help is welcomed.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey great work on this one. Both desktop and mobile layout is good and there are no issues that I saw.

    Regarding your query, since you are just using opacity right. Just simply add a background-color to the header selector. background-color: hsl(277deg 47% 42%); maybe this will help, or just tweak that color.

    A lot of submission are using background-blend-mode. An alternative is to only use opacity. Like what you did, adding opacity on the image, then adding that background-color to the container. It will naturally blend, since the image's opacity is not full.

    Marked as helpful
    1
    Oghenekome Akaka•90
    @komecodesPosted over 3 years ago

    @pikamart Thank you so much. I'll try your suggestion. 🙌🏾

    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