Design comparison
Solution retrospective
PT-BR
- Aprendi muito desde o primeiro desafio. Estou orgulhosa de conseguir priorizar algumas tags semânticas, ao invés de várias divs.
EN
- I've come a long way since the first challenge, and I'm really proud of myself for being able to prioritize semantic tags over just using 'divs'.
PT-BR
- Dessa vez tive que pesquisar bastante sobre posicionamento (relativo e absoluto), além de algumas funções do CSS como opacidade e usar variáveis para guardar as cores.
EN
- This time I had to do a lot of research on positioning (relative and absolute), as well as some CSS functions like opacity and using variables to store colors.
PT-BR
- Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.
EN
- Any feedback is welcome so that I can improve my skills.
Community feedback
- @AkoToSiJeromeEhPosted 7 months ago
Hey ! great work out there i just notice that you using margin to center horizontally the card component but it doesn't work as i notice , i suggest that you can use display : grid or display : flex with a min-height or height for proper alignment . by adding those css property you properly align the card horizontally . thats all happy coding !
by adding the display : grid and place-items : center you can achieve to center the card and any future work you create ( you can see the difference when you do zoom-out and zoom-in in your card component )
body { font-family: "Outfit", sans-serif; font-size: 18px; background-color: var(--main-BG); color: var(--White); padding: 20px; margin: 60px auto;// you can remove this display: flex; // add this justify-content: center; //add this align-items: center; //add this min-height: 100dvh; //add this }
.conteiner { padding: 20px; background-color: var(--card-BG); border-radius: 20px; margin-bottom: 16px; max-width: 400px; margin: auto;// you can remove this }
Marked as helpful0@andressakarenPosted 7 months agoHi @AkoToSiJeromeEh, I hope everything is well with you. I didn't really think of doing it this way, but I can already imagine how it can work and that it's even better. I will make the changes you suggested and study about other units like 'dvh'. Thank you very much for your comment.
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