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 Card - basic responsive html and css

@mendoncajoao

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 feedback on how to make this project better are welcome!

If you know how to get rid of the purple line under the picture when mobile mode is active, please tell me how!

Thanks!

Community feedback

Account Deleted

Parabéns, seu trabalho ficou incrível 👏

Entretanto, o componente de "status" (último elemento da região esquerda) não segue o layout proposto, isso não é uma boa prática de desenvolvimento, por que é necessário fazer o mais parecido com o design. Em geral, está tudo bem.

Caso o último elemento seja "flexbox", recomendo essa declaração CSS:

/** 💻 -  Os "flex items" serão alinhados à esquerda */
.status_container {
   justify-content: left;
}

Fique à vontade!

Marked as helpful

1

@mendoncajoao

Posted

@lucasbernardol Obrigado pelo feedback.

Não tinha percebido esta diferença. Arrumado.

0

Account Deleted

@mendoncajoao Perfeito 🚀

1

@shashreesamuel

Posted

Good job completing this challenge

Keep up the good work

Your solution looks great however I think that the card title needs to be a bit bigger and the card statistics at the bottom needs some margin bottom between the number and the text.

I hope this helps

Cheers Happy coding 👍

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