exercícios | HTML e CSS: cabeçalho, footer e variáveis CSS

Organizando ícones nas redes sociais

<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <div class="apresentacao__links">
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__link" href="https://github.com/thiagomsc">
                <img src="./assets/github.png">
                Github
            </a>
            <a class="apresentacao__links__link" href="https://likedin.com/in/thiago">
                <img src="./assets/likedin.png">
                Likedin
                </a>
                <a class="apresentacao__links__link" href="https://twitch.tv/in/seunome">
                <img src="./assets/twitch.png">
                Twitch
                </a>
        </main>

Centralizando ícones e textos nos botões

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

Espaçamento entre ícones e textos

apresentacao__links__link{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;

Personalizando o efeito Hover

.apresentacao__links__link:hover{
    background-color: #272727;
    border: 2px solid #0000FF ;
}

Alterando o cursor e o fundo dos botões

    background-color: #272727;
    border: 2px solid #0000FF ;
    cursor:pointer;
}

Oi, Thiago! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Achei bem interessante a forma como você organizou os ícones das redes sociais usando display: flex e gap. A estrutura está clara e o uso de hover e cursor mostra atenção aos detalhes de usabilidade.

Uma dica interessante para o futuro é usar align-items: center para alinhar verticalmente os ícones e os textos dentro dos botões. Veja este exemplo:


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

Esse ajuste garante que texto e imagem fiquem alinhados no centro do eixo vertical.

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