1
resposta

No exercício proposto...

Gostaria de saber porque meu display no (NAV LI nao fica inline..
<!DOCTYPE html>
<htlm 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"> Contatos </a> </li>
                </ul>
            </nav>
        </div>
    </header>

        <img id="banner" src="banner.jpg">
        <div class= "principal">
            <h2 class= "titulo-centralizado">  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 

insira seu código aqui

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">
            <h3 class= "titulo-centralizado"> Nossos beneficios </h2>
                <ul>

                 <li class= "itens"> Atendimento aos clientes </li>
                 <li class= "itens"> Espaco Diferenciado </li>
                 <li class= "itens"> Localizacao </li>
                 <li class= "itens"> Profissionais Qualificados </li>
            </ul>

            <img class="imagembeneficios" src= "beneficios.jpg">
        </div>
    </body>

</htlm>

 -- salve git

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

.titulo-principal { padding-left: 20px; }

#banner { width: 100%; }

.principal { background: #CCCCCC; padding: 30px; } .titulo-centralizado { text-align: center; }

p { text-align: center; }

#missao { font-size: 40px; }

em strong { color: #FF0000; }

.itens { font-style: italic; }

.beneficios { background: : #FF0000; padding:50px; }

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

.imagembeneficios { width: 30%; }

1 resposta

Olá Thiago tudo bem?

Observei o código da aula e no head do htmldo professor ele importou esse CSS produtos.css, para o arquivo produtos.html , este que você esta demonstrando o código na pergunta,

    <link rel="stylesheet" href="produtos.css">

Para o outro arquivo html index.html é que será importado o arquivo style.css

 <link rel="stylesheet" href=" style.css">

Desta forma se puder colocar em seu seu head do arquivo produtos.html a importação do produtos.css ele importará as formatações deste

    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>

Espero ter ajudado, Thiago

Até mais