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

@JohnIdenyi

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


Hello, Frontend community! I had difficulty trying to use an overlay for the image, although I think I managed to work something out. Open for suggestions!

Community feedback

Ivan 2,630

@isprutfromua

Posted

Hi there. Good job! I have a few comments and suggestions:

  • your card starts to break at 1337 pixels, which is not good. It would be better if you added these styles
.text-container {
  /* padding: 60px 90px 0 60px; */
  padding: 60px 90px;
}

.image-container {
  /* height: 100%; */
}

.image-container img {
  height: 100%;
  object-fit: cover;
}

So the picture fills the entire space vertically and horizontally.

  • It doesn't make sense to set additional classes for statistics wrappers. They are not unique, so it would be better to use a table element in this case.
<div class="companies">
...
</div>
<div class="templates">
...
</div>

I hope my feedback will be useful.

Good luck and fun coding 🤝⌨️

0

@JohnIdenyi

Posted

@isprutfromua thank you!

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