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;
}