Skip to content
Submitted 6 months ago

NFT Card using CSS Flexbox and CSS Position

Tatyane Gonçalves•390
@tatyanepgoncalves
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT 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?

none

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

none

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

none

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 6 months ago

    Olá novamente Tatyane, parabéns pela conclusão de mais um projeto.

    Gostaria de falar algumas observações que tive e também dar algumas dicas. Sobre as observações, acredito que você trocou o tamanho da tag <body>, isso porque você colocou max-height: 100vh, o que faz com que o heigth tenha o tamanho que o conteúdo dele ocupa e que ele não é capaz de passar de mais de 100vh de altura, mas o mais correto era ter colocado min-height: 100vh, que dessa forma você centralizaria o card, já que a <body> estaria do tamanho da tela.

    Também notei que você utilizou o position, pra fazer a centralização, eu particularmente recomendaria ou o flex ou o grid para fazer esse alinhamento. E também recomendaria que ao invés de colocar padding em vários elementos, você poderia coloca-lo apenas no <div class="card">, que assim todos eles já seriam alinhados pelo padding.

    E não sei se já havia mencionado isso anteriormente, mas sempre quando você for começar um projeto HTML, depois da tag <body>, deve vir uma tag <main>, então trocar o <div class="card"> por uma <main> faria seu projeto ficar mais acessível, e também tem a questão do HTML semântico, sua tag <div class="img"> poderia ser uma <figure> pois ela tem o papel apenas de conter a imagem principal do seu projeto. <div class="texto"> poder ser uma <section>, porque o conteúdo aqui é tematicamente semelhante.

    E novamente parabéns pela conclusão d projeto, continue praticando e se aprimorando. Caso tenha ficado alguma duvida quanto ao que eu falei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    1

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