Lista de exercícios

<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="Ícone do GitHub">
                Github
            </a>
            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/seunome">
                <img src="./assets/linkedin.png" alt="Ícone do LinkedIn">
                LinkedIn
            </a>
            <a class="apresentacao__links__link" href="https://www.twitch.tv/seunome">
                <img src="./assets/twitch.png" alt="Ícone do Twitch">
                Twitch
            </a>
        </div>
    </section>
    <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>
</body>
</html>

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;  /* Ajuste o espaçamento conforme o valor desejado */
    background-color: #22D4FD; /* Cor de fundo inicial do botão */
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;  /* Exemplo de valor encontrado no Figma */
    background-color: #22D4FD; 
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
}

.apresentacao__links__link:hover {
    border: 2px solid #0000FF;  /* Borda azul ao passar o mouse */
    background-color: #272727;  /* Alteração do fundo ao passar o mouse */
}

.apresentacao__links__link:hover {
    cursor: pointer;  /* Muda o cursor para uma mãozinha */
    background-color: #272727;  /* Cor de fundo alterada ao passar o mouse */
    border: 2px solid #0000FF;  /* Borda azul */
}