08 Lista de Exercicios - HTML e CSS: cabeçalho, footer e variáveis CSS

Acesse minhas redes:

2).apresentacao__links__link{ /* background-color: #22D4FD; */ border: 2px dotted #22d4FD; width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: #F6F6F6; font-family: 'Montserrat', sans-serif;

3).apresentacao__links{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px;

Acesse minhas redes:

.apresentacao__links__subtitulo { font-family: 'Krona One', sans-serif; font-weight: 400; font-size: 24px;

6).apresentacao__links__link{ border: 2px dotted #22d4FD; width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: #F6F6F6; font-family: 'Montserrat', sans-serif;

Oi, Zilda! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura!

Gostei de como você estruturou os estilos das classes e usou border: 2px dotted para criar um efeito visual diferenciado. Para deixar seu código mais organizado, uma boa prática seria definir cores em variáveis CSS, tornando a manutenção mais fácil.

Por exemplo:


:root {  
  --cor-primaria: #22D4FD;  
  --cor-texto: #F6F6F6;  
}  

.apresentacao__links__link {  
  border: 2px dotted var(--cor-primaria);  
  color: var(--cor-texto);  
}

O uso de :root permite reaproveitar as cores sem precisar alterar vários trechos do código.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!