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

cartão de visualização do produto usando HTML E CSS

@Kaua-Almeida

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


What are you most proud of, and what would you do differently next time?

Minha primeira tentativa usando a metodologia mobile-first completada com sucesso. Melhoriaria alguns erros e tentaria deixar o código mais limpo.

What challenges did you encounter, and how did you overcome them?

Tive muita dificuldade de começar criando o layout para mobile, tive problemas com flex-box com relação a vh e %, algo que eu tenho dificuldade de aplicar na prática. Tentei de diversas formas contornar os erros fazendo pesquisas e pedindo feedback de um colega da área.

What specific areas of your project would you like help with?

Gostaria de saber o que devo melhorar em relação a layout, uso de % e vh em alturas e larguras dos elementos.

Community feedback

P

@matiasaltier

Posted

You got a very good result, what I would recommend is to give it a max-width with the width given in the figma files for each layout. With that and a gap in your .section-info to give it a spacing between each element it would be practically the same

Marked as helpful

1

@Kaua-Almeida

Posted

infelizmente não consigo acesso aos arquivos figma já que são pagos. No caso do gap em section .info só é possível se eu der display:flex o que daria problema em relação aos preços que ficariam em coluna já que eu teria que colocar a direção dos itens em coluna. Caso tenha uma solução para esses problemas eu agradeceria uma resposta. @matiasaltier

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