Entrar Ainda não tem acesso?
2
respostas

Como deixei meu site com o mesmo estilo da página de produtos

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por PABLO BARBOSA DE OLIVEIRA
| 69.8k xp | 9 posts
Auxiliar de Mediação

Bom dia colegas,

Abaixo eu compartilho o código que utilizei para deixar a minha homepage com o mesmo estilo da página de produtos que criamos nesse curso. Tive dificuldade para deixar a lista de benefícios da barbearia centralizada e em linha, tentei procurar alguma dicas e a que funcionou foi regular as margens laterais do elemento. Entendo que pode não ser um código muito sofisticado nesse início, mas gostei do resultado final e como conversou com o estilo da página de produtos que havia criado.

Fiquem livres para opinar ou modificar o código de acordo com as suas opiniões e conhecimentos, estou em busca de conhecimento e quanto mais melhor.

Minha homepage no HTML: 

<body>
    <header>
        <div class="caixa">

            <h1><img src="logo.png"></h1>

            <nav>  
                <ul>
                    <li><a href="site.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            </div>

    </header>
    <div class="principal">

        <h2 class="tituloCentralizado">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>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="tituloCentralizado"> Beneficíos</h3>
        <ul class="listaBeneficios">
            <il class=itens>* Atendimento aos clientes</il>
            <il class="itens">* Espaço diferenciado</il>
            <il class="itens">* Localização</il>
            <il class="itens" >* Profissionais qualificados</il>
        </ul>

    </div>

© Copyright Barbearia Alura 2021.

Agora seu 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:#8B0000; text-decoration: underline; }

.principal{ background: #FFFFFF; padding:20px; margin:auto;}

.tituloCentralizado{ text-align: center; font-size: 40px; }

p{ text-align:center; }

#missao{ font-size: 20px }

em strong{ color: #000000; } em strong:hover{ color:#8B0000; font-size: 40px; }

} .beneficios{ background: #FFFFFF; padding: 40px 0px;

}

.itens{ display: inline-block; width: 700px text-align:center; font-weight: bold; font-size: 25px; margin-right: 25%; margin-left: 40%; padding:20px;

}

.itens:hover{ color:#8B0000; font-size: 35px;

}

footer { text-align: center; background:url("bg.jpg"); padding:40px 0; margin-top: 10px; } .copyright{ color: #FFFFFF; font-size: 13px; margin-top: 20px; }

2 respostas
por PABLO BARBOSA DE OLIVEIRA
| 69.8k xp | 9 posts
Auxiliar de Mediação

A primeira parte é minha página de produtos:

          <div class="caixa">

            <h1><img src="logo.png"></h1>

            <nav>  
                <ul>
                    <li><a href="site.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>
            <ul class="produtos">


           <li>
            <h2>Cabelo</h2>
            <img src="cabelo.jpg">
            <p class="produto-descricao"> Na tesoura ou máquina, como o cliente preferir</p>
            <p class="produto-preço"> R$ 25,00</p>
            </li>
               <li>
                <h2>Barba</h2>
                <img src="barba.jpg">
                <p class="produto-descricao"> Corte e desenho  profissional de Barba</p>
                <p class="produto-preço"> R$ 18,00</p>
            </li>
            <li>
                <h2>Cabelo+Barba</h2>
                <img src="cabelo+barba.jpg">
                <p class="produto-descricao"> Pacote completo de cabelo e barba</p>
                <p class="produto-preço"> R$ 35,00</p>
            </li> 
           </ul>
</main>

© Copyright Barbearia Alura 2021.

o CSS da página de produtos: 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:#8B0000; text-decoration: underline; }

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

.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: #8B0000;

}

.produtos li:active{ border-color: #006400; } .produtos li:hover h2{ font-size: 40px; }

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

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

}

.produto-preço{ 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-top: 20px; }

por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Pablo! Como vai?

Obrigado por compartilhar com a gente o seu código! Certamente irá ajudar outros estudantes!

Desejo bons estudos! Se precisar tirar alguma dúvida, pode contar com a gente! :)