Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Deu uma bagunça agora na minha página que não sei como arrumar. ALGUÉM ME AJUDA!!!

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Alan Lemos Martins
| 127.4k xp | 39 posts

Pessoal, eu estou na parte 4 do curso de html e css e na mesma, estamos refazendo a nossa página que tinhamos criado lá no começo, só que agora que nós juntamos a três paginas de html em um só css, todas as outras páginas perderam a formatação certinha que elas tinham, e estão pegando a formatação da página inicial que estamos refazendo agora, segue o código abaixo:

html página inicial: 

</head>

<body>
    <header>
        <div class="caixa"> 
            <h1 class="titulo-principal">Barber Shop</h1>
                <h2><img id="logo" src="C:\Users\PC\Downloads\banner\logo.png"></h2>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contatos.html">Contatos</a></li>
                    </ul>
                </nav>
        </div>
    </header>

    <img class="banner" src="C:\Users\PC\Downloads\banner\barber.jpg">

    <main>
        <section class="principal">
            <h3 class="titulo-principal">Sobre a Barber Shop</h3>

                <img class="bagulhete" src="C:\Users\PC\Downloads\banner\utensilios.jpg" alt="Utensilios de um barbeiro.">

                <p>Localizada no coração da cidade de São Paulo a <strong>Barber Shop</strong> traz para o mercado o que há de melhor para o seu cabelo e barba.
                Fundada em 2022, a Barber Shop já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id="missao"><em>Nossa missão é:<strong> "Proporcionar experiências únicas em suas vidas"</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>
        </section>

        <section class="map">
            <h4 class="titulo-principal">Nosso Estabelecimento</h4>
            <p>Nosso estabelecimento está localizado no coração da cidade de São Paulo.</p>
            <div class="map-conteudo">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117038.1472093165!2d-46.66074123497956!3d-23.552560303410292!2m3!1f0!2
                f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1sen
                !2sbr!4v1655763336028!5m2!1sen!2sbr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-ref
                errer-when-downgrade"></iframe>
            </div>
        </section>

        <section class="beneficios">
            <h4 class="titulo-principal">Benefícios</h4>

            <div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos Clientes.</li>
                    <li class="itens">Espaço extremamente agradável.</li>
                    <li class="itens">Localização.</li>
                    <li class="itens">Os melhores produtos.</li>
                    <li class="itens">Pontualidade.</li>
                    <li class="itens">Limpeza.</li>

                </ul><img src="C:\Users\PC\Downloads\banner\beneficios.jpg" class="imagem-beneficios">   
            </div>

                <div class="video">
                    <iframe width="100%" height="500" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="acc
                    elerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
        </section>
    </main>

    <footer>
        <img src="C:\Users\PC\Downloads\banner\logo-branco.png">
        <p class="copyright">© Copyright Barber Shop - 2022.</p>;
    </footer>
</body>
4 respostas
por Alan Lemos Martins
| 127.4k xp | 39 posts

HTML pagina produto:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barber Shop</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img id="logo" src="C:\Users\PC\Downloads\banner\logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contatos.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>    
        </header>

        <main class="produtos">
            <ul>
                <li>
                    <h2>Cabelo</h2>
                    <img src="C:\Users\PC\Downloads\banner\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="C:\Users\PC\Downloads\banner\barba.jpg">
                    <p class="produto-descricao">Corte e desenho profissional de barba.</p>
                    <p class="produto-preco">R$ 15,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="C:\Users\PC\Downloads\banner\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="C:\Users\PC\Downloads\banner\logo-branco.png">
            <p class="copyright">&copy; Copyright Barber Shop - 2022.</p>;
        </footer>
    </body>
</html>
por Alan Lemos Martins
| 127.4k xp | 39 posts

html pagina contato:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barber Shop</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img id="logo" src="C:\Users\PC\Downloads\banner\logo.png" alt="Logo da Barbearia-Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contatos.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>    
        </header>

        <main class="">
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label> 
                <input type="text" id="nomesobrenome" class="input-padrao" required>

                <label for="email">Email</label>
                <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

                <label for="telefone">Telefone</label>
                <input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">

                <label for="mensagem">Mensagem</label>
                <textarea cols="68" rows="10" id="mensagem" class="input-padrao" required></textarea>

                <fieldset class="radio-button">

                    <legend>Como prefere nosso contato?</legend>

                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

                    <label for="radio-telefone"><input type="radio" name="contato" value="phone" id="radio-telefone">Telefone</label> 

                    <label for="radio-whats"><input type="radio" name="contato" value="whats" id="radio-whats" checked>WhatsApp</label>

                </fieldset>

                <fieldset>
                    <select>
                        <legend>Qual horário prefere ser atendido?</legend>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

                <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades no seu email?</label>
                <input type="submit" value="Enviar formulário" class="enviar">
            </form>

            <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>08h / 20h</td>
                    </tr>
                    <tr>
                        <td>Terça</td>
                        <td>08h / 20h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>07h / 18h</td>
                    </tr>
                    <tr>
                        <td>Quinta</td>
                        <td>08h / 20h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>09h / 23h</td>
                    </tr>
                    <tr>
                        <td>Sábado</td>
                        <td>10h / 23h</td>
                    </tr>
                </tbody>
            </table>
        </main>

          <footer>
            <img src="C:\Users\PC\Downloads\banner\logo-branco.png" alt="Logo da Barbearia-Alura">
            <p class="copyright">&copy; Copyright Barber Shop - 2022.</p>;
        </footer>
    </body>
