@R3ygoski
Posted
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.