1
resposta

Lista de exercícios - Preparando o layout do projeto

1- Adicionando um subtítulo à página:

<div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/brenda-figueiredo-a073821a6/">linkedin</a>
                    <a class="apresentacao__links__link" href="https://github.com/Brefifi-Dev">GitHub</a>
             </div>

2- Alterando a disposição dos elementos com Flexbox:

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

3- Ajustando o alinhamento e o espaçamento dos elementos:

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

4- Criando uma classe para o subtítulo:

<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>

5- Estilizando o subtítulo:

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

6- Modificando o estilo dos botões:


.apresentacao__links__link{

    border: 2px solid #BA55D3;
    width: 378px;
    text-align: center;
    border-radius: 8px;
}

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

1 resposta

Oi, Brenda! Como vai?

Gostei de como você organizou os elementos da sua página com Flexbox! A forma como você estruturou a classe .apresentacaolinks deixa o layout bem responsivo e fácil de ajustar.

Uma dica interessante: Se quiser que os botões tenham um efeito visual ao passar o mouse, você pode usar hover. Veja este exemplo:


.apresentacao__links__link:hover {
    background-color: #BA55D3;
    color: #fff;
    transition: 0.3s;
}

Isso faz com que o botão mude de cor ao passar o mouse, criando um efeito mais dinâmico.

Obrigada por compartilhar seu código com a comunidade Alura!

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