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

Alguém pode me explicar por que ficou dessa forma ?

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

4 respostas

Posta o código html e css aqui.

<head>
    <meta charset="UTF-8">
    <title>Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap" rel="stylesheet">
</head>    

<body>
    <header>
        <div class="caixa">
            <h1><img src="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>

    <img class="banner" src="banner.jpg">

    <main>
        <section class="principal">
            <div class="conteudoPrincipal">
                <h2 class="tituloPrincipal">Sobre a Barbearia Alura.</h2>

                <img class="utensilios" src="utensilios.jpg" alt="Utensilios de um barbeiro.">

                <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>Nossa missão é: <em>"<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>
        </section>

        <section class="mapa">
            <h3 class="tituloPrincipal">Nossa Localização</h3>
            <p>Nosso estabelecimento está localizado no coração da cidade</p>
            <div class="conteudoMapa">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58511.10452828014!2d-46.63018531419854!3d-23.570453469400135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1623705808951!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </section>

        <section class="beneficios">
            <h3 class="tituloPrincipal">Benefícios</h3>

            <div class="conteudoBeneficios">
                <ul class="listaBeneficios">
                    <li class="itens">Atendimento aos clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais qualificados</li>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img class="beneficiosImagem" src="beneficios.jpg">
            </div>

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

    <footer>
        <img src="logo-branco.png" alt="Logo Barbearia Alura">
        <p class="copyrigth">Copyrigth Barbearia Alura - 2021</p>
        <!-- <p class="copyrigth">&copy; Copyrigth Barbearia Alura - 2021</p> -->
    </footer>
</body>

body{ background-color: rgb( 120, 120, 90); font-family: 'Montserrat', sans-serif; }

header{ background: rgb(75, 95,60); padding: 20px 0px; }

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

nav{ position: absolute; top: 110px; right: 220px; }

nav li{ display: inline; margin-left: 15px; }

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

nav a:hover{ color: rgb(216, 162, 12); text-decoration: underline; }

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

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0px 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid black; border-radius: 13px; }

.produtos li:hover{ border-color: rgb(216, 162, 12); }

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

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

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

.produtosDescricao{ font-size: 18px; }

.produtosPreco{ font-size: 22px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background: url("bg.jpg"); padding: 30px 0px; }

.copyrigth{ color: white; margin: 20px 0px 0px 0px; font-size: 14px }

.copyrigth::before{ content: "© "; }

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

form{ margin: 40px 0; }

form label, form legend{ display: block; font-size: 22px; margin: 15px 0 10px; }

.entrada{ display: block; margin: 0 0 20px; width: 50%; padding: 10px 25px; }

.enviar{ width: 40%; border: none; padding: 15px; background: orange; font-size: 18px; font-weight: bold; color: white; border-radius: 5px; transition: 1s all; 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{ padding: 8px 15px; border: 1px solid black; }

/* css da página home */ .banner{ width: 100%; }

.principal{ padding: 3em; background: rgb(148, 148, 75); }

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

.tituloPrincipal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }

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

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

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.principal em strong{ color: rgb(39, 6, 223); transition: 1s; cursor: default; }

.principal em strong:hover{ font-size: 17px; color: rgb(13, 3, 71); }

.mapa{ padding: 3em 0; background: linear-gradient(rgb(148, 148, 75), rgb( 120, 120, 90)); }

.mapa p{ padding: 0 0 2em; text-align: center; }

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

.beneficios{ padding: 3em 0; }

.conteudoBeneficios{ width: 640px; margin: 0 auto; }

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

.itens{ line-height: 1.5; }

.itens:before,.itens:hover{ content: "✯ "; font-size: 18px; cursor: default; }

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

.beneficiosImagem{ width: 60%; box-shadow: 10px 10px 5px 0 rgb(0, 0, 0); opacity: 0.7; transition: 250ms; }

.beneficiosImagem:hover{ opacity: 1; }

.video{ width: 560px; margin: 4em auto 1em; /* padding: 3em 0 0; */ box-shadow: 5px 5px 5px 0 rgb(0, 0, 0); }

solução!

Já resolvi o problema.