1) Adicionando um subtítulo à página
<div class="apresentacao__links">
<h2>Acesse minhas redes:</h2>
<a href="https://www.instagram.com/seu_instagram" target="_blank">
<img src="./assets/instagram.svg" alt="Logo do Instagram">
Instagram
</a>
<a href="https://github.com/seu_github" target="_blank">
<img src="./assets/github.svg" alt="Logo do GitHub">
GitHub
</a>
</div>
2) Alterando a disposição dos elementos com Flexbox
.apresentacao__links {
display: flex;
flex-direction: column; /* Alinha os elementos verticalmente */
}
3) Ajustando o alinhamento e o espaçamento dos elementos
.apresentacao__links {
display: flex;
flex-direction: column;
align-items: center; /* Centraliza os elementos verticalmente */
gap: 32px; /* Adiciona espaçamento entre os elementos */
}
4) Criando uma classe para o subtítulo
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a href="https://www.instagram.com/seu_instagram" target="_blank">
<img src="./assets/instagram.svg" alt="Logo do Instagram">
Instagram
</a>
<a href="https://github.com/seu_github" target="_blank">
<img src="./assets/github.svg" alt="Logo do GitHub">
GitHub
</a>
</div>
5) Estilizando o subtítulo
.apresentacao__links__subtitulo {
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}
6) Modificando o estilo dos botões
.apresentacao__links__link {
background-color: transparent; /* Remove o fundo ciano */
color: #F6F6F6; /* Altera a cor do texto para branco */
border: 2px solid #22D4FD; /* Adiciona borda ciano */
width: 378px; /* Largura dos botões */
border-radius: 8px; /* Ajusta o arredondamento dos cantos */
}