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

Criando a página contato no html.

Preciso de ajuda, tentei vários caminhos fiz exatamente como foi feito na aula mas o logo e todas as configurações da página produtos.html se perderam. Onde está o erro?

Página produtos.html

          <link rel= "stylesheet" href="C:\Users\Meu Computador\Desktop\Lógica\reset.css">
          <link rel="stylesheet" href="style.css">
   </head>
       <body>
           <header>
                       <div class="caixa">
                       <h1><img src= "C:\Users\Meu Computador\Desktop\Lógica\logo.png">
                        </h1>
                        <nav>
                        <ul>
                            <li><a href = "C:\Users\Meu Computador\Desktop\Lógica\html e CSS\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="C:\Users\Meu Computador\Desktop\Lógica\cabelo.jpg">
                   <p class="produto-descrição">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 ="C:\Users\Meu Computador\Desktop\Lógica\barba.jpg">
                   <p class="produto-descrição">Corte e desenho profissional de barba</p>
                   <p class= "produto-preço">R$ 18,00</p>
                   </li>

                   <li>
                   <h2>Cabelo + Barba</h2>
                   <img src="C:\Users\Meu Computador\Desktop\Lógica\cabelo+barba.jpg">
                   <p class="produto-descrição">Pacote completo de cabelo e barba</p>
                   <p class= "produto-preço">R$ 35,00</p>
                   </li>
               </ul>

           </main>    
           <footer>
               <img src="C:\Users\Meu Computador\Desktop\Lógica\logo-branco.png">
               <p class="copyright">© Copyright Barbearia Alura - 2019</p>
           </footer>
       </body>    
 </html>  




Oi Renan os arquivos: 


 Criei a pasta dentro do sublime !
 módulo 3

 e o arquivo 
** contato.html!**



 <!DOCTYPE html>
          <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>
               <form>
                   <label for= "nomesobrenome">Nome e Sobrenome</label>
                   <input type= "text" id="nomesobrenome">
                   <label>Email</label>
                   imput type="text" id="email">
               </form>
           </main>    
           <footer>
               <img src="C:\Users\Meu Computador\Desktop\Lógica\logo-branco.png">
               <p class="copyright">© Copyright Barbearia Alura - 2019</p>
           </footer>
       </body>    
 </html>  

style.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; } .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-descrição{ font-size: 20px; } .produto-preço{ font-size: 22px; font-weight: bold; margin-top: 10px; }

footer { text-align: center; background: url("C:/Users/Meu Computador/Desktop/Lógica/bg.jpg"); padding: 40px; 0; } .copyright{ color: #FFFFFF; font-size: 13px margin: 20px 0 0; }

Obrigada, aguardo.

6 respostas

Explicando melhor a Home e página produto ficaram normais, mas a página copiada e colada "contato.html" que perdeu a configuração.

Olá, Neita.

Tudo bem?

Então, pelo que entendi o problema está na página de contatos. Poderia por gentileza compartilhar o código dos seus arquivos contato.html e style.css, assim fica mais fácil para testar aqui e achar o problema. Esse link do Drive está pedindo autorização de acesso.

Muito obrigado Neita. Fico aguardando.

Oi Renan. Enviando arquivo, não sei como enviar de outra forma, tentei anexar o link, mas não abriu , a imagem do sublime não consegui salvar por aqui.

contato.html

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

           </main>    
           <footer>
               <img src="C:\Users\Meu Computador\Desktop\Lógica\logo-branco.png">
               <p class="copyright">© Copyright Barbearia Alura - 2019</p>
           </footer>
       </body>    
 </html>  

style.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; } .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-descrição{ font-size: 20px; } .produto-preço{ font-size: 22px; font-weight: bold; margin-top: 10px; }

footer { text-align: center; background: url("C:/Users/Meu Computador/Desktop/Lógica/bg.jpg"); padding: 40px; 0; } .copyright{ color: #FFFFFF; font-size: 13px margin: 20px 0 0; }

Oi, Neita.

É exatamente assim que envia o código, o do style.css poderia por em um bloco de código também. Agora em relação a sua página, eu abri aqui e aparentemente está tudo certo! Tirei o print dela:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Obrigada Renan Bezerra da Silva. Sim as páginas estavam ok, na hora de renomear as páginas eu troquei, assim que aprendemos, agora está tudo certo.