Meu código não passa no teste do freecodecamp mas do codepen passa

Meu código não tá passando no novo teste do freecodecamp, nos seguintes itens:

**Your #nav-bar should always be at the top of the viewport. **
Your Product Landing Page should use CSS Flexbox at least once.

Porém, quando faço o teste no codepen, passa normalmente. Segue link:

Alguém pode me ajudar?

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A melhor loja de Ukulele com o melhor conteúdo disponível!">
    <title>UKEND</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header id="header" class="cabecalho">
        <div id="title">
            <a href="#"><img class="cabecalho-imagem"src="https://www.imagemhost.com.br/images/2022/06/06/ukend-logo.png" id= "header-img" alt="Logo da ukend" border="0"></a>
        </div>

        <nav class="cabecalho-menu" id="nav-bar">
            <a class="nav-link" id="nav-link" href="#conteudo-principal">Início</a>
            <a class="nav-link" id="nav-link" href="#sobre">Sobre</a>
            <a class="nav-link" id="nav-link" href="#produtos">Produtos</a>
            <a class="nav-link" id="nav-link" href="#contato">Contato</a>
        </nav>
    </header>

    <main class="conteudo">
        <section class="conteudo-principal" id="conteudo-principal">
            <div class="conteudo-principal-escrito">
                <h1 class="conteudo-principal-escrito-titulo">UKEND</h1>
                <h2 class="conteudo-principal-escrito-subtitulo">O mundo ukulelístico ilustrado da melhor forma.</h2>
                <button class="conteudo-principal-escrito-botao">Assine já!</button>
            </div>
            <img class="conteudo-principal-imagem" src="https://www.imagemhost.com.br/images/2022/06/06/uke-types.png" alt="Tipos de ukulele">
        </section>

        <section class="conteudo-secundario">
            <h3 class="conteudo-secundario-titulo">Motivos para ter um Ukulele:</h3>
            <p class="conteudo-secundario-paragrafo">1. <strong>É fácil de aprender:</strong> Com o ukulele é possível que já no primeiro contato o iniciante consiga tirar um som.</p>
            <p class="conteudo-secundario-paragrafo">2. <strong>Custa pouco:</strong> Um modelo para iniciar os estudos pode ser encontrado com facilidade a partir de 150 reais.</p>
            <p class="conteudo-secundario-paragrafo">3. <strong>É compacto e portátil:</strong> Por ser leve e pequeno, é muito fácil de ser transportado para qualquer lugar.</p>
        </section>

        <section class="sobre" id="sobre">
            <h3 class="sobre-titulo">Sobre nós</h3>
            <p class="sobre-paragrafo">A Ukend é referência em instrumentos musicais na internet. Oferecemos produtos de qualidade, atendimento feito por quem entende de cada um dos produtos e uma experiência de compra incrível. Conheça e conte conosco sempre que precisar!</p>
        </section>

        <section class="produtos" id="produtos">
            <h3 class="produtos-titulo">Conheça nossos produtos:</h3>
            <div class="produtos-video">
                <video id="video" width="640" height=auto controls>
                    <source src="https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4" type="video/mp4">
                </video>
            </div>
        </section>

        <section class="contato" id="contato">

            <div class="contato-escrito">
                <h3 class="contato-escrito-titulo">Entre em contato</h3>
                <p class="contato-escrito-paragrafo">Telefone: (71) 99999-9999</p>
                <p class="contato-escrito-paragrafo">E-mail: contato@ukend.com.br</p>
            </div>

            <div class="contato-formulario">
                <p class="contato-formulario-newslatter">Assine nossa newslatter e fique por dentro das novidades!</p>
                <form class="contato-form" id="form" method="post" action="https://www.freecodecamp.com/email-submit">
                    <input class="contato-formulario-email" type="email" id="email" name="email" placeholder="Insira seu e-mail" />
                    <input type="submit" id="submit" text="Enviar" />
            </div>
        </section>

    </main>

    <footer class="rodape">
        <img class="rodape-imagem" src="ukend-logo.png" alt="Logo da Ukend">
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Sarala:wght@400;700&display=swap');

*{
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    text-decoration: none;
} 

body { 
    font-size: 100%;
    background: #938e9e;
}

/* Estilo do cabeçalho*/

header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.cabecalho {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 15px;
}

.cabecalho-imagem {
    height: 85px;
}

.cabecalho-menu {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-family: 'Sarala', sans-serif;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 18px;
}