</html>
por Alan Lemos Martins
| 127.4k xp | 39 posts

todo o css:

body {
    font-family: 'Open Sans', sans-serif;
    background-color: white;
}

header {
    background-color:rgb(134, 0, 0);
    padding: 20px 0px;
}

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

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

nav li {
    display: inline;
    margin: 0 0 0 15px;  
}

nav a {
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;

}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
    font-size: 27px;
}

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

.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 black;
    border-radius: 5px 5px 20px 5px;
}

.produtos li:hover {
    border-color: #C78C19;
    color: #C78C19;
}

.produtos li:active {
    border-color: white;
}

.produtos li:hover h2 {
    font-size: 34px;
    color: #C78C19;
}

.produto-preco:hover {
    border-color: #C78C19;
}

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

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

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
    border: 2px dashed black;

}

footer {
    text-align: center;
    background-image: url("C:/Users/PC/Downloads/banner/bg.jpg");
    padding: 40px 0;
}

.copyright { 
    color: white;
    font-size: 13px;
    margin-top: 20px;
}

main {
}

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: 10px 0;
    background:rgb(134, 0, 0);
    color:rgb(199, 140, 25) ;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px 4px 10px 4px;
    transition: 3s all;
    cursor: pointer;
}

.enviar:hover {
    color:rgb(134, 0, 0);
    background:rgb(199, 140, 25);
    transform: scale(1.1);
}

table {
    margin: 20px 0 40px;

}

thead {
    background: rgb(134, 0, 0);
    font-weight: bold ;
}

td, th {
    border: 3px inset black;
    padding: 5px 15px;
    text-align: center;
    font-weight: bold;
}

td {
    background-color: #C78C19;
}    

/* novo css da página incial..... PS: o antigo style-home.css foi substituído */

.banner {
    position: relative;
    margin-top: 10px;
    margin-bottom: 15px;
    left: 10%;
    width: 80%;
    height: 700px;
}

.titulo-principal{
    font-weight: bold;
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

h1 {
    position: relative;
    right: 70px;
}

h1:hover {
    font-size: 40px;
    color: #C78C19;
}

.principal {
    padding: 3em 0;
    background: #C78C19;
    width: 940px;
    margin: 0 auto;
}

.principal p {
    margin: 0 0 1em ;   
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.bagulhete {
    width: 120px;
    float: left;
    margin:0 20px 20px 0;
}

.map {
    padding: 3em 0;
    background: linear-gradient(#C78C19, rgb(134, 0, 0));

}

.map p {
    margin: 0 0 2em;
    text-align: center;
}

.map-conteudo {
    width: 940px;
    margin: 0 auto;
}
.beneficios {
    padding: 3em 0;
    background: rgb(134, 0, 0);
    border: 8px solid #C78C19;
    box-shadow: inset 0 0 80px black;

}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;

}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.itens {
    line-height: 1.5;
}

.itens:first-child {
    font-weight: bold;
}

.itens:before {
    content: "✂";
}

.imagem-beneficios {
    width: 60%;
    opacity: 1;
    transition: 500ms;
}

.imagem-beneficios:hover {
    box-shadow: 5px 0px 30px 15px #C78C19;
}

.video {
    margin: 1em auto;
    width: 940px;
    border: 8px solid #C78C19;
    border-radius: 0px 0px 5px 0px;
}
solução!
por Renan Lima
| 3716.5k xp | 7859 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Alan.

Tudo bem?

Então, eu copiei todo o seu código e coloquei no meu Visual Studio Code, a única coisa que tive que fazer foi adicionar as imagens porque não com o código, ou seja, está funcionando certinho. Só a página de contato que ficou com os elementos coldados no lado esquerdo.

Esquisito ter quebrado o site para você, pois está certinho t anto o HTML quanto o CSS, verifica as nomenclaturas de classe e faz alguns testes no CSS:

HOME:

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

PRODUTOS:

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

CONTATO:

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

Valeu, Alan!

Qualque dúvida manda aqui.