Falta pouco!

0 dias

0 horas

0 min

0 seg

Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Mão na massa: Organizando ícones nas redes sociais

Oi, boa tarde! Segue os passos.

1) Organizando ícones nas redes sociais

<main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
               <h2 class="apresentacao__links__subtitulos" >Acesse minhas redes:</h2> 
                <a class="apresentacao__links__link" href="https://github.com/samarapereiras">
                  <img src="./assets/github.png" >
                  GitHub
               </a>
               <a class="apresentacao__links__link" href="https://www.linkedin.com/in/samara-pereira-9b5b11124/">
                  <img src="./assets/linkedin.png" >
                  Linkedin
               </a>
                 <a class="apresentacao__links__link" href="https://twitch.tv/samarapereiras">
                  <img src="./assets/twitch.png" >
                  Twitch
               </a>
            </div>
        </section>
        <img class="apresentacao__imagem" src="./assets/Imagem.png" alt="foto da Joana Santos">
    </main>
    <footer></footer>
</body>
</html>

2) Centralizando ícones e textos nos botões
3) Espaçamento entre ícones e textos

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4) Personalizando o efeito Hover
5) Alterando o cursor e o fundo dos botões

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Oi, Samara! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei da forma como organizou os ícones com display: flex e gap, centralizando o conteúdo e deixando os botões mais acessíveis. Para deixar a interação ainda melhor, você pode incluir cursor: pointer e também transition para suavizar a mudança no :hover.

Uma dica interessante para o futuro é adicionar um pequeno efeito ao clicar no botão usando :active. Veja este exemplo:


.apresentacao__links__link:active {
  transform: scale(0.97); /* reduz levemente o tamanho ao clicar */
}

Esse código dá um feedback visual rápido quando o usuário pressiona o botão.

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