1
resposta

Lista de exercícios 6

<main class="apresentacao">
            <section class="apresentacao__conteudo">
            <h1>Eleve seu negócio digital a outro nível<strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Viviane Lima, desenvolvedora Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__botao" href="https://github.com/guilhermeonrails">
                <img src="./Assets/github.png">
                Github
            </a>
            <a class="apresentacao__links__botao" href="https://instagram.com/rafaballerini">
                 <img src="./Assets/instagram.png">
                Instagram
            </a>
        </div>
        </section>
        <img src="Moça.png" width="700" height="500" alt="Foto da Joana Santos programando">
    </main>
    <footer></footer>
</body>
</html>
.apresentacao__links__botao {
    /* background-color: #7CFC00; 
    display: flex;
    justify-content: center;
    border: 2px solid #22d4fd;
.apresentacao__links__botao {
    /* background-color: #7CFC00; 
    display: flex;
    justify-content: center;
    gap: 16px;
.apresentacao__links__botao:hover {
    background-color: #272727;
    border: 2px solid green;
}
.apresentacao__links__botao:hover {
    background-color: #272727;
}
1 resposta

Olá, Viviane. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Gostei da estrutura que você criou para o seu HTML com a parte de apresentação e links para as redes sociais. É ótimo ver que você está utilizando o HTML de forma clara para criar uma boa experiência para o usuário. A parte de CSS também está interessante, mas percebi que o código está comentado, talvez por questões de teste ou ajustes. Uma dica legal seria experimentar a propriedade flex para distribuir seus itens de maneira mais eficiente. Por exemplo, se quiser que os botões fiquem alinhados na horizontal, pode usar o seguinte:


.apresentacao__links {
    display: flex;
    gap: 16px; /* Adiciona espaço entre os itens */
}

Esse código faz com que os itens dentro da classe apresentacao__links fiquem alinhados horizontalmente com um espaço de 16px entre eles.

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