[Projeto] Mão na Massa

1. Organizando ícones nas redes sociais Imagine que você está trabalhando em um projeto pessoal onde deseja incluir links para suas redes sociais com ícones correspondentes. Você já tem um link para o GitHub com um ícone, mas precisa adicionar outros dois: LinkedIn e Twitch. Utilize o seguinte trecho de código HTML como ponto de partida:

 </h1>
                <p class="apresentacao__conteudo__texto">Olá! Sou Joan Leonardo <strong class="destaque-da-pronuncia">(leiam como "Roan Leonardo")</strong>, iniciante em desenvolvimento Front-end
                com especialidade em <strong>JS, HTML e CSS</strong>. Fazendo transição de carreira e muito apaixonado por tecnologia.
                Vamos conversar?</p>

                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse Minhas Redes:</h2>

                <a class="apresentacao__links__link" href="https://github.com/Leonard0-4raujo">
                    <img src="assets/github.png" alt="logomarca do github">
                    GitHub
                </a> 

                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/leonardo-ara%C3%BAjo-a55320144/">
                    <img src="assets/linkedin.png" alt="logomarca do linkedin">
                    Linkedin
                </a>

                <a class="apresentacao__links__link" href="https://twitter.com/Leo_Designer01">
                    <img src="assets/twitter-novo.png" alt="logomarca do x antigo twitter"> <!-- Como não possuo conta no Twitch, coloquei meu Twitter (X) -->
                    Twitter novo
                </a>
                
                </div> 
        </section>
            <img src="leo.png" alt="Foto da Joan Leonardo programando">
    </main>
    <footer></footer>
</body>
</html>

1. Centralizando ícones e textos nos botões

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

1. Espaçamento entre ícones e textos

.apresentacao__links__link {
    /*background-color: #22D4FD;*/
   display: flex;
   justify-content: center;
   gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 25px;
    padding: 21.5px 0px;
    font-weight: 600px;
    text-decoration: none;
    color: #F6F6F6;
    font-family: "Montserrat", sans-serif;

}

1. Personalizando o efeito Hover

.apresentacao__links__link:hover {
    border-color: #0000FF;
    background-color: #272727;
    font-size: xx-large;
}

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

.apresentacao__links__link:hover {
    cursor: pointer;  /* O ponteiro não aparece no print mas tá lá! */
    border-color: #0000FF;
    background-color: #272727;
    font-size: xx-large;
}