Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Adapted for tablets too

@Jorggyh

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

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

@Jorggyh

Posted

@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,420

@denielden

Posted

@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,420

@correlucas

Posted

**👾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

@Jorggyh

Posted

@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,420

@correlucas

Posted

@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

@Jorggyh

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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