1) Adicionando um subtítulo à página

Imagine que você está desenvolvendo uma página web para compartilhar suas redes sociais. Você precisa adicionar um subtítulo "Acesse minhas redes:" acima dos links para Instagram e Github. Sua tarefa é editar o arquivo index.html para incluir esse subtítulo. Lembre-se de usar a tag <h2> para o subtítulo e colocá-lo dentro da <div> que já contém os links.

<div class="apresentacao__links">
    <h2>Acesse minhas redes:</h2>
    <a class="apresentacao__links__link" href="https://instagram.com/rafaballerini">Instagram</a>
    <a class="apresentacao__links__link" href="https://github.com/guilhermeonrails">Github</a>
</div>

2) Alterando a disposição dos elementos com Flexbox

Agora que o subtítulo foi adicionado, você percebe que ele está alinhado à esquerda dos botões, ao invés de acima deles. Isso aconteceu porque os elementos estão dispostos horizontalmente. Sua missão é alterar a disposição dos elementos (subtítulo e botões) para uma disposição vertical. Edite o arquivo style.css, modificando a propriedade flex-direction para column dentro da classe .apresentacao__links. Isso mudará a direção do Flexbox, alinhando os elementos verticalmente.

index.html
<div class="apresentacao__links">
<h2>Acesse minhas redes:</h2>
<a href="https://link1.com/redirecionamento"></a>
<a href="https://link2.com/redirecionamento"></a>
</div>

style.css
.apresentacao__links{
flex-direction: column;
justify-content: space-between; //Espaçamento entre o conteudo da propriedade
}

Ajustando o alinhamento e o espaçamento dos elementos Após modificar a direção do Flexbox, você observa que os elementos (texto e botões) estão muito próximos uns dos outros e alinhados à esquerda. Para melhorar a estética da página, você precisa centralizar esses elementos verticalmente e adicionar um espaçamento entre eles. No arquivo style.css, dentro da classe .apresentacao__links, adicione a propriedade align-items: center para centralizar os elementos. Em seguida, insira a propriedade gap com o valor de 32px para adicionar o espaçamento entre cada elemento.

style.css
.apresentacao__links{
align-items: center;
gap: 32px; 
}

4) Criando uma classe para o subtítulo

Você está desenvolvendo uma página web e decidiu que o subtítulo "Acesse minhas redes:" precisa de uma estilização específica. Para isso, você vai criar uma classe CSS para este subtítulo. No arquivo index.html, encontre a tag <h2> que contém o subtítulo e adicione uma classe chamada apresentacao__links__subtitulo. Sua tarefa é inserir essa classe na tag <h2> de forma correta.

index.html
<div class="apresentacao__links">
<h2 class="apresentacao__links__titulo">Acesse minhas redes:</h2>
<a href="https://link1.com/redirecionamento"></a>
<a href="https://link2.com/redirecionamento"></a>
</div>

5) Estilizando o subtítulo

Agora que você criou uma classe para o subtítulo, é hora de estilizá-lo. No arquivo style.css, adicione a classe .apresentacao__links__subtitulo e configure as propriedades de estilo. Utilize a fonte 'Krona One', com um peso de fonte (font-weight) de 400 e um tamanho de fonte (font-size) de 24px. Ajuste a fonte para ser 'sans-serif' sem aspas. Sua tarefa é escrever o código CSS para aplicar essas configurações ao subtítulo.

index.html
<div class="apresentacao__links">
<h2 class="apresentacao__links__titulo">Acesse minhas redes:</h2>
<a href="https://link1.com/redirecionamento"></a>
<a href="https://link2.com/redirecionamento"></a>
</div>

style.css
.apresentacao__links__titulo {
font-family: 'Krona One', sans-serif;
font-weidght: 400;
font-size: 24px;
}

Modificando o estilo dos botões Os botões da sua página precisam de um novo visual. No arquivo style.css, encontre a classe .apresentacao__links__link e faça as seguintes alterações: remova o fundo ciano, mude a cor do texto para branco (#F6F6F6), adicione uma borda sólida de 2px na cor ciano (#22D4FD), altere a largura para 378px, e ajuste o border-radius para 8px. Sua tarefa é alterar o código CSS para refletir estas mudanças, criando botões com bordas ciano, texto branco, e cantos menos arredondados.

style.css .apresentacao__links__link{ width: 378px; color: #F6F6F6; border: 2px solid #22D4FD; border-radius: 8px; }