1
resposta

[Projeto] Organizando ícones nas redes sociais

Organizando ícones nas redes sociais:

      <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo"></h1>
                <p class="apresentacao__conteudo__texto"></p>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo"> Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://instagram.com/AniMartins">
                        <img src="./Assets-aula2-curso3-html-e-css-main/assets/instagram.png">
                        Instagram</a>
                    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/reziani-martinsdesenvolvedor/">
                        <img src="./Assets-aula2-curso3-html-e-css-main/assets/linkedin.png">
                        Linkedin</a>
                    <a class="apresentacao__links__link" href="https://github.com/MartinsAni8">
                        <img src="./Assets-aula2-curso3-html-e-css-main/assets/github.png">
                        GitHub
                    </a>
                </div>
            </section>
           </main>
    <footer></footer>
</body>
</html>

Centralizando ícones e textos nos botões:

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

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: 24px;
  font-weight: 600;
  padding: 21.5px 0;
  text-decoration: none;
  color: #F6F6F6;
  font-family: 'Montserrat', sans-serif;
}
/*declaração inteira da classe*/

Personalizando o efeito Hover:

Criei uma nova regra dentro do arquivo CSS:

.apresentacao__links__link:hover {
  border: 2px solid #0000FF;
  
  /* Adiciona uma borda azul ao passar o mouse */
}

Alterando o cursor e o fundo dos botões:

.apresentacao__links__link:hover{
  background-color: #272727;
}

Efeito hover ao passar o mouse sobre o nome: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Efeito hover ao passar o mouse sobre os botões com os links das redes sociais, e borda. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi, Estudante! Como vai?

Gostei de como você estruturou os botões para as redes sociais e aplicou efeitos de hover para melhorar a usabilidade. A combinação de gap, border-radius e font-size deu um ótimo destaque ao layout.

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

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!