[Projeto] Desafio | HTML e CSS: cabeçalho, footer e variáveis CSS

1 Organizando ícones nas redes sociais

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Formação A partir do zero: <strong class="titulo__destaque">HTML e CSS para projetos web</strong></h1>
            <p class="apresentacao__conteudo__texto">Se desenvolva como um Dev em T em <strong>Front-end</strong></p>
                <div class="apresentacao__botoes">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links" href="https://www.alura.com.br/">
                        <img src="./assets/letter-a.png" alt="Logo do Alura">
                        Alura
                    </a>
                    <a class="apresentacao__links" href="https://github.com/">
                        <img src="./assets/github.png" alt="Logo do github">
                        Github
                    </a>
                    <a class="apresentacao__links" href="https://www.twitch.tv/">
                        <img src="./assets/twitch.png" alt="Logo do twitch">
                        twitch
                    </a>
                </div>
        </section>
        <img src="./assets/alura.jpg" alt="alura do logo">
    </main>
    <footer></footer>
</body>
</html>

2 Centralizando ícones e textos nos botões e espaçamento entre ícones e textos

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

4 Personalizando o efeito Hover e alterando o cursor e o fundo dos botões

.apresentacao__links:hover {
    background-color: #513fd5;
    /* border: 2px solid #513fd5; */
    cursor: pointer;
}