Responsive results summary using Flexbox and CSS Variables

Solution retrospective
I'm proud of having achieved a clean and fully responsive layout without using any JavaScript. I focused on semantic HTML and modern CSS practices. Next time, I’d explore CSS Grid for layout structure and try adding transitions for a smoother visual effect.
(pt-BR): Tenho orgulho de ter conseguido um layout limpo e totalmente responsivo sem usar nenhum JavaScript. Foquei em HTML semântico e boas práticas modernas de CSS. Da próxima vez, exploraria o CSS Grid para a estrutura do layout e tentaria adicionar transições para um efeito visual mais suave.
What challenges did you encounter, and how did you overcome them?The main challenge was making the layout fully responsive while maintaining design accuracy. I used media queries and tested the design on different screen sizes. Working with hsla() colors and creating subtle gradients also required fine-tuning, but I learned a lot in the process.
(pt-BR): O maior desafio foi deixar o layout totalmente responsivo mantendo a fidelidade ao design. Usei media queries e testei em diferentes tamanhos de tela. Trabalhar com cores em hsla() e criar gradientes sutis também exigiu ajustes finos, mas aprendi bastante com isso.
What specific areas of your project would you like help with?I’d appreciate feedback on how to improve visual hierarchy and accessibility using only HTML and CSS. Any suggestions on semantic structure and best practices are welcome!
(pt-BR): Gostaria de receber feedback sobre como melhorar a hierarquia visual e a acessibilidade usando apenas HTML e CSS. Sugestões sobre estrutura semântica e boas práticas são muito bem-vindas!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Carlos Alberto da Silva's solution.
Join 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