2
respostas

[Projeto] Mão na massa: HTML e CSS Cabeçalho, footer e variáveis.

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 sociais :</h2>
            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/jonathasriibeiro/">Linkedin</a>
            <a class="apresentacao__links__link" href="https://github.com/Jriibeiro">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.

.apresentacao__links {
display: flex;
flex-direction: column;
}

3 - 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.

 .apresentacao__links {
    display:flex;
    flex-direction:column;
    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.

<div class="apresentacao__links">
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes sociais :</h2>
            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/jonathasriibeiro/">Linkedin</a>
            <a class="apresentacao__links__link" href="https://github.com/Jriibeiro">GitHub</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.

.apresentacao__links__subtitulo {
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px; }

6 - 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.

.apresentacao__links__link{

width: 378px;
text-align: center;
border: 2px solid #22D4FD;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #f6f6f6;
font-family: 'Montserrat', sans-serif; }
2 respostas

Olá Jonathas, como vai você? Espero que esteja bem!

Parabéns por alcançar suas metas nos desafios propostos! A prática é o alicerce do aprendizado.

Mantenha-se comprometido com seus estudos.

Estou aqui para auxiliar em caso de dúvidas.

Abraços e continue avançando em sua jornada educacional

Parabéns jonathas!