Card construído usando FLEXBOX

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Fala Caio!

  Seu projeto ficou muito bom!

  Tenho uma sugestão:

  • Notei que você utilizou margin pra afastar o card do topo na tentativa de centralizar o card.

  Usar margin pra esse objetivo não é a melhor opção. Existe uma maneira melhor e mais eficiente de posicionar elementos no meio da página (tanto na vertical quanto na horizontal):

  📌 Aplique isso ao body:

  body {
      min-height: 100vh;
      display: flex;  /*  também funciona com grid  */
      justify-content: center;
      align-items: center;
  }
  

  Espero que te ajude! 😊

  Marked as helpful

  0

  ---

  

  Caio Querino•70

  @CaioQuerinoPosted 10 months ago

  @danielmrz-dev muito obrigado, eu vou subi daqui a pouco as atualizações. Usei seu código para centralizar o meu conteúdo no centro do corpo do conteúdo.

  atualizado

  0
• 

  Lucas Daher•220

  @lucasdaherPosted 10 months ago

  Belo trabalho! Porém, tenho alguns pontos que podem melhorar o seu código:

  1) Ao estilizar a página, não necessariamente toda a estilização precisa estar dentro de media query.

  Vou te dar um exemplo que não vem do seu código, mas pode te ajudar a entender o que estou querendo dizer:

  // Default style
  .container {
       background-color: red;
  }
  
  // Responsive to max-width 720px
  @media screen and (max-width: 720px) {
          .container {
               background-color: blue;
          }
  }
  

  Ou seja, o container vai ter sempre a cor de fundo vermelha. Mas quando o tamanho da tela for menor que 720px, a cor de fundo do container vai se tornar azul.

  2) Atente-se também a escrita! No seu código foi utilizado uma div com a classe conteiner, quando na verdade a escrita correta dessa palavra seria container.

  Geralmente as empresas utilizam todos os nomes de classes, ids e afins em Inglês. Recomendo trocar os nomes que foram utilizados nas classes: titulo e paragrafo para title e paragraph.

  3) Sobre a sua dúvida sobre a utilização de grids, neste projeto não houve necessidade da utilização de grids, então fez certo ao utilizar flex.

  Espero ter ajudado! E se eu te ajudei, marque este feedback para me ajudar :)

  Marked as helpful

  0

  ---

  

  Caio Querino•70

  @CaioQuerinoPosted 10 months ago

  Obrigado @lucasdaher, dessa forma eu não precisaria de mais um arquivo como por exemplo, 'style.css' eu já poderia colocar as propriedades dentro do próprio arquivo 'responsive.css'.

  0