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

Responsive stats preview card

Kyvs123β€’ 150

@Kyvs123

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 had a hard time setting the image color overlay. Constructive criticism and tips to improve my code are always welcome.

Community feedback

Fraser Wattβ€’ 1,790

@fraserwat

Posted

Hey Kyvs, good work on this one!

Few changes would make:

  • Your heading has the correct use of <h1>, but because its a semantic element, probably doesn't need the class of "heading".
  • You should only have one <h1> element per page, so the <h1> elements inside your .numbers divs I would probably structure like <p><span>10k+</span> companies</p>
  • Would use padding on the <body> so that you don't have the element riding up to the edge of the screen ~800-1200px widths.
  • Try using either margin or flex attributes to move the .attribution element to the bottom of the screen (also think about what you might be able to use instead of a div here)

Happy coding, its looking good!!

Fraser

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