Challenge 1 - Frontend Mentor

Fala @jaojogadez, tudo bem? Parabéns por completar o desafio. Alem das dicas do Ricardo, tenho mais algumas sugestões para melhorar seu código, se você aceitar.

Na imagem você acabou colocando 2 width, recomendo remover um e definir o tamanho para width: 100%, assim a imagem fica responsiva e acompanha o tamanho do seu card.

Na sua classe .content, recomendo você remover o flexbox, ele apenas está centralizando a imagem. Você pode colocar um padding: 20px;.

Sempre que estiver desenvolvendo, deixe aberto o DevTools, do seu navegador, para ver o comportamento das propriedades css.

Dicas HTML

• Não é recomendado utilizar hífen para a descrição do atributo alt. Pense no atributo alt como a maneira que uma pessoa cega iria entender aquela imagem.
• Você deveria utilizar h1 ao invés de h3, não pula a hierarquia dos títulos. Enquanto não houver h1, não há h2 e assim por diante.
• Você deveria utilizar a tag <p> ao invés de um h4 para o paragrafo.

Dicas CSS

• O conteúdo não está muito bem centralizado, isso porque você definiu uma altura para o body, o que é errado. Altura fixa vai fazer com que o conteúdo só esteja centralizado naquela tela mas se diminuir de tamanho ou aumentar o tamanho da tela vai ficar muito mal. Para centralizar, você tem que tirar tanto a width e a height que você colocou. Você só precisa botar os seguintes estilos: margin: 0; e min-height: 100vh;