Skip to content
Submitted 11 months ago

Product Preview Card Component

Shamuskado22•140
@Shamuskado22
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

Solution retrospective

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

Align image and text

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

I couldn't remove the line break from the product name

Please log in to post a comment

Log in with GitHub

Community feedback

  • Bernardo Poggioni•6,510
    @R3ygoski

    Olá Shamuskado, parabéns pela conclusão do projeto, ele ficou quase próximo do design proposto.

    Sobre sua duvida quanto a não conseguir remover a quebra de linha, ela está acontecendo por causa do tamanho do conteúdo onde ela está inserida. Por exemplo se você remover o padding da sua .content você irá ver o texto crescendo horizontalmente, também no seu h1 você pode colocar um width maior que 100%, que dessa forma você verá ele expandindo. Mas eu não vejo pra que fazer ele expandir já que ele está na forma correta.

    Caso seja para a versão mobile, quando você aumentar o tamanho do container, ele já irá fazer com que o texto se expanda e não fique quebrando linhas, e reduzir o tamanho da fonte também pode ajudar nisso.

    E uma dica, sempre foque em deixar seu HTML o mais semântico possível, pois isso ajuda não só no SEO mas também na acessibilidade da sua página. Duas tags que você poderia deixar semântica são:

    • <div class="container">, poderia ser trocado de <div> para <main>, isso porque é aqui que está o conteúdo principal, e também é recomendável que sempre depois do <body> venha um <main>.
    • <div class="card"> poderia ser trocado de <div> para <article>, isso porque esse conteúdo é autoexplicativo e independente, e geralmente a maioria dos cards vão ser assim.

    E novamente parabéns por ter conseguido concluir uma parte do projeto, recomendo que tente fazer a parte de mobile também, pois ajuda bastante a praticar e aprimorar as habilidades com @media. Caso tenha ficado alguma duvida quanto eu que eu disse, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

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