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

[Dúvida] alinhamento cabeçalho

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Estilizando o cabeçalho

por Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts

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

meu cabeçalho ficou em coluna e não em linha, como o da aula.

*{ margin: 0; padding: 0; }

body { box-sizing: border-box; background-color: black; color: white; }

.cabecalho__menu__link{ color: #32E7A6; font-size: 24px; font-family: 'Montserrat', sans-serif; font-weight: 600; }

.cabecalho__menu__link{ display: flex; gap: 80px; }

.cabecalho{ padding: 2% 0% 0% 15%; }

.apresentacao { padding: 8% 15%; display: flex; align-items: center; justify-content: space-between; }

.apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; gap: 40px; }

.apresentacao__conteudo__titulo { font-size: 36px; font-family: 'Krona One', sans-serif; }

.destaque-titulo { color:#32E7A6; }

.apresentacao__conteudo__subtitulo { font-size: 24px; font-family: 'Montserrat', sans-serif; }

.apresentacao__dos__links{ font-family: 'Krona One', sans-serif; font-weight: 400; font-size: 24px; } .apresentacao__links{ display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 32px; } .apresentacao__links__link{

justify-content: center;
gap: 16px;
display: flex;
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 18px 0px;
text-decoration: none;
color: white;
font-family: 'Montserrat', sans-serif;
border: 2px solid #32E7A6;

} .apresentacao__links__link:hover{ background-color: #272727; }

.apresentacao__conteudo__subtitulo:hover{ color: #D35269; } .rodape{ padding: 24px; color: black; background-color: #32E7A6; font-size: 24px; font-family: 'Montserrat', sans-serif; text-align: center; font-weight: 400; }

3 respostas
por Blayner Melo
| 51.1k xp | 31 posts

No about.html verifica se adicionou a classe no heather assim como no index.html

Home Sobre mim
por Paula Dandara dos Santos Medeiros
| 21.1k xp | 19 posts
<header class="cabecalho">
    <nav class="cabecalho__menu">
        <a class="cabecalho__menu__link">Home</a>
        <a class="cabecalho__menu__link">Sobre mim</a>
    </nav>
</header>
    <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível 
                <strong class="destaque-titulo">com um Front-end de qualidade!</strong> </h1>
                <p class="apresentacao__conteudo__subtitulo">
                Olá! Sou Paula Medeiros, desenvolvedora Front-end com especialidade em <strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem boas ideias em prática . Vamos conversar?
                </p>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__dos__links">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://instagram.com/pauladsmedeiros"> 
                        <img src="assets/instagram.png"> Instagram
                    </a>
                    <a class="apresentacao__links__link" href="https://github.com/pauladsmedeiros"> 
                        <img src="assets/github.png"> Github
                    </a>
                    <a class="apresentacao__links__link" href="https://linkedin.com/in/pauladsmedeiros/"> 
                        <img src="assets/linkedin.png"> Linkedin
                    </a>
                </div>
            </section>
         <img src="assets/foto perfil paula.png" alt="foto de paula medeiros">
    </main>
<footer class="rodape">Desenvolvido por Paula Medeiros.</footer>
</body>
solução!
por Ryan vinicius belushi silva
| 44.6k xp | 3 posts

Oi, aparentemente você está aplicando o flex box no elemento filho:

.cabecalho__menu__link{

display: flex;
gap: 80px;

}

O correto seria aplicar no elemento pai que seria o "cabecalho__menu". Assim ficaria:

.cabecalho__menu {
display: flex;
gap: 80px;

}