Skip to content
Submitted over 2 years ago

Stats-preview-card-component-main with CSS Flexbox

Shane Pinder•190
@ShanePinderDev
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

Any suggestions on how to improve my code are welcome.

In particular, I think my purple overlay on the image is too light. I couldn't figure out how to get a darker purple overlay.

Community feedback

  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted over 2 years ago

    Hi Shane Pinder 👋

    You have an interesting idea to make an image purple with a linear-gradient. But I think the best practice and easier is to use the filter property. check the explaination about the filter property. And you can also use css filter generator to make it easier 😄

    For the Accessibility issue do you have, you should wrap the attribution div with footer tag

    I hope this helps and happy coding ☕

    Marked as helpful
    0
    Shane Pinder•190
    @ShanePinderDevPosted over 2 years ago

    @msuryaditriputraR Thank you! I will have a look at the filter property and wrapping the attribution div in a footer element.

    0
    Shane Pinder•190
    @ShanePinderDevPosted over 2 years ago

    @msuryaditriputraR Thanks again! I refactored the HTML and CSS to use the CSS filter element and I have been able to get the darker purple overlay that I was trying to get!

    0
    Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted over 2 years ago

    @ShanePinderDev My Pleasure 😊

    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