Skip to content
Submitted about 2 months ago

Responsive Product Preview Card

jadefurtado•80
@jadefurtado
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted about 2 months ago

    Olá Jade, parabéns pela conclusão do projeto, ele ficou muito bem-feito e se assemelha muito ao design proposto.

    Notei que tem um pequeno problema de responsividade no seu projeto, tanto que ele fica em formato vertical até no máximo telas de 375px, mas em telas de 376px pra cima ele fica na horizontal, o que causa uma estranheza e fica um pouco "quebrado", para corrigir isso, você pode alterar na sua MediaQuery o valor de 375px para 768px.

    Outra coisa que notei, foi que você utilizou position na sua <img/>, mas isso não era necessário, você poderia colocar apenas um width: 100%, que já seria o suficiente para deixar a imagem na forma correta e utilizar display: flex no div.container, que dessa forma você conseguiria ter um controle mais simples de alinhamento vertical e horizontal.

    Agora sobre o HTML, a estrutura está correta, mas ele está muito pouco semântico, e manter um HTML semântico é importante tanto para SEO quanto para Acessibilidade. Vou mostrar alguns elementos do seu HTML que poderiam ser alterados para ficar mais semântico.

    • <div class="container"> poderia ser alterado para <main>, sempre depois do <body> o mais correto é vir uma tag <main> e também pelo fato de que nela está contida todo o conteúdo principal da sua página.
    • <div class="container__image"> poderia ser alterado para uma <figure> pois essa é a imagem principal da sua página.
    • <div class="container__card"> poderia ser alterado para <article> pois o conteúdo presente nessa secção é autoexplicativo e independe do resto da página.

    E é isso, novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida ao que mencionei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    0
  • Harmanpreet Singh•10
    @geekharman003Posted about 2 months ago

    your solution is almost perfect but here are some tiny suggestions from me to make your solution almost pixel perfect:

    (i) - reduce the font weight of original price

    (ii) - change the font of add to cart button

    0

Please log in to post a comment

Log in with GitHub

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