@R3ygoski
Posted
Olá Kelvin, parabéns pela conclusão do seu projeto.
Uma dica, sempre quando for fazer um projeto faça um reset antes, que dessa forma você remove algumas estilizações por padrão. Tanto que seu projeto está com overflow, isso é, ele está passando do tamanho da tela, por isso tem um scroll horizontal e vertical. Para corrigir isso você pode utilizar esse trecho no seu CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Outra dica, dentro da pasta de Design, quando você baixa o desafio, tem uma imagem que geralmente vem com o nome "state", por exemplo, "card-state", essas imagens mostram o que deve acontecer por exemplo quando você passar o mouse sobre um elemento. E digo isso porque faltou fazer essa parte do :hover no h1 e no p.nome, ambos ficam amarelo ao passar o mouse em cima, e também a sombra do card aumenta quando o mouse entra dentro dele.
Sobre o HTML, a estrutura está correta, mas ele está pouco semântico, e a semântica é importante para trazer mais acessibilidade a sua página, vou mostrar algumas tags que podem ser alteradas para ficar mais semântico:
<div>essa tag está logo após a<body>, geralmente após a<body>nós utilizamos a<main>, pois é ali que estará contido o conteúdo principal da página.<div class="container">pode ser alterado para um<article>pois o conteúdo presente dentro do container é autoexplicativo e independente do resto da página.<div class="img-quadro">pode ser alterado para um<figure>pois é a imagem principal do componente.<div class="imagem">pode ser alterado para um<footer>pois faz o papel de rodapé do card, e também porque é ali que finaliza todo o conteúdo anterior do card.
Notei também que nas imagens, você utilizou um alt="" pouco descritivo. Na primeira imagem, você poderia utilizar um alt que se assemelha ao título da página, como por exemplo: alt="HTML & CSS foundations". e na alt="cara" você poderia escrever algo como: alt="Avatar of Greg Hooper". É sempre importante manter um texto mais descritivo nos alt, isso porque se a imagem não for carregada, ou se o usuário tiver alguma deficiência visual, ele ainda conseguira saber o que aquela área representa.
E é isso, parabéns pela conclusão do projeto, ele ficou muito bem-feito, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.
