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 with HTML and CSS

Lumensum 10

@Lumensum

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


I know there are some small mistakes, but I do not know how to fix them. I have been teaching myself CSS for only about a month and constructive critique is very welcome.

Community feedback

@WayneHaworth

Posted

Looks good to me :)

The image isn't quite reaching the bottom of the container. Play around with the height to fix this.

You might also consider using a background image instead of an image, as the picture isn't really part of the content on the page - I can see in your CSS that you have looked into trying a background image here, perhaps you had difficulty getting the overlay to work with a background image?

I solved this in another exercise by combining the background image with a gradient, like so:

background: linear-gradient(rgba(77, 150, 168, 0.9), rgba(77, 150, 168, 0.9)), url(../images/image-footer-tablet.jpg);

Maybe you could try this and see if you can get it working?

You have some good class naming habits built-in for only a month, great work! :)

1

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