What are you most proud of, and what would you do differently next time?
🎯 What are you most proud of?
Estou mais orgulhosa da minha habilidade de recriar um design fiel ao modelo original utilizando apenas HTML e CSS. Consegui aplicar Flexbox para centralizar os elementos corretamente e garantir um layout responsivo. Além disso, a utilização da fonte Outfit do Google Fonts ajudou a manter o design refinado e profissional.
Também fiquei satisfeita com o fato de ter conseguido posicionar o rodapé no final da tela de forma elegante, garantindo que ele permanecesse fixo sem interferir na responsividade do restante do layout.
🔄 What would you do differently next time?
Na próxima vez, eu gostaria de:
Melhorar a acessibilidade: Adicionar atributos ARIA e melhorar a semântica do HTML para tornar o componente mais acessível a leitores de tela.
Explorar CSS Grid: Embora tenha usado Flexbox, talvez CSS Grid pudesse ser uma alternativa interessante para estruturar o layout de forma ainda mais otimizada.
Adicionar animações sutis: Pequenas animações em hover poderiam deixar a experiência mais interativa e moderna.
Experimentar um pré-processador CSS: Usar SASS/SCSS para organizar melhor os estilos e facilitar futuras manutenções.
What challenges did you encounter, and how did you overcome them?
⚠️ Challenges & Solutions
1️⃣ Centralizar o conteúdo na tela
Desafio: No início, tive dificuldades para centralizar corretamente o cartão (card) vertical e horizontalmente na tela, garantindo que ficasse responsivo em diferentes dispositivos.
Solução: Usei Flexbox no body, aplicando:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: hsl(212, 45%, 89%);
position: relative;
}
Isso garantiu que o card sempre ficasse no centro da tela, independentemente do tamanho do dispositivo.
2️⃣ Posicionar o rodapé no final da tela
Desafio: A seção attribution (rodapé) inicialmente ficava próxima demais do card e não ficava fixa na parte inferior da tela.
Solução: Usei position: absolute para fixá-lo no final da tela, garantindo que ele não se sobrepusesse ao conteúdo:
.attribution {
font-size: 11px;
text-align: center;
position: absolute;
bottom: 16px;
width: 100%;
}
Caso a página tivesse mais conteúdo no futuro, uma abordagem alternativa seria usar flex-grow: 1 para empurrar o rodapé para baixo.
3️⃣ Ajustar espaçamentos e tipografia
Desafio: A distância entre os elementos do card não estava adequada e a fonte precisava ser ajustada para seguir o design original.
Solução: Usei padding nos textos e Google Fonts (Outfit) para melhorar a aparência:
.title {
font-weight: 700;
color: hsl(218, 44%, 22%);
font-size: 20px;
padding: 16px;
}
.paragraph {
font-weight: 400;
font-size: 15px;
color: hsl(216, 15%, 48%);
padding: 0 16px 16px 16px;
}
