Vanilla CSS; Flexbox; Media Querie; Hover effects

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala Bruno Afonso, tudo bem? Parabéns pelo desafio!

  Ótima solução, ótimo design. Aqui algumas dicas pra vc:

  A sombra tá um pouco posionada longe do card, pra arrumar isso vc pode usar o devtools, aqui o código da sombra posicionada box-shadow: 3px 3px 10px 10px rgb(0 0 0 / 5%);

  Note que a seccao do preco começa a sair pra fora quando o card escala, pra arrumar isso basta criar uma media query mudando o flex direction, aqui o codigo pra consertar isso:

  @media (max-width: 300px) {
  .plan-container {
      display: flex;
      flex-direction: column;
  }
  }
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  1
• 

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  Olá Bruno, tudo bem?

  Gostei muito do resultado, o layout está bem responsivo, ficou ótimo. Tenho apenas uma dica:

  1- Percebi que a foto de fundo fica variando muito o tamanho conforme a tela cresce, fiz esta mudança no código para configurar isso:

  body { background-image: 100% 60vmin; background-position: topo; }

  Outra dica, sempre tente deixar seu layout responsivo pelo menos até 280px, infelizmente existe um celular chamado galaxy fold que usa essa largura.

  O resto está ótimo. Espero que ajude... não esqueça de marcar como útil 👍

  Marked as helpful

  1

  ---

  

  Bruno Afonso•110

  @BrunoAfonsoOliveiraPosted about 2 years ago

  @AdrianoEscarabote Obrigado pelo feedback! vou levar em consideração as dicas.

  1