Entrar Ainda não tem acesso?
2
respostas

Lista de exercícios-2

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando ícones clicáveis e atividade Lista de exercícios

por Paulo Henrique Rosa
| 53k xp | 71 posts
  • Organizando ícones nas redes sociais
<div class="apresentacao__links">
       <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
        <a class="apresentacao__links__link" href="https://www.instagram.com/paulo_henryque__/">
        <img class="logoInstagram" src="./assets/instagram.png" alt="logo-instagram">Instagram</a>
        <a class="apresentacao__links__link" href="https://github.com/Paulo-back">
         <img class="logoGitHub" src="./assets/github.png" alt="logo-gitHub"> GitHub</a>
         <a class="apresentacao__links__link" href="https://www.linkedin.com/in/paulo-henrique-rosa-dev/">
         <img class="logoTwitch" src="./assets/linkedin.png" alt="Logo-Twitch"> Twitch</a>
          
    </div>
  • Centralizando ícones e textos nos botões
  • &
  • Espaçamento entre ícones e textos
.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2PX solid #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    font-family: "Montserrat", sans-serif;
}
  • Personalizando o efeito Hover
.apresentacao__links__link:hover{
    background-color: #272727;
}
  • Alterando o cursor e o fundo dos botões
.apresentacao__links__link:hover{
    cursor: pointer;
    background-color: #272727;
}
2 respostas
por Rafaela Petelin Silvério
| 955.8k xp | 2140 posts
Alura Scuba Team

Oi, Paulo! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou os botões das redes sociais usando display: flex; e gap para espaçamento. Isso ajuda bastante na organização dos elementos dentro do link. Notei que no alt da imagem do LinkedIn, está escrito "Logo-Twitch", pode ser interessante corrigir para evitar confusões.

Uma dica: você pode deixar os ícones alinhados verticalmente ao texto adicionando align-items: center; no .apresentacao__links__link. Por exemplo:


.apresentacao__links__link {
    display: flex;
    justify-content: center;
    align-items: center; /* Alinhando ícones e textos */
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    font-family: "Montserrat", sans-serif;
}

Isso garante que os ícones fiquem centralizados dentro dos botões.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Paulo Henrique Rosa
| 53k xp | 71 posts

Muito obrigado rafaela pelas dicas,ja troquei o erro no <a> linkedin e fiz a adição do align-items: center; mais não vi mudanças visivéis.