Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

hover, h1 e h2

Bom dia!

As tags h1 e h2 e hover não estão funcionando no header tanto na pagina principal quanto na pagina de produtos, alguem consegue me ajudar?

HTML:

<!DOCTYPE html>
<html lang='pt-br'>
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class='caixa'>
                <h1><img src="logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h1 class="titulocentralizado">Sobre a Barbearia Alura</h1>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>


            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

        <div class="beneficios">
            <h2 class="titulocentralizado">Benefícios</h2>

            <ul class="lista-beneficios">
                <li class="itens">Atendimento aos clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais qualificados</li>
            </ul>
            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>
</html>

CSS:

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display:  inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform:  uppercase;
    color:  #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.nav a:hover { /*muda o comportamento ao passar o mouse por cima*/
    color: #C78C19;
    text-decoration: underline;
}

#banner {
    width:  100%;
}

.principal {
    background: #CCCCCC;
    padding: 30px;
}


.titulocentralizado {
    text-align: center;
}

p {
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: red;
}

.itens {
    font-style:  italic;
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}

.lista-beneficios {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagembeneficios {
    width: 50%;
}
4 respostas

Bom dia João,

Quando vc utiliza o <link rel="stylesheet" href="reset.css">no seu código ele reseta todos as configurações padrões dos navegadores. Então as opções que está utilizando devem ser configuradas novamente no CSS. Se você remover está parte do seu código verá que voltará a funcionar. Mas não seria o correto se você já tem um pouco de prática. Se tiver coloque as configurações desse itens no seu código CSS.

Pois bem, mas as configurações de hover estão no css, não entendo porque o efeito não está funcionando.

solução!

Consegui resolver!

Sobre o hover, eu havia colocado um ponto antes do nav e estava sendo intepretado como classe:

Como estava:

.nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

Ao remover o ponto o comportamento foi corrigido.

Sobre o h1 e h2 eu corrigi no CSS mesmo:

.titulocentralizado {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
}

Perfeito. É isso ai.