Landing Page del producto - Construye una página de inicio de producto

Español HTML-CSS
1

Cuéntanos qué está pasando:

Me pide que el nav-bar sea siempre visible y lo és. No encuentro el problema. item23

Tu código hasta el momento

<!-- file: index.html -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Yerba Mate</title>
  </head>
  <body>
    <header id="header">
      <div id="header-img-titulo">
        <h1>Yerba Mate</h1>
        <a href="#">
          <img
            id="header-img"
            src="https://st2.depositphotos.com/38197074/44228/v/450/depositphotos_442283666-stock-illustration-initial-letter-vector-logo-icon.jpg"
            alt="Yerba Mate"
          />
        </a>
      </div>
      <div class="header-nav">
        <nav id="nav-bar" class="nav-bar">
          <a class="nav-link" href="#descripcion">Descripción & Beneficios</a>
          <!-- <a class="nav-link" href="#beneficios">Beneficios</a> -->
          <a class="nav-link" href="#preparacion">Preparación</a>
          <a class="nav-link" href="#pedidos">Pedidos</a>
        </nav>
        <div class="social">
          <a href="https://www.facebook.com/gigyo"
            ><img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAe9JREFUSEu1lj9IV1EUxz9fEDKsIVyiQlwcBEMaDUEapCJCJYdIWgpMHMQQxCHKiIagKIf+gENL4BAKRemkNESzo38KItGWhgZBQfH0btyfvN/tvauP/N3t3fPnc86955z7RIWXKuyfKMDMDgFXgAtAM1APGPAdmAdmgClJW3mB5gLM7CLwwjuNJfoV6JM0m6WUCTCz0STSewWObwcYlvQktPkHYGb3gbsFnKdVByWNpTfKAGZ2GXgfcf4LGAI+Sfrh9Mzssd9zny6TNkmfSz52AYniEWAZOJ4D2AaaJC2m5QHAiZz8dOni04A+4GUk+glJ10pyM2sHzgLngZbArlPSO7eXBnwALkUAdyQ99MfSDbyN6I5L6g0Bq8CJiNFtSc88YBB4GtGdTzI4EwI2gOoDAvxOqulYCFgHagLAT0mxrFwVzQHnArv1pCeOhoAloCFQXJN0MtYTZrYCnAp0FiQ1hoA3SZn2FMnAz6rNjABeJ31yIwRcBSYO6A4yy7QK+AbU5UD2W0W7x1OWgS8/N0Gn/wPgRnmrpC8lH1nDzg2rgQzIfjJ4IKlsUGYB3N4r4G8nptZegEeSRsLAYg/Odd+ttd4oD+AmwC1JH7OOdq8n8zBwE+jyT+Nzf1f9QEcyNScBV5LFn8xYcxWRVfyv4g8hocIZ7BalugAAAABJRU5ErkJggg=="
          /></a>
          <a href="http://"
            ><img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAg5JREFUSEvFlU+IjlEUxn+PP0lKJCkLGyQx/jRjaawsaRZDKTaWJoqFLKRkYaFEjZXtaFhMYiUbyUZsxiQpzWLKymzUUGJmHvfo/b7u3Hnf+r70NWf1vvec8zz3/L2ix6Ie47MyBLZ3AleAo8B+aLyIgY/AG+CepC9lRpZFYPtCGANru0zfH2BE0sPcbwmB7X7gHbCqS/CW+TwwIOlD66AkeAoMdQH+DegDTgGjld+EpOEmghlgRw3BV+A28AnYAuwBrgEzkvpsDwDvK79pSbuaCH4AGwqCl6mQw5LmbG8NnaRZ2/uAF8DPVLNNwLbKb07SxmUEtiPvCwX4LLAbCLCzwDEgOuc1MAasrjood5uX1G6Qdg1sx+HvguCOpKvp5g+A6K5cRiVdtP0cOJEpFiStqYsgDqPVcjkPPKtuHPOQy5Skg7ZvpKzdzBSLkiKyf5JHEN+LBcgI8Dil5hVwoNBNSjps+3pK1a1cJ6mNW7Zp5DeXMUnnbN8HLhW6mNzLtiPCk5muvgZhYLskiIgOAeuBM8BgBRRFHk+tu66myL8khf3SFFUEdW0aszEkaTKPwHbsqUjf9iKy75I2NxHEsmoPSV64NLETxaAdL4Bbv58l7W0ieJJATjc4dnr8SFLMTG2KjgBv/3PZ9UuaqiWo6tC7dd1iLR6c2JZNkj84d1NLT5eGK/NkdlrNTux6HsFfblmsGZDoHZYAAAAASUVORK5CYII="
          /></a>
          <a href=""
            ><img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWNJREFUSEvtlU8rhFEUxn8PFuRPQkmRBSULCzaWdjZqFr6AhbLAlxBbG2Wl5Cv4CnYoYuPPwmKSBUpioTSOOdM70zu3mfd9a8xCzdnec87v9jzn3CuaHGpyf1qAVIWrJDKzEWAbmARGgYnUDmDADfAC3AFbkp7KdRWAmU0B50BvhqZJKe/AnKQHT4oDjoCVBpuXyw8lrYaAC2D2jwBnkuZDwCswWAfgOi8Be5E/affISxoPAQWgrU7lj6R2M+sANqNB6EmgvEkaqADMrBv4TCgwSRW4mQ0BO8Ba3MdY/YekvjjAb/adAChI8pxSZAB8SeoKJXKd60UJEEm07rMO9CfkP0saDgEukUtVK9yf5eKO7GY0+VbSdAjIA2Np45Hx/ETSQgg4BnIZG6SlHRSfCx+Aqk2eAU6BkjkNhj8Vl1WAaDp8kzeAxwiwGG13Zw2ge3YdTN89sC/pqpzf+nBSrfr/Ev0CMXJoGeOZ7/sAAAAASUVORK5CYII="
          /></a>
        </div>
      </div>
    </header>
    <main>
      <section id="descripcion" class="descripcion">
        <h2>Descripción</h2>
        <div class="text-section">
          <p>
            La yerba mate es una planta originaria de América del Sur, cuyo
            consumo es muy popular en Argentina, Uruguay, Paraguay y Brasil. Se
            prepara con hojas secas y molidas, y se consume en infusión. La
            yerba mate es rica en antioxidantes y nutrientes, y tiene
            propiedades estimulantes y diuréticas.
          </p>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTj7f7LrlG1wBHCBSN_AWyUTRfKnFNDiV5Fcw&s"
            alt="Hojas de Yerba Mate"
          />
        </div>
      </section>
      <section id="beneficios" class="beneficios">
        <h2>Beneficios</h2>
        <div class="text-section">
          <ul>
            <li>Estimula el sistema nervioso central.</li>
            <li>Mejora la concentración y la memoria.</li>
            <li>Combate la fatiga y el cansancio.</li>
            <li>Facilita la digestión.</li>
            <li>Es diurética y depurativa.</li>
          </ul>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXxqXGz7w7R1J-ljgajCNjiHUEskZHimj9OA&s"
            alt="Beneficios del mate"
          />
        </div>
      </section>
      <section id="preparacion" class="preparacion">
        <h2>Preparación</h2>
        <div class="text-section">
          <ol>
            <li>Calentar agua a 80-85°C.</li>
            <li>Colocar la yerba mate en un mate o recipiente similar.</li>
            <li>Verter el agua caliente sobre la yerba mate.</li>
            <li>Dejar reposar unos minutos.</li>
            <li>Tomar la infusión con una bombilla.</li>
          </ol>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0AsLsxH39CRb5Na5vGjke91V0iXTdj2FJmw&s"
            alt="Equipo Matero"
          />
        </div>
      </section>
      <section class="video" class="video">
        <h2>Gringos probando Mate</h2>
        <iframe id="video"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/zPKOyh2KCZE?si=v6-WHlcZGvErieJT"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen
        ></iframe>
      </section>
      <section class="pedidos">
        <h2 id="pedidos">Haz tu pedido</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
          <input type="text" name="nombre" placeholder="Nombre" />
          <input type="text" name="dirección" placeholder="Dirección" />
          <input type="text" name="ciudad" placeholder="Ciudad" />
          <input type="text" name="teléfono" placeholder="Teléfono" />
          <input
            type="email"
            name="email"
            id="email"
            placeholder="tu-mail@dominio.es"
          />
          <input id="submit" type="submit"> Enviar
        </form>
      </section>
    </main>
    <footer>
      <div class="fondo-footer">
        <p>Camino del Mate & Tradición &copy;Argentina 2025</p>
      </div>
    </footer>
  </body>
