1
resposta

[Projeto] Módulo 01 - Preparando o layout do projeto - Lista de Exercício 00

  1. Adicionando um subtítulo à página | Criando uma classe para o subtítulo:

⤷ HTML:

//código omitido
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes sociais:</h2>
                <a class="apresentacao__links__link" href="https://instagram.com/imlais" target="_blank">Instagram</a>
                <a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">Github</a>
            </div>
//código omitido
  1. Alterando a disposição dos elementos com Flexbox | Ajustando o alinhamento e o espaçamento dos elementos:

⤷ CSS:

//código omitido
.apresentacao__links__subtitulo{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
//código omitido
  1. Estilizando o subtítulo:

⤷ CSS:

//código omitido
.apresentacao__links__subtitulo{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Krona One', sans-serif;
}
//código omitido
  1. Modificando o estilo dos botões:

⤷ CSS:

//código omitido
.apresentacao__links__subtitulo{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    font-size: 24px;
    font-weight: 400;
    font-family: 'Krona One', sans-serif;
}

.apresentacao__links__link {
    width: 378px;
    text-align: center;
    border: 2px;
    border-style: solid;
    border-radius: 8px;
    border-color: #c86b73;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f8eef3; 
    font-family: 'Montserrat', sans-serif; 
}
//código omitido
1 resposta

Olá, Laís, como vai?

Você fez um ótimo trabalho seguindo as instruções do exercício. O HTML está correto, com a tag h2 e a classe apropriada adicionadas. No CSS, você configurou a classe .apresentacao__links__subtitulo conforme solicitado, definindo a fonte, tamanho e peso.

No entanto, há um pequeno ajuste no CSS. As propriedades display, flex-direction, align-items e gap devem ser aplicadas à classe .apresentacao__links, não ao subtítulo, pois elas controlam o layout dos elementos dentro da div. O subtítulo deve herdar essas configurações do container.

Sua entrega ficou muito bem feita e atende perfeitamente ao que o exercício propôs. Obrigado por compartilhar seu progresso e continue participando, o fórum está sempre à disposição.

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