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

[Dúvida] Nav não está ao lado do logo

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Evoluindo do mobile ao desktop e atividade Adaptação estrutural

por Antonio Alves Pereira Junior
| 206.5k xp | 30 posts

No meu projeto o nav não fica ao lado do logo. Conferi o css e não encontrei o erro.

.cabecalho {
    color: var(--branco);

    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: .75rem;
    padding-bottom: .75rem;

    border-bottom: 1px solid var(--borda-cabeacalho-mobile);

    position: absolute;
}

.cabecalho__logo {
    margin-bottom: 1rem;
}

.cabecalho__navegacao {
    text-align: center;
}

.cabecalho__link {
    font-size: 1.1rem;

    display: inline-block;

    margin-right: .7rem;
    margin-bottom: 1.25rem;
    margin-left: .7rem;

}

@media screen and (min-width: 1024px) {
    .cabecalho {
        flex-direction: row;
        justify-content: space-between;
        border: none;
    }
}

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

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
6 respostas
por Noberto Luis Martins Ferreira Filho
| 127.3k xp | 77 posts

ola, consegue postar o HTML também?

por Antonio Alves Pereira Junior
| 206.5k xp | 30 posts
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Home | Apeperia</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
        <link href="css/base.css" rel="stylesheet">
        <link href="css/cabecalho.css" rel="stylesheet">
        <link href="css/chamada.css" rel="stylesheet">
        <link href="css/destaques.css" rel="stylesheet">
        <link href="css/diferenciais.css" rel="stylesheet">
        <link href="css/sobre.css" rel="stylesheet">
        <link href="css/planos.css" rel="stylesheet">
        <link href="css/contato.css" rel="stylesheet">
        <link href="css/institucional.css" rel="stylesheet">
        <link href="css/rodape.css" rel="stylesheet">


    </head>

    <body>
        <header class="cabecalho container">
           <header>
            <img src="img/logo-apeperia.svg" alt="Logo da apeperia" class="cabecalho__logo">
            <nav class="cabecalho__navegacao">
                <ul>
                    <li class="cabecalho__link"><a href="#">Sobre</a></li>
                    <li class="cabecalho__link"><a href="#">Planos</a></li>
                    <li class="cabecalho__link"><a href="#">Blog</a></li>
                    <li class="cabecalho__link"><a href="#">Destaques</a></li>
                    <li class="cabecalho__link"><a href="#">Institucional</a></li>
                    <li class="cabecalho__link"><a href="#">Contato</a></li>
                </ul>
            </nav>
           </header>
        </header>

        <main>
            <section class="chamada container">
                <h1 class="chamada__titulo">Aplicativos na Medida</h1>
                <p class="chamada__texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                <a href="#" class="chamada__botao botao">Conheça os planos</a>
            </section>

            <section class="destaques container">
                <h2 class="destaques__titulo">Destaques</h2>
                <a href="#">
                    <figure class="destaques__painel">
                        <img src="img/comecando-criar-logotipo.png" alt="Painel do post sobre criação de logotipo" class="destaques__painel-imagem">
                        <figcaption class="destaques__painel-texto">Conheça as primeiras etapas para a criação de um logotipo</figcaption>
                    </figure>
                </a>
                <a href="#">
                    <figure class="destaques__painel">
                        <img src="img/dicas-fotografia.png" alt="Painel do post sobre fotografia com celular" class="destaques__painel-imagem">
                        <figcaption class="destaques__painel-texto">Veja dicas de como fotografar usando seu celular</figcaption>
                    </figure>
                </a>

                <a href="#" class="destaques__botao botao">Receber destaques por email</a>
            </section>

            <section class="diferenciais container">
                <ul class="diferenciais__lista">
                    <li class="diferenciais__item diferenciais__item--tempo">
                        <h2 class="item__titulo">Tempo</h2>
                        <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--foco">
                        <h2 class="item__titulo">Foco</h2>
                        <p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--especialistas">
                        <h2 class="item__titulo">Especialistas</h2>
                        <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                    </li>
                </ul>
            </section>