</html>


```css
*, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header{
  display: flex;
  justify-content: space-between;
  background-image: 
  url(https://www.pampadrugstore.net/img/cms/elegir%20bombillas%20para%20mate.png);
  background-size: cover;
  background-position: bottom;
  height: 300px;
  color:rgb(1, 44, 1);
  border-bottom: solid 1px white;
  width: 100%;
  top: 0;
  z-index: 999px;
}
body{
  font-family: 'Baskervville', serif;
  color: linen;
  background-color: rgb(1, 24, 13);
}
.header-nav{
  display: flex;
  align-content: space-around;
  /* flex-direction: column; */
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
}

#nav-bar{
  display: flex;
  justify-content: space-between;
  border-radius: 50px;
  width: 70%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 20px;
  position:fixed;
  z-index:999px;
}
.nav-link{
  color: aliceblue;
  text-decoration: none;
  font-size: x-large;
  padding: 20px;
  height: 60%;
  background-color: rgba(155, 235, 8, 0.4);
  border-radius: 60px;
}

.nav-link:hover{
  background-color: rgba(156, 235, 8, 0.6);
  border-radius: 50px;
  justify-content: center;
}

.social{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  /* flex-wrap: wrap; */
  border-radius: 50px;
  /* width: 70%; */
  background-color: rgba(0, 0, 0, 0.2);

}

a{
  width: 60%;
  text-align: center;
}

h1, h2{
  font-family: 'Baskervville', serif; 
  font-style: oblique;
  font-size: 3rem;
  padding: 10px;
}
h2{
  text-decoration: underline;
}

#header-img{
  width: 7%;
  position: center;
  object-fit: cover;
}

#header-img-titulo{
  position: center;
  justify-content: center;
  align-items: center;
}

main{
  display: grid;
  grid-template-columns: auto auto ;
  color: rgb(232, 241, 232);
  background-color: rgb(1, 24, 13);
  padding: 10px;
  /* row-gap: 3rem; */
}
section{
  background-color:  rgb(2, 105, 2, 0.3);
  padding: 20px;
  margin: 5px;
}

section img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border-style: solid;
  border-color: rgb(1, 24, 13);
}
.pedidos{
  grid-column: 1/-1;
  place-items: center;

}

.text-section{
  display: flex;
  justify-content: space-between;
  text-align: justify;
  flex-wrap: wrap;
  /* padding-right: 5px; */
}

footer{
  font-family: 'Baskervville', serif;
  color: rgb(1, 24, 13);
  text-align: center;
  text-shadow: 5px 5px 5px rgb(248, 245, 245);
  font-size: 1.5rem;
  text-size-adjust: 10px;
  background-image: url(https://previews.123rf.com/images/nbvf/nbvf1604/nbvf160401768/55440329-l%C3%ADnea-de-yerba-mate-de-hojas-secas-aislados-sobre-el-fondo-blanco.jpg);
  height: 80px;
  border-top: solid 1px white;
}
.fondo-footer{
  background-color: rgba(0, 0, 0, 0.2);
  height: 80px;
  border-top: solid 1px white;
  align-content: center;
}

@media (max-width: 600px){
  header{
    position: static;
    /* height: 150px; */
    width: 100%;
    background-image: url(https://previews.123rf.com/images/nbvf/nbvf1604/nbvf160401768/55440329-l%C3%ADnea-de-yerba-mate-de-hojas-secas-aislados-sobre-el-fondo-blanco.jpg);
    height: 80px;
  }
  main{
    grid-template-columns: auto;
    padding: 3px;
  }
  h2{
    font-size: 1.5rem;
  }
  .text-section{
    flex-wrap: wrap;
    align-content: center;
  }
  .header-nav{
    flex-direction: column;
    flex-wrap: wrap;
    /* padding: 5px; */
  }
  .social{
    flex-wrap: nowrap;
    padding: 2px;
  }
  .nav-link{
    height: 100%;
    /* padding: 5px; */
    font-size: larger;
  }
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Información del Desafío:

Landing Page del producto - Construye una página de inicio de producto

2

El problema está con ese div con clase header-nav, quítalo y todas las pruebas te pasarán.

Lo que sucede es que ese div está impidiendo que el elemento nav esté completamente en la parte superior del viewport. A simple vista parece que lo estuviera, pero si abres las herramientas de desarrollo del navegador podrás ver que el div con clase header-nav tiene un padding que impide que el nav esté por completo en la parte superior del viewport entonces el test identifica que no está en la parte superior.

3

Muchas gracias!, Es verdad, no me había dado cuenta de esto. Finalmente pasó la prueba. Saludos.

1 Like