.nav-link:hover{
    text-decoration: underline;
    text-decoration-color: #A4541D;
    transition: all 0.3s ease-in;
}

/* Fim Estilo do cabeçalho*/


/* Estilo do conteúdo*/

.conteudo {
    margin-bottom: 48px;
    border-top: 0.4px solid #FFFFFF;
}

/*Conteudo principal*/

.conteudo-principal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

@media (max-width: 700px) {
    .conteudo-principal {
        display: flex;
        flex-direction: column;
    }
}

.conteudo-principal-escrito {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.conteudo-principal-escrito-titulo {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 64px;
    color: #FFFFFF;
}

.conteudo-principal-escrito-subtitulo {
    font-family: 'Sarala', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #874532;
}

.conteudo-principal-escrito-botao{
    background-color: #A4541D;
    width: 140px;
    height: 60px;
    border: none;
    box-shadow: 4px 5px 4px rgba(0,0,0, 0.25);
    border-radius: 20px;
    font-family: 'Sarala', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: white;
}

.conteudo-principal-escrito-botao:hover{
    background-color: #874532;
    transition: all 0.3s ease-in;
}

.conteudo-principal-imagem{
    height: 430px;
}

/*Conteudo secundário*/

.conteudo-secundario{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

.conteudo-secundario-titulo{
    border-top: 0.4px solid #FFFFFF;
    padding-top: 48px;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 24px;
    color: white;
    margin-bottom: 16px;
}

.conteudo-secundario-paragrafo{
    font-family: 'Sarala', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: white;
}

.sobre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

.sobre-titulo{
    border-top: 0.4px solid #FFFFFF;
    padding-top: 48px;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 24px;
    color: white;
    margin-bottom: 16px;
}

.sobre-paragrafo{
    font-family: 'Sarala', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: white;
    max-width: 900px;
    text-align: center;
}

.produtos{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

.produtos-titulo{
    border-top: 0.4px solid #FFFFFF;
    padding-top: 48px;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 24px;
    color: white;
    margin-bottom: 16px;
}

.produtos-video{
    padding-bottom: 48px;
}

.contato{
    border-top: 0.4px solid #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

@media (max-width: 700px){
    .contato{
        display: flex;
        flex-direction: column;
    }
}

.contato-escrito{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contato-escrito-titulo{
    padding-top: 48px;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
}

.contato-escrito-paragrafo{
    font-family: 'Sarala', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: white;
    max-width: 900px;
}

.contato-formulario{
    padding-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contato-form{
    margin-top: 10px;
}

.contato-formulario-newslatter{
    font-family: 'Sarala', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: white;
    max-width: 900px;
    text-align: center;
}

.contato-formulario-email{
    width: 200px;
	margin: 0 auto;
	padding: 10px;
	border: none;
	margin-bottom: 10px;
    margin-top: 10px;
	border-radius: 50px;
}


.rodape {
    border-top: 0.4px solid #FFFFFF;
    padding: 16px;
}

.rodape-imagem{
    height: 110px;
    display: block;
    margin: 0 auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36 Edg/102.0.1245.33

Challenge: Build a Product Landing Page

Link to the challenge:

Olá, @suzanapassos ! Boas-vindas ao fórum do freeCodeCamp. Como o título da publicação está em português, eu a movi para a seção do português. Espero que não se importe. Posso dizer que o primeiro teste não está passando porque #nav-bar não está ficando fixo no topo quando colocamos nos testes dentro da plataforma. Abri o CodePen e vi que lá está funcionando (talvez o código que o mantém acima esteja funcionando apenas em uma media query). Já o uso do flex me parece estranho, mesmo, pois há vários momentos em que você o utiliza. Vou conferir se há algo que possa ajudar você. Se alguém mais souber ajudar, fique à vontade. Enquanto isso, boas-vindas, mais uma vez e uma boa programação para você. :slight_smile:

1 Like

Olá, obrigada pela atenção e pelo feedback!

Sobre a nav-bar, realmente tenho que revisá-la e verificar porque no teste do freecode não está passando, porém, sobre a utilização de flexblox, a solicitação é que seja utilizada PELO MENOS uma vez, ainda que eu tenha usado de maneira incorreta, eu utilizei, e funcional.

edit

outra coisa que reparei, é que inserindo os códigos no editor do freecode, o css não é aplicado, você consegue fazer teste?

1 Like

No HTML, experimente trocar “style.css” (no link dentro de head) por “styles.css”. Veja se algo mudou.

1 Like

Oh, muito obrigada! Era somente isso! hahaha

1 Like