por Antonio Alves Pereira Junior
| 206.5k xp | 30 posts
<section class="sobre container">
                <div class="sobre__conteudo">
                    <h2 class="sobre__titulo">Sobre</h2>
                    <p class="sobre__texto">Criamos aplicativos personalizados para <strong class="sobre__texto--destaque">todas as pessoas</strong>!</p>
                    <p class="sobre__texto">
                        A manutenção de um aplicativo não pode ser um custo extra para o cliente, Na Apeperia você assina nosso serviço e a manutenção já está inclusa. Assim, você não se preocupa com manutenção, é tudo por nossa conta.
                    </p>
                    <p class="sobre__texto sobre__texto--destaque sobre__texto--divisao">
                        Conte com uma equipe especializada e exclusiva pra projetos incríveis em qualquer plataforma.
                    </p>
                    <ul class="sobre__plataformas">
                        <li><img src="img/android.png" alt="Ícone do Android"></li>
                        <li><img src="img/blackberry.png" alt="Ícone da Blackberry"></li>
                        <li><img src="img/apple.png" alt="Ícone da Apple"></li>
                        <li><img src="img/windowsphone.png" alt="Ícone da Microsoft"></li>
                    </ul>
                    <p class="sobre__texto">Desenvolvemos aplicativos para todas as plataformas</p>
                </div>
                <img src="img/sobre-apeperia.png" alt="Sobre a Apeperia" class="sobre__imagem">
            </section>

            <section class="planos container">
                <h2 class="planos__titulo">Planos</h2>
                <ul class="planos__cartoes">
                    <li class="cartao cartao--start">
                        <h3 class="cartao__titulo">Start</h3>
                        <article class="cartao__conteudo">
                            <p class="cartao__preco"><em>R$ 500</em></p>
                            <p class="cartao__texto">5 manutenções mensais</p>
                            <p class="cartao__texto">App SEO</p>
                            <p class="cartao__texto">1 sistema operacional</p>
                            <a href="plano.html" class="cartao__botao cartao__botao--start botao">Assinar plano</a>
                        </article>
                    </li>
                    <li class="cartao cartao--ultra">
                        <h3 class="cartao__titulo">Ultra</h3>
                        <article class="cartao__conteudo">
                            <p class="cartao__preco"><em>R$ 1500</em></p>
                            <p class="cartao__texto">20 manutenções mensais</p>
                            <p class="cartao__texto">App SEO</p>
                            <p class="cartao__texto">4 sistemas operacionais</p>
                            <p class="cartao__texto">24h de atendimento</p>
                            <a href="" class="cartao__botao cartao__botao--ultra botao">Assinar plano</a>
                        </article>
                    </li>
                    <li class="cartao cartao--mega">
                        <h3 class="cartao__titulo">Mega</h3>
                        <p class="cartao__preco"><em>R$ 1000</em></p>
                        <article class="cartao__conteudo">
                            <p class="cartao__texto">10 manutenções mensais</p>
                            <p class="cartao__texto">App SEO</p>
                            <p class="cartao__texto">2 sistemas operacionais</p>
                            <a href="" class="cartao__botao cartao__botao--mega botao">Assinar plano</a>
                        </article>
                    </li>
                </ul>
            </section>

            <section class="contato container">
                <h2 class="contato__titulo">Contato</h2>
                <p>Entre em contato com a gente</p>
                <a href="contato.html" class="contato__botao botao">Entre em contato</a>
            </section>

            <section class="institucional container">
                <h2 class="institucional__titulo">Institucional</h2>
                <p class="institucional__descricao">Um pouco mais sobre a Apeperia</p>
                <address class="institucional__endereco">
                    Rua Vergueiro, 3185 <br>
                    Vila Mariana, São Paulo
                    <article class="institucional__contato">
                        <p>
                            <a href="tel:+551155712751" class="institucional__contato-telefone">(11) 5571-2751</a> ou 
                            <a href="mailto:contato@apeperia.com" class="institucional__contato-email">contato@apeperia.com</a></p>
                    </article>
                </address>
                <video src="img/formacao-java.mp4" class="institucional__video" controls></video>
            </section>

        </main>
por Antonio Alves Pereira Junior
| 206.5k xp | 30 posts
<footer class="rodape container">
            <img src="img/logo-apeperia.svg" alt="logo da apeperia" class="rodape__logo">
            <ul class="rodape__social">
                <li><a href="#" class="rodape__midia">
                    <img src="img/facebook.png" alt="ícone do facebook">
                </a></li>
                <li><a href="#" class="rodape__midia">
                    <img src="img/twitter.png" alt="ícone do twitter">
                </a></li>
                <li><a href="#" class="rodape__midia">
                    <img src="img/instagram.png" alt="ícone do instagram">
                </a></li>
            </ul>
            <nav>
                <ul class="rodape__navegacao">
                    <li class="rodape__link"><a href="#">Sobre</a></li>
                    <li class="rodape__link"><a href="#">Planos</a></li>
                    <li class="rodape__link"><a href="#">Blog</a></li>
                    <li class="rodape__link"><a href="#">Destaques</a></li>
                    <li class="rodape__link"><a href="#">Institucional</a></li>
                    <li class="rodape__link"><a href="#">Contato</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>
solução!
por Noberto Luis Martins Ferreira Filho
| 127.3k xp | 77 posts

oi, verifica teu Header. A tag header ta duplicada, elimina a de dentro que está sem classe e deve resolver.

por Antonio Alves Pereira Junior
| 206.5k xp | 30 posts

É isso mesmo. Obrigado, Norberto.