Adicionando um subtítulo à página
No seu arquivo index.html, localize a div onde estão os links para Instagram e Github e adicione o subtítulo com a tag <h2>:
html
Copiar
Editar
<div class="apresentacao__links">
<h2>Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="https://github.com/seuusuario">Github</a>
<a class="apresentacao__links__link" href="https://instagram.com/seuusuario">Instagram</a>
</div>
Alterando a disposição dos elementos com Flexbox
No seu arquivo style.css, altere o Flexbox da classe .apresentacao__links para dispor os elementos verticalmente:
css
Copiar
Editar
.apresentacao__links {
display: flex;
flex-direction: column; /* de linha para coluna */
}
Ajustando o alinhamento e o espaçamento dos elementos
Ainda dentro da mesma classe .apresentacao__links, adicione as propriedades para centralizar e espaçar os elementos:
css
Copiar
Editar
.apresentacao__links {
display: flex;
flex-direction: column;
align-items: center; /* centraliza horizontalmente */
gap: 32px; /* espaçamento entre os elementos */
}
Criando uma classe para o subtítulo
No index.html, adicione a nova classe à tag <h2>:
html
Copiar
Editar
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
Estilizando o subtítulo
No style.css, crie a classe com os estilos definidos:
css
Copiar
Editar
.apresentacao__links__subtitulo {
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}
Certifique-se de que a fonte 'Krona One' esteja sendo importada corretamente no HTML (com link do Google Fonts, por exemplo).
6) Modificando o estilo dos botões
No style.css, atualize a classe dos botões .apresentacao__links__link:
css
Copiar
Editar
.apresentacao__links__link {
background-color: transparent; /* Remove fundo ciano */
color: #F6F6F6; /* Texto branco */
border: 2px solid #22D4FD; /* Borda ciano */
width: 378px; /* Largura ajustada */
border-radius: 8px; /* Cantos menos arredondados */
padding: 16px;
text-align: center;
text-decoration: none;
font-weight: 600;
}