Submitted 3 months ago

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

Kauã_Almeida•100

@Kaua-Almeida

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

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

Matias Altier•130
@matiasaltierPosted 3 months ago
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
Kauã_Almeida•100
@Kaua-AlmeidaPosted 3 months ago
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

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