Skip to content
Submitted over 2 years ago

Stats Preview Card Component

Gustavo Silva•130
@GugaS1lva
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 some problems styling the image color through css. I used some hacks and it worked, but it's far from a good solution to the problem.

Initially, the image provided by Frontend Mentor is in black and white, but in the challenge he asks to make it transparent purple. My problem was how to style the image as I used the 'img' tag itself instead of the 'background image'.

Is there a better way to style the image color through CSS?

Feedback please ☕👌🏻

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi there! 👋

    Regarding the image overlay, try to use mix-blend-mode property. It's possible to create the purple overlay easily with CSS by adjusting the opacity of the img element and mix-blend-mode property.

    Some more suggestions from me.

    • I recommend making the suggestion element as a ul. After that, wrap each list item with li. If the site has no styling then it's more likely to be a list. In general, it's recommended to write the HTML markup without any styling. It allows you to decide on a better HTML markup.
      • 10k+ companies
      • 314 templates
      • 12m+ queries
    • I suggest using picture element for the image-header. It has two versions, mobile and desktop. By using it, you can show the correct image for each layout.

    Also, I recommend simplifying the folder structure and removing the JavaScript file. I notice that the JavaScript has nothing to do with the site so, I suggest removing it.

    That's it! Hope this helps!

    P.S. I strongly recommend removing all the tags. The site is not built with React, Redux, Bootstrap, My SQL, and Node.js.

    Marked as helpful
    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