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

Desafio proposto no final do módulo 2

Olá, estou tendo difuldade em dar espaçamento na minha segunda lista! se eu uso "ul li {padding: x}, isto altera meu menu de navegação junto! Já tentei varias tags, mas parece que daí o padding n funciona! (obs.: o Css esta nas respostas!).

<!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 class="links">
                    <li class="links"><a href="index.html">Home</a></li>
                    <li class="links"><a href="produtos.html">Produtos</a></li>
                    <li class="links"><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <h1 class="titulo-principal">A Barbearia Alura</h1>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

            <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 id="descricao">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>
    </main>
    <div class="beneficios">
        <h3 class="beneficios-titulo">Benefícios</h3>
    </div>
    <div class="caixa-beneficios">
        <img src="beneficios.jpg" class="imagembeneficios">
        <ul class="itens">
            <li><strong>&check;</strong> Atendimento aos clientes</li>
            <li><strong>&check;</strong> Espaço diferenciado</li>
            <li><strong>&check;</strong> Localização</li>
            <li><strong>&check;</strong> Profissionais qualificados</li>
        </ul>
    </div>
</body>
<footer>
    <img src="logo-branco.png">
    <p class="copyright">© Copyright Barbearia Alura - 2021</p>
</footer>

</html>
3 respostas
CSS:
header {
    background: #BBBBBB;
    padding: 20px 0;
    border-bottom: dashed #000000 4px;
}

body {
    background-color: #BBBBBB;
}

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

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

nav li.links {
    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;
}

.titulo-principal {
    display: inline-block;
    position: relative;
    left: 18%;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin: 50px 0 30px 0;
    border-top: dashed 1px;
    border-bottom: solid 6px;
    border-right: solid 6px;
    padding: 10px;
    border-radius: 7px;
    border-top-left-radius: 6px;
    background-color: #BBBBBB;
}

#banner {
    width: 100%;
}

.principal {
    padding: 10px;
    background-color: #BBBBBB;
}

.principal p {
    margin-bottom: 10px;
}

.titulo-centralizado {
    display: inline-flex;
    position: relative;
    left: 35%;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    margin-bottom: 25px;
    margin-top: 25px;
    border-top: dashed 1px;
    border-bottom: solid 6px;
    border-right: solid 6px;
    border-radius: 7px;
    border-top-left-radius: 6px;
    background-color: #BBBBBB;
}

#missao {
    padding: 10px;
}

p {
    text-align: center;
    font-size: 18px;
    padding-left: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

p strong {
    font-weight: bold;
    padding: 10px 0 0 0;
}

#descricao strong {
    font-style: bold;
    font-style: uppercase;
}

.descricao {
    margin-bottom: 30px;
}

#missao em strong {
    font-size: 30px;
    color: #C78C19;
}

.caixa-beneficios {
    border-bottom: dashed 4px;
    padding: 10px;
    background-color: #BBBBBB;
}

.beneficios-titulo {
    display: inline-block;
    position: relative;
    left: 80%;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    margin-bottom: 25px;
    margin-top: 45px;
    border-top: dashed 1px;
    border-bottom: solid 6px;
    border-right: solid 6px;
    padding: 10px;
    border-radius: 7px;
    border-top-left-radius: 6px;
    background-color: #BBBBBB;
}

.beneficios {
    position: relative;
    background: #BBBBBB;
}

.itens {
    display: inline-block;
    position: absolute;
    font-size: 26px;
    right: 0;
    font-style: italic;
    padding: 15px;
}

ul li.itens {
    padding: 15px;
}

ul li strong {
    color: seagreen;
    padding: 15px;
}

ul li:hover {
    text-decoration: underline;
}

.imagembeneficios {
    display: inline;
    position: relative;
    width: 60%;
    margin-left: 5%;
    margin-bottom: 3%;
}

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

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}
solução!

Olá Tiago, tudo bem?

Criando a class="itens" para <ul> dos benefícios da forma que foi feita, fará com que as ul's se diferenciem. Dessa forma, quando chamarmos essa classe no CSS não modificará a <ul> da navegação.

Entretanto, por que o padding não foi aplicado?

O que ocorreu é que no HTML a class .itens foi atribuida ao <ul> e no CSS essa classe foi atribuida ao <li>. Veja:

ul li.itens {
    padding: 15px;
}

Esse erro de sintaxe faz com que não seja localizado o local de aplicação das propriedades.

Podemos resolver isso modificando de duas formas, o importante é deixarmos claro que essa classe pertence a <ul> e não <li>.

  • 1ª Forma:

    ul.itens li {
      padding: 15px;
    }
  • 2ªForma:

    .itens li {
      padding: 15px;
    }

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

Muito obrigado Beatriz Moura! Sua explicação foi excelente, além de consertar meu código, pude entender o que eu tinha feito de errado. Muito obrigado mesmo!