Design comparison
Solution retrospective
GridCss: Achei difícil usar o Grid então usei FlexBox para desenvolver o card, mas pretendo compreender o Grid e usa-lo em projetos futuros.
RESET DA PÁGINA HTML
*{ margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
}
* ul li{
list-style: none;}
* a{ text-decoration: none;
color: inherit;}
FlexBox: O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.
display:flex;
flex-derection: column; ou row
CONTAINER
<section class='container'>
<header class='card'>
</header>
<article class='content'>
</article>
</section>
Community feedback
- @danielmrz-devPosted 9 months ago
Fala Caio!
Seu projeto ficou muito bom!
Tenho uma sugestão:
- Notei que você utilizou
margin
pra afastar o card do topo na tentativa de centralizar o card.
Usar
margin
pra esse objetivo não é a melhor opção. Existe uma maneira melhor e mais eficiente de posicionar elementos no meio da página (tanto na vertical quanto na horizontal):📌 Aplique isso ao body:
body { min-height: 100vh; display: flex; /* também funciona com grid */ justify-content: center; align-items: center; }
Espero que te ajude! 😊
Marked as helpful0@CaioQuerinoPosted 9 months ago@danielmrz-dev muito obrigado, eu vou subi daqui a pouco as atualizações. Usei seu código para centralizar o meu conteúdo no centro do corpo do conteúdo.
0 - Notei que você utilizou
- @lucasdaherPosted 9 months ago
Belo trabalho! Porém, tenho alguns pontos que podem melhorar o seu código:
1) Ao estilizar a página, não necessariamente toda a estilização precisa estar dentro de media query.
Vou te dar um exemplo que não vem do seu código, mas pode te ajudar a entender o que estou querendo dizer:
// Default style .container { background-color: red; } // Responsive to max-width 720px @media screen and (max-width: 720px) { .container { background-color: blue; } }
Ou seja, o container vai ter sempre a cor de fundo vermelha. Mas quando o tamanho da tela for menor que 720px, a cor de fundo do container vai se tornar azul.
2) Atente-se também a escrita! No seu código foi utilizado uma div com a classe conteiner, quando na verdade a escrita correta dessa palavra seria container.
Geralmente as empresas utilizam todos os nomes de classes, ids e afins em Inglês. Recomendo trocar os nomes que foram utilizados nas classes: titulo e paragrafo para title e paragraph.
3) Sobre a sua dúvida sobre a utilização de grids, neste projeto não houve necessidade da utilização de grids, então fez certo ao utilizar flex.
Espero ter ajudado! E se eu te ajudei, marque este feedback para me ajudar :)
Marked as helpful0@CaioQuerinoPosted 9 months agoObrigado @lucasdaher, dessa forma eu não precisaria de mais um arquivo como por exemplo, 'style.css' eu já poderia colocar as propriedades dentro do próprio arquivo 'responsive.css'.
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