1
resposta

[Projeto] Desafio

Desafio 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">
                <img src="./assets/linkedin.png">
                linkedin
            </a>
            <a class="apresentacao__links__link" href="https//Twitch.com">
                <img src="./assets/twitch.png">
                Twitch
            </a>
        </div>
    </section>
    <img src="./assets/ht.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>
</body>
</html>

Desafio 2 e 3

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

Desafio 4

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

Desafio 5

.apresentacao__links__link:hover{ background-color: #272727; }

1 resposta

Olá, Yago. Tudo certo?

Gostei muito de ver seu desafio postado no fórum do curso. Você tá aplicando bem os conceitos aprendidos.

  1. Estrutura HTML: Você organizou bem o conteúdo dentro da <main> e utilizou classes semânticas como <section> e <div>, o que é muito bom para a acessibilidade e manutenção do código.

  2. Estilização dos Links: Utilizou display: flex; justify-content: center; gap: 16px; para centralizar os links horizontalmente e adicionar um espaçamento entre eles. Isso melhora a usabilidade e a estética da página.

  3. Estilização ao Passar o Mouse: Implementou :hover nos links para mudar a cor de fundo (background-color) quando o mouse passa sobre eles. Isso adiciona interatividade e feedback visual para os usuários.

Continue explorando e praticando! Parabéns pelo progresso e dedicação ao curso!

Abraços!