1) Adicionando LinkedIn e Twitch
Adicione os links para LinkedIn e Twitch no HTML, mantendo o mesmo estilo já utilizado para o GitHub.
HTML:
html
Copiar
Editar
<main class="apresentacao">
<section class="apresentacao__conteudo">
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="https://github.com/seunome" target="_blank">
<img src="./assets/github.png" alt="Ícone do GitHub">
GitHub
</a>
<a class="apresentacao__links__link" href="https://linkedin.com/in/seunome" target="_blank">
<img src="./assets/linkedin.png" alt="Ícone do LinkedIn">
LinkedIn
</a>
<a class="apresentacao__links__link" href="https://twitch.tv/seunome" target="_blank">
<img src="./assets/twitch.png" alt="Ícone do Twitch">
Twitch
</a>
</div>
</section>
<img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>
2) Centralizando ícones e textos nos botões com Flexbox
No arquivo CSS, você precisa ajustar a classe .apresentacao__links__link para usar Flexbox. Adicione as propriedades mencionadas no desafio.
CSS:
css
Copiar
Editar
.apresentacao__links__link {
display: flex; /* Ativa o Flexbox */
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Centraliza verticalmente */
gap: 16px; /* Espaçamento entre o ícone e o texto */
text-decoration: none; /* Remove o sublinhado */
color: #333; /* Cor do texto */
padding: 10px 16px; /* Espaçamento interno */
border-radius: 8px; /* Bordas arredondadas */
transition: all 0.3s ease; /* Efeito suave ao passar o mouse */
}
3) Ajustando o espaçamento entre ícones e textos
Se no Figma o valor do espaçamento entre o ícone e o texto for diferente de 16px, basta alterar o valor da propriedade gap.
Por exemplo, se o Figma indicar um espaçamento de 12px:
CSS atualizado:
css
Copiar
Editar
.apresentacao__links__link {
gap: 12px; /* Ajuste o valor de acordo com o design */
}
4) Personalizando o efeito Hover com borda azul
Adicione o efeito :hover à classe .apresentacao__links__link para que ela exiba uma borda azul quando o cursor passar por cima.
CSS:
css
Copiar
Editar
.apresentacao__links__link:hover {
border: 2px solid #0000FF; /* Borda azul */
transition: border 0.3s ease; /* Suaviza a transição */
}
5) Alterando o cursor e o fundo dos botões no hover
Adicione o cursor estilo pointer e altere o fundo do botão para o tom de preto (#272727) ao passar o mouse.
CSS:
css
Copiar
Editar
.apresentacao__links__link:hover {
background-color: #272727; /* Fundo preto mais claro */
cursor: pointer; /* Cursor de mão */
}
Resultado Final do CSS Completo:
Combinando todos os ajustes:
css
Copiar
Editar
.apresentacao__links__link {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
text-decoration: none;
color: #333;
padding: 10px 16px;
border-radius: 8px;
transition: all 0.3s ease;
}
.apresentacao__links__link:hover {
border: 2px solid #0000FF; /* Borda azul no hover */
background-color: #272727; /* Fundo preto no hover */
cursor: pointer; /* Cursor de mão */
}
Visual Final
Os ícones e textos estarão centralizados.
Haverá espaçamento uniforme entre o ícone e o texto.
Ao passar o mouse sobre o botão, ele exibirá:
Borda azul.
Fundo preto (#272727).
Cursor de mão.
Transições suaves deixarão a interação mais agradável.
