Layout responsivo com display grid

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá Matheus, parabéns por ter concluído mais um projeto, ele está muito bem feito.

  Gostaria de dar algumas dicas, eu ia começar falando da parte do ::hover mas o comentário acima (ou abaixo) já fala dessa parte, então vou falar sobre algumas outras coisas.

  O círculo na secção da esquerda está meio oval, caso você queira deixar mais redondo, você pode remover o padding e substituir por um width: 180px, que dessa forma ele irá ficar redondo, e caso faça isso, não esqueça de adicionar o text-align: center;.

  E uma sugestão, que eu não lembro se já havia dado ela pra você, se sim, já peço desculpas por estar sendo repetitivo, mas é sobre a parte semântica. A parte semântica do HTML é muito importante, não só pelo SEO, mas também porque aumenta a acessibilidade do seu projeto. Abaixo vou mostrar algumas tags que poderiam ser substituídas por tags semânticas.

  • <div class="result-container"> poderia ser uma <section>, isso porque esse secção toda tem conteúdo relacionado um com o outro e são dependentes do conteúdo principal.
  • <div class="summary-container"> também poder ser uma <section> ou até um <article> pois o conteúdo que ali está presente está totalmente ligado entre si, e fica a critério se ele é ou não autoexplicativo.

  Agora uma sugestão, evite ao máximo utilizar classes em português e inglês, tente sempre manter uma consistência, isso porque eu pessoalmente já tive colegas que foram reprovados em entrevista por causa dessa mistura. Recomendo que coloque tudo sempre em inglês, mas se você não tiver conhecimento na língua inglesa, você pode colocar tudo em português.

  Edit: Perdão, havia esquecido de falar da parte da responsividade, ele não está errado, é só você remover o align-items: center da parte responsiva, que aí ele irá crescer para cima.

  E novamente parabéns pelo seu projeto, continue buscando aprender e se aprimorar. Caso algo que eu tenha dito tenha ficado confuso, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Matheus Bustamante•260

  @MTbustamante98Posted 7 months ago

  @R3ygoski Just one question, how do you place those small borders in each corner of the round containers?

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá novamente @MTbustamante98, para adicionar essa borda arredondada em cada lado se utiliza o border-radius passando 4 valores, exemplo: border-radius: 10px 5px 20px 40px; isso fará com que:

  • topo-esquerdo tenha 10px;
  • topo-direito tenha 5px;
  • inferior-direito tenha 20px;
  • inferior-esquerdo tenha 40px.

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component button hover state background has not been set yet.

  ---

  • Just add the following css rules

  botao:hover {
      background-image: linear-gradient(#6542FE, #342CE2);
  }
  

  ---

  • Now your component's button background for hover state has been set properly

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0