1
resposta

praticando

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;
}
1 resposta

Oi, Vanessa! Como vai?

Seu cuidado em aplicar o flex-direction: column e centralizar os elementos com align-items: center deixou a estrutura visual muito bem organizada. A adição do subtítulo com a nova classe personalizada também mostra atenção aos detalhes no layout.

Continue firme nos estudos.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!