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 with CSS Flexbox

P

@ShanePinderDev

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


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

@msuryaditriputraR

Posted

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

P

@ShanePinderDev

Posted

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

0
P

@ShanePinderDev

Posted

@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

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