Entrar Ainda não tem acesso?
1
resposta

Lista de exercícios 10

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando ícones clicáveis e atividade Lista de exercícios

por THIAGO MORAIS FRAZÃO
| 12.8k xp | 4 posts
 <div class="apresentacao__links">
               ...
    <a class="apresentacao__links__link" href="https://instagram.com">
        <img src="./assets/instagram.png" alt="">Instagram
    </a>
    <a class="apresentacao__links__link" href="https://www.linkedin.com">
         <img src="./assets/linkedin.png" alt="">Linkedin
     </a>
    <a class="apresentacao__links__link" href="https://twitch.tv">
        <img src="./assets/twitch.png" alt="">Twitch
    </a>
 </div>

.apresentacao__links__link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    ...
}

.apresentacao__links__link:hover{
    background-color: #262626;
    color: #22D4FD;
    border-color: #F6F6F6;
}
1 resposta
por Lorena Garcia
| 9231.9k xp | 13680 posts
Alura Scuba Team Suporte Educacional

Oi, Thiago! Como vai?

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

Gostei da forma como você estruturou os ícones clicáveis com flexbox, garantindo um alinhamento limpo entre imagem e texto. O efeito hover também adiciona uma interação interessante.

Ícone de sugestão Para saber mais:

Ao estilizar links com ícones, é uma boa prática garantir que a acessibilidade seja considerada. Adicionar um alt significativo nas imagens e ajustar o espaçamento entre os elementos melhora a usabilidade.

Quer aprender mais sobre boas práticas para estilizar links com ícones? Confira este artigo:

- Guia do Elemento <a> - MDN Web Docs

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