2
respostas

[Projeto] Lista de Exercícios 2

1 Organizando ícones nas redes sociais

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio de Estanislau Jr</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Inicie sua formação<strong class="titulo__destaque">com HTML e Css</strong></h1>
            <p class="apresentacao__conteudo__texto"> no curso <strong>Alura</strong></p>
            <div class="apresentacao__botoes">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links" href="https://www.instagram.com/aluraonline/">instagram</a>
                <img src="./assets/letter-a.png" alt="Logo do Alura">
                        Alura
                    </a>
                    <a class="apresentacao__links" href="https://github.com/">
                        <img src="./assets/github.png" alt="Logo do github">
                        Github
                    </a>
                    <a class="apresentacao__links" href="https://www.twitch.tv/">
                        <img src="./assets/twitch.png" alt="Logo do twitch">
                        twitch
                    </a>
                </div>
            </section>
            <img src="./assets/alura.png" alt="logo do alura"
            </main>
        <footer></footer>
        <body>
    </html
    
    
2 respostas

2 Centralizando ícones e textos nos botões e espaçamento entre ícones e textos

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

4 Personalizando o efeito Hover e alterando o cursor e o fundo dos botões

.apresentacao__links:hover {
    background-color: #090333;
     border: 2px solid #12085e; */
    cursor: pointer;
}