Skip to content
Submitted 10 months ago

Single price grid component

kaike torres•190
@kaiketorres
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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,270
    @danielmrz-devPosted 10 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
    1
  • Yong Zhi•110
    @pohyongzhiPosted 10 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
    1

Please log in to post a comment

Log in with GitHub

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