html-css-cabecalho-footer-variaveis-css - 10 Lista de exercícios

1.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/seunome">
                <img src="./assets/github.png" alt="GitHub">
                Github
            </a>

            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/seunome">
                <img src="./assets/linkedin.png" alt="LinkedIn">
                LinkedIn
            </a>

            <a class="apresentacao__links__link" href="https://www.twitch.tv/seunome">
                <img src="./assets/twitch.png" alt="Twitch">
                Twitch
            </a>
        </div>
    </section>
    <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>

2.Centralizando ícones e textos nos botões

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    align-items: center; /* centraliza verticalmente também */
    gap: 16px;
    /* outras propriedades existentes */
}

3.Espaçamento entre ícones e textos

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* valor do Figma */
}

4.Personalizando o efeito Hover

.apresentacao__links__link:hover {
    border: 2px solid #0000FF;
}

5.Alterando o cursor e o fundo dos botões

.apresentacao__links__link:hover {
    cursor: pointer;           /* muda o cursor para mãozinha */
    background-color: #272727; /* fundo levemente mais claro */
}