2
respostas

lista <ul> não aparece formatada como lista.

Modifiquei o layout do projeto em aula para treinar contudo ao fazer isso tirei a formatação da minha lista ( por exemplo, os marcadores em bolinhas), e não estou conseguindo visualizar aonde está o erro. Alguém poderia 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 class="caixa2">Barbearia Alura</h1>
                <h2><img src="logo.png" alt = "Logo da Barbearia Alura"></h2>

                <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>

    <main>

        <img id="banner" src="banner.jpg">
                <div class="principal">
                    <h3 class="titulo-centralizado">Sobre a Barbearia Alura</h3>

                    <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" class="lista">
            <h4 class="titulo-centralizado">Benefícios</h4>

                <ul class="lista">
                    <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>
    </main>



        <footer>
            <img src="logo-branco.png" alt = "Logo da Barbearia Alura">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
        </footer>

    </body>
</html>

CSS:

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

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

.caixa2{
    font-size: 40px;
    font-weight: bold;
    vertical-align: top;
    text-align: center;


}

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 {
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;    
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

.main_geral {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label, form legend {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding:15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;

}

.enviar:hover{
    background: darkorange;
    transform: scale(1.2);
}

/*Home*/

#banner {
    width:100%;
}

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

}

.titulo-principal {
    padding-left: 0px;
    font-size: 30px;
    font-weight: bold;
}


.titulo-centralizado {
    text-align: center;
    font-size: 25px;
    padding-bottom: 10px;
    font-weight: bold;
}

p {
    text-align: center;
    font-size: 15px;
    padding-bottom: 15px
}

#missao {
    font-size: 20px
}

em strong {
    color: #FF0000;
}

.itens {
    font-style: italic;

}

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

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

.imagembeneficios {
    width: 40%;
}
2 respostas

Boa tarde amigo!

Já tentou alterar onde tá .lista no css para .ul? Sei que está tentando pegar pelo identificador, mas dá uma olhada no console do navegador...

Já fiz isso mas ficou na mesma.