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

Nada demonstrado nos dois primeiros vídeos deste tópico funciona!

Assisti aos 2 primeiros vídeos deste "tópico" dos designs responsivos, não entendi grande coisa devido a nada do que o professor demonstrou nas aulas funcionar no meu, vou deixar o código html e css aqui, espero que alguém consiga me ajudar!

HTML 
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <title>Barbearia Alura</title>

        <link rel ="stylesheet" href="reset.css">
        <link rel ="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&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="barbearia.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contatos</a></li>
                    </ul>
                </nav>

            </div>
        </header>

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

        <main>
            <section class="principal">
                <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

                <img class="utensilios"src="utensilios.jpg" alt="Utensílios 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 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>
            </section>

            <section class="mapa">
                <h3 class="titulo-principal">Nosso estabelecimento</h3>
                <p>Nosso estabelecimento está localizado no coração da cidade.</p>
                <div class="mapa-conteudo">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.447146621054!2d-46.63416213216273!3d-23.588291458470234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1606600472430!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border: solid 1px #000000;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                </div>
            </section> 

            <section class="beneficios">

                <h3 class="titulo-principal">Benefícios</h3>

                <div class="conteudo-beneficios">
                    <ul class="lista-beneficios">
                           <li class="itens">Atendimento dos Clientes</li>
                           <li class="itens">Espaço diferenciado</li>
                           <li class="itens">Locaização</li>
                          <li class="itens">Profissionais quaificados</li>
                          <li class="itens">Pontualidade</li>
                          <li class="itens">Limpeza</li>
                       </ul><img src="beneficios.jpg" class="imagem-beneficios">
                </div>

                <div class="video">
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" 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 da Babearia Alura">
            <p class="copyright">© Copyright Barbearia Alura - 2019
        </footer>
    </body>
</html>

CSS vou tentar colocar em um link para redirecionar o código pois por aqui eu não estou conseguindo

4 respostas

Não consegui compartilhar o CSS de nenhum modo viável kkk, alguém pode me ajudar? É que ele não cabe tanto no post em si quanto no comentário e não consegui encontrar outro método.

Oi, Ronaldo, tudo bem?

Preciso do seu css para entender o comportamento da sua página, você pode compartilhar por trecho aqui, casa seja muito grande. Ou você pode compartilha pelo google drive ou github.

solução!

Já consegui encontrar os erros, então podem apagar o tópico ou considerar ele como resolvido.