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 with CSS3 and HTML5

StrigZ 270

@StrigZ

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


This challenge was unexpectedly difficult.

For some reason, adding color over the picture via background-image and background-color, as I did in the last challenge, did not work.

In addition, properly arranging the text and the picture was much more difficult than I thought it would be.

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Strigz,

Awesome work, looks like your perseverance has paid off!

I always find the challenge more challenging than you think haha.

  • as an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve a closer match to the purple in the design
  • you would also need to explore background-blend-mode. (multiply usually does the trick)

All the best!

Marked as helpful

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