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

Qr Code HTML e CSS only

#accessibility
Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Not sure about flexbox, maybe is wrong. What do you think? What can I do to improve?

Community feedback

@Enmanuel-Otero-Montano

Posted

Hello TATHIANY!

Your flexbox is perfect. Only it seems to me that you uploaded the solution of another challenge. Check out.

Cheers!

Marked as helpful

0

Lucas 👾 104,580

@correlucas

Posted

👾 OI Tathiany, tudo bem? Parabéns pela solução e seja bem vinda a comunidade do Frontend Mentor.

O flexbox tá certinho, no height você pode colocar simplesmente min-height: 100vh; sem usar o calc.

body {
    min-height: 100vh;
}

Tenho algumas dicas pra você:

1.A cor do fundo é background-color: hsl(212, 45%, 89%);

2.Use max-widthao invés de width pra deixar o componente flexíve, se você usar width o valor fica fixo e o elemento não cresce e nem diminui quando a tela começa a achatar.

3.Usa display: block; e max-width: 100%; pra imagem pegar automaticamente o height to container e 100% da largura proporcionamente.

.card img {
    display: block;
    max-width: 100%;
    border-radius: 15px;
}

O resto tá muito bem feito, parabéns, ficou faltando só a sombra que o valor é box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

Espero ter te ajudo e continue codando.

Abraço!

Marked as helpful

0

Lucas 👾 104,580

@correlucas

Posted

@tathykanashiro só alguns ajustes a maioria das coisas você ja tinha aplicado certo 👏👏

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