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

depois que criei a pagina contato.html e mexi no arquivo style.css deu problema na pagina produtos.html

Boa tarde, fiz o curso passo a passo e quando terminei a pagina produtos.html estava tudo bem certinho como do professor. Ai fiz o curso inteiro da parte 3, seguindo passo a passo....renomeei o arquivo produtos.css para style.css e mexi nele pra colocar o que foi sendo feito na nova pagina.... na pagina produtos.html renomeei o link:

fui fazer uma revisao do que aprendi antes de fazer o curso 4... ai fui dar uma olhada na pagina de produtos e estava desconfigurada... o cabeçalho... o main e o rodapé tambem....

aconteceu isso com alguem?

minha lista voltou a ficar ocupando a linha inteira... olhei no css o que poderia ter causado isto e nao entendi...

Vou enviar os 2 arquivos aqui (o html e o css ...se alguem souber o que pode ter acontecido)

obrigada!!!!

*produtos.html *

<head>

    <meta charset =”UTF-8”>
    <title>Produtos - 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>

    <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-preco">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-preco">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-preco">R$ 35,00</p>
            </li>
        </ul>
    </main>

    <footer>
        <img src="logo-branco.png">
        <p class="copyright">© Copyright Barbearia Alura - 2021</p>
    </footer>

</body>


**style.css**

(proxima mensagem)

4 respostas
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;
}

.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: 40px;
}

.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;
}

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

main {
    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 background;
    cursor: pointer;
}

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

table {
    margin: 20px 0 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}
solução!

Boa tarde Cristina,

Comparando seu código com o da aula, as únicas coisas que estão diferentes são:

No seu código:

.produtos li:hover h2 {
    font-size: 40px;
}
footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px;
}

no da aula

.produtos li:hover h2 {
    font-size: 34px;
}
footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

Pode ser que ajuste, mas pode ter algo a mais. Começaria verificando esses dois.

vou dar uma olhada neste pedaço Marcelo...o resto está tudo igual ao que voce copiou da aula?

Obrigada

Olha Cristina,

Acredito que sim, mas gosto de colocar meu exercícios no github junto com o vercel, Fica mais fácil de outras pessoas poderem ajudar. Pois lá podemos indicar o que está de errado, e podemos analisar bem melhor porque teremos todos os arquivos utilizados no exercício. Se puder de uma olhada nisso. Fica bem mais fácil.

Valeu.