1
resposta

[Projeto] Resolucao de exercicios

1)

<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <div class="apresentacao__links">
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__link" href="https://github.com/seunome">
                <img src="./assets/github.png">
                Github
            </a>
            <a class="apresentacao__links__link" href="https://linkedin.com/seunome">
                <img src="./assets/linkedin.png">
                Linkedin
                </a>
                <a class="apresentacao__links__link" href="https://twitch.tv.com/seunome">
                <img src="./assets/twitch.png">
                Twitch
                </a>
        </div>
    </section>
    <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>
</body>
</html>

2)

.apresentacao__links__link{
display: flex;
justify-content: center;
gap: 16;
}

3)

.apresentacao__links__link{
display: flex;
justify-content: center;
gap: 16;
}

4)

.apresentacao__links__link:hover{
border-color: #0000FF;
}

5)

.apresentacao__links__link:hover{
background-color: #272727;
border-color: #0000FF;
cursor: pointer;

}

Desafio do cursor ali em cima.

1 resposta

Oii, Valentina.

Agradeço por compartilhar.

Gostei de como você estruturou os links com display: flex e adicionou o hover pra melhorar a interação visual. Isso deixa o projeto mais intuitivo e agradável.

Uma dica interessante para o futuro é usar transition para suavizar o efeito ao passar o mouse:


.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    transition: all 0.3s ease;
}

Esse código adiciona uma transição suave a todas as mudanças de estilo.

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