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:
