Submitted 9 months ago

Single price grid component

kaike torres• 190

@kaiketorres

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, good evening, I did another challenge on this wonderful site, I had a lot of difficulty with the responsiveness part, but after so much time searching on the internet, I believe that the responsiveness was good, and I also didn't use grid because I haven't learned it yet, so I did everything with flexbox Even so, I accepted contrasting criticisms if you have one❤️

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

Fala Kaike!

Seu projeto ficou ótimo!

Tenho duas pra melhorar seu código:

Primeira: Visto que aquele botão de sign up é um elemento clicável, é uma boa prática adicionar cursor: pointer; a ele.
Segunda: Faça mais o uso de tags semânticas. Exemplo: Ao invés de usar div.backgroud_join_our_community, use main.backgroud_join_our_community.

Essas mudanças de tag tem pouco impacto visual, mas tornam seu código HTML mais semântico e melhoram a otimização SEO e a acessibilidade do seu projeto.

Espero que ajude!

Fora isso, belo trabalho!

Marked as helpful

Yong Zhi• 110

@pohyongzhi

Posted 9 months ago

Hi Kaine,

You solution looks good!

I would suggest .content_join_our_community and .move_cards to be wrapped under a single div. Afterwards, add the border-radius: 0.5rem and overflow: hidden in the wrapped div. This should fix the border issue in mobile view.

Also there is no need to set height as this may cause responsive issue in different screen sizes.

Marked as helpful

Please log in to post a comment

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