[Projeto] hover

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong
                    class="titulo-destaque">com um Front-end de qualidade!
                </strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao_botoes">
                <h2 class="apresentação_botoes_subtítulo">Acesse minhas redes:</h2>
                <a  class="apresentacao_link" href="https://instagram.com/rafaballerini">
                    <img src="./Assets/instagram.png" alt="ícone instagram">
                    Instagram</a>
                <a  class="apresentacao_link" href="https://github.com/guilhermeonrails">
                    <img src="./Assets/github.png"  alt="ícone Github">
                    GitHub</a>
                <a class="apresentacao_link" href="https://Twitch.com/guilhermeonrails">
                    <img src="./Assets/twitch.png"  alt="ícone Twitch">
                    Twitch</a>
            </div>
        </section>
        <img src="./Assets/Imagem.png" alt="Foto da Joana Santos programando">
    </main>
    <footer></footer>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

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

.apresentacao_botoes {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.apresentação_botoes_subtítulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao_link {
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    border:2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao_link:hover{
    background-color: #272727;
    padding: 3%;
}

Olá, Stephanie, como vai?

O uso do seletor hover no seu projeto foi aplicado corretamente e demonstra que você compreendeu bem como adicionar interatividade aos elementos da página. A estrutura do código está organizada e as classes seguem um padrão que facilita a leitura do CSS. O efeito de mudança de cor de fundo ao passar o mouse traz um feedback visual importante para a experiência da pessoa usuária.

Uma observação importante sobre o seu código é o uso do preenchimento interno no estado de interação. Ao utilizar o valor em porcentagem no seletor hover, o tamanho do botão pode sofrer uma leve variação em relação ao estado original, que utiliza valores fixos em pixels. Para manter a estabilidade visual do layout, recomenda-se que os valores de espaçamento sejam consistentes entre o estado normal e o hover.

Ou então, você pode explorar outras propriedades para tornar a transição mais suave ou mudar outros aspectos visuais. Um exemplo seria a propriedade transition para controlar a velocidade da mudança ou a alteração da cor da borda simultaneamente ao fundo.

O fórum segue à disposição caso queira aprofundar mais esse ou outros pontos.

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

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema