- Organizando ícones nas redes sociais:
╰┈➤ HTML:
//código omitido
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">
<img src="./assets/Logo Github.png" alt="Logo Github">
Github
</a>
<a class="apresentacao__links__link" href="https://www.linkedin.com/in/moraeslais/" target="_blank">
<img src="./assets/Logo linkedin.png" alt="Logo LinkedIn">
LinkedIn
</a>
<a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">
<img src="./assets/Logo Twitch.png" alt="Logo Twitch">
Twitch
</a>
</div>
//código omitido
- Centralizando ícones e textos nos botões:
╰┈➤ CSS:
//código omitido
.apresentacao__links__link {
display: flex;
justify-content: center;
width: 378px;
text-align: center;
border: 2px;
border-style: solid;
border-radius: 8px;
border-color: #22D4FD;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
//código omitido
- Espaçamento entre ícones e textos:
╰┈➤ CSS:
//código omitido
.apresentacao__links__link {
display: flex;
justify-content: center;
gap: 16px;
width: 378px;
text-align: center;
border: 2px;
border-style: solid;
border-radius: 8px;
border-color: #22D4FD;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
//código omitido
- Personalizando o efeito Hover | Alterando o cursor e o fundo dos botões:
╰┈➤ CSS:
//código omitido
.apresentacao__links__link {
display: flex;
justify-content: center;
gap: 16px;
width: 378px;
text-align: center;
border: 2px;
border-style: solid;
border-radius: 8px;
border-color: #22D4FD;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__links__link:hover {
background-color: #272727;
}
//código omitido