@correlucas
Posted
👾Fala Victor, beleza? Parabéns pelo seu desafio!
Tenho algumas sugestões pra você:
1.O componente não está devidamente alinhado ao centro só porque faltou o display: flex; no body e min-height: 100vh; pra fazer o body mostrar 100% da tela, olha as correções abaixo:
body {
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
2.Em relação a estrutura do html, tá bem enxuta, nessa você mandou bem só tem o necessário, eu só mudaria de h2 pra h1 visto que é o título principal da página e ao invés de usar classes eu colocaria só o elemento mesmo, só tem um h1, p, e img ao invés de usar a classe só colocar por exemplo h1 {padding: 20px;}.
3.O cartão não está responsivo porque você usou width ao invés de max-width dentro do container, ai ele fica com tamanho fixo, já com max-width ele tem o tamanho limite mas tbm pode diminuir, dá uma diminuida na tela pra vc ver que o container nao contrai, se ajustar isso ele faz o texto contrair dentro do cartão e tbm quebrar as linhas.
Manda bala e continua codando bro, seu desafio ficou mto bom!
Espero ter ajudado com algo. Falou!
Marked as helpful
