@correlucas
Posted
👾Oi Nathan Andrade, tudo bem? Parabéns pelo desafio!
Acabei de ver o preview da sua solução e tenho algumas dicas pra você:
O seu componente já está com o design pronto, um bom exercício para melhorar seu código, seria criar a estrutura mais limpa o possível e reduzir seu código ao máximo. Por exemplo, você pode segurar todo conteúdo em um bloco só usando (<main> ou <div>) nesse caso vamos usar <main> por que é uma tag semântica. Se você notar, nem precisa adicionar nenhum div além da principal para segurar o conteúdo (img, h1 e p).
FAZER A IMAGEM FICAR RESPONSIVA:
.banner {
background-size: 100% 100%;
background-position: center;
border-radius: 12px;
display: flex;
position: relative;
/* width: 100%; */
/* height: 250px; */
}
img {
display: block;
max-width: 100%;
}
👋 Espero que essas dicas tenham sido úteis e continue codando!
Marked as helpful
@Nathan4Andrade
Posted
@correlucas Muito obrigado pelo feedback, Lucas. Eu verifiquei as alterações que você recomendou, e verifiquei que realmente existiam muitas classes que estavam sendo reutilizadas. Agradeço muito mesmo pelas dicas e espero ver os seus feedbacks nos meus challenges futuros! 😊
