Com certeza! Vamos resolver esses desafios de design juntos.
1) Adicionando ícones do LinkedIn e Twitch
Para incluir os ícones e links do LinkedIn e Twitch, adicione o seguinte código HTML dentro da div com a classe apresentacao__links, logo após o link do GitHub:
<a class="apresentacao__links__link" href="https://www.linkedin.com/in/seuperfil">
<img src="./assets/linkedin.png" alt="Ícone do LinkedIn">
LinkedIn
</a>
<a class="apresentacao__links__link" href="https://www.twitch.tv/seucanal">
<img src="./assets/twitch.png" alt="Ícone do Twitch">
Twitch
</a>
Substitua "https://www.linkedin.com/in/seuperfil" pelo link do seu perfil do LinkedIn e "https://www.twitch.tv/seucanal" pelo link do seu canal da Twitch. Além disso, certifique-se de que os ícones do LinkedIn e Twitch estão na pasta ./assets/.
2) Centralizando ícones e textos nos botões
Para garantir que os ícones e textos fiquem centralizados nos botões, adicione as seguintes propriedades CSS à classe .apresentacao__links__link no arquivo style.css:
.apresentacao__links__link {
display: flex;
justify-content: center;
gap: 16px;
}
display: flex;transforma o elemento em um contêiner flexível.justify-content: center;alinha os itens horizontalmente no centro.gap: 16px;adiciona um espaçamento de 16 pixels entre o ícone e o texto.
3) Ajustando o espaçamento entre ícones e textos
Para definir um espaçamento preciso entre os ícones e textos, consulte o Figma do projeto e encontre o valor exato. Se for, por exemplo, 12px, adicione a seguinte propriedade ao CSS:
.apresentacao__links__link {
gap: 12px;
}
4) Adicionando efeito Hover
Para criar um efeito ao passar o mouse sobre os botões, adicione esta regra ao style.css:
.apresentacao__links__link:hover {
border: 2px solid #0000FF;
}
Isso fará com que a borda do botão fique azul (#0000FF) ao passar o cursor sobre ele.
5) Alterando cursor e fundo dos botões
Para personalizar ainda mais a interação, altere o cursor e o fundo do botão no hover:
.apresentacao__links__link:hover {
cursor: pointer;
background-color: #272727;
}
Essa regra define que, ao passar o mouse sobre o link, o cursor deve se transformar em uma mão (pointer) e a cor de fundo do botão deve mudar para um preto levemente mais claro (#272727).
Com essas alterações, seus botões de redes sociais estarão estilizados e interativos! Lembre-se de salvar as alterações nos seus arquivos HTML e CSS para ver os resultados no seu navegador. Se tiver mais alguma dúvida ou precisar de ajuda com outros desafios, é só perguntar!
