Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾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 helpful0@Nathan4AndradePosted about 2 years ago@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! 😊
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord