[Projeto] Módulo 02 - Lista de Exercício 02

1. Organizando ícones nas redes sociais:

╰┈➤ HTML:

//código omitido

<div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">
                        <img src="./assets/Logo Github.png" alt="Logo Github">
                        Github
                    </a>
                    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/moraeslais/" target="_blank">
                        <img src="./assets/Logo linkedin.png" alt="Logo LinkedIn">
                        LinkedIn
                    </a>
                    <a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">
                        <img src="./assets/Logo Twitch.png" alt="Logo Twitch">
                        Twitch
                    </a>
                </div>
                
//código omitido

1. Centralizando ícones e textos nos botões:

╰┈➤ CSS:

//código omitido

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

//código omitido

1. Espaçamento entre ícones e textos:

╰┈➤ CSS:

//código omitido

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

//código omitido

1. Personalizando o efeito Hover | Alterando o cursor e o fundo dos botões:

╰┈➤ CSS:

//código omitido

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

    }

    .apresentacao__links__link:hover {
        background-color: #272727;
    }
    
//código omitido