Design comparison
SolutionDesign
Community feedback
- @correlucasPosted about 2 years ago
👾Fala Rafael, beleza? Parabéns pela sua solução!
Acabei de olhar seu site e o código e ficou bem bacana, você fez praticamente tudo, inclusive o hover effect que era o mais difícil.
Só ficou faltando alinhar ao centro, pra fazer isso você precisa trabalhar com
display: flex;
nobody
e colocarmin-height: 100
pro elemento filho de alinhar ao tamanho do body, olha o código com as correções abaixo:div { display: flex; background-color: hsl(216, 50%, 16%); margin: auto; max-width: 300px; border-radius: 15px; padding: 15px; margin-top: 50px; flex-direction: column; align-items: center; justify-content: center; } body { height: 100vh; background-color: hsl(217, 54%, 11%); display: flex; flex-direction: column; justify-content: center; }
Espero que te ajude e continue com os projetos!
Marked as helpful1 - @BadhrikrPosted about 2 years ago
Hello your solution is superb,
My only suggestion is ,Apply these to your stylesheet
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
Happy coding.
1
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