Adapted for tablets too

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Jefferson, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • remove descriptive text in the alt attribute of the icon images because there is only decorative
  • remove all margin from main tag because with flex they are superfluous
  • add transition on the element with hover effect

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  @denielden the margin is for my project to be in the same position as the challenge design, without this margin my project would be above, their design is not in the center (strange isn't it?)

  The other tips are very good, thanks!

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @Jorggyh You are welcome!

  It depends on the resolutions of the monitors and the screen that is done ... still great job ;)

  Keep it up Jefferson :)

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  **👾Oi de novo Jefferson, Aqui umas dicas pra você melhorar sua solução:

  1.Ficou faltando o background cinza adicione a cor correta no body --- > background-color: #F2F2F2

  2.Sua solução já está funcionando, algo que você poderia fazer pra organizar melhor seu código e gerir os 3 cards de cada carro. Seria usar uma unica classe pra aplicar todas caracteristicas que são iguais em todos esses cards (padding, color, margin e etc) e usar uma outra classe pra aplicar aquelas caracteristicas que são diferentes entre eles, desse jeito se você precisar mudar algo vc muda só em uma classe ao invés de ir em cada classe individualmente.

  Melhore a marcação html removendo a div principal e colocando um <main> pra indicar que aquele é o bloco principal da página e ao invés de usar <div> você pode substituir cada uma delas pros cards com um <article> que é uma tag mais precisa pra esse caso.

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0
• 

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  @correlucas opa!

  Esse cinza é tão fraco que só percebi depois de postar o desafio rs.

  Quanto a tag article eu conheço mas não estudei a fundo, provavelmente é mais adequada mesmo.

  Agora sua dica 2, eu fiz exatamente desse jeito, dá uma olhada lá, exemplo: <div class="card card1"> as características que são padrão eu estilizei no card e as únicas no card1, card2 e card3.

  Obrigado!

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @Jorggyh Foi mal, eu olhei seu código de novo e achei que tinha um hifem tipo card-card-1 agora que vi que vc fez certinho. Foi mal bro!

  é pq mta gente usa BEM e o nome das classes geralmente fica assim, achei que vc tava usando bem e nao vi que tavam separadas.

  Se for de boa pra vc posso continuar analisando suas solucoes, me fala ai, caso contrario eu paro.

  Bom dia irmao

  0

  

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  @correlucas pode claro, vamos nos ajudando aí, abraço!

  0