NFT Card using CSS Flexbox and CSS Position
Design comparison
Solution retrospective
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
- @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ê colocoumax-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 colocadomin-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 colocarpadding
em vários elementos, você poderia coloca-lo apenas no<div class="card">
, que assim todos eles já seriam alinhados pelopadding
.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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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