Proyectos de diseño web responsivo - Construye una página de inicio de producto

Cuéntanos qué está pasando:
No entiendo esta parte: Cada elemento .nav-link debe estar enlazado a su elemento correspondiente en la página de inicio (el valor que tiene el href es el id de otro elemento, por ejemplo, #footer ).

Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body>
    <header id='header'>
      <img
      id='header-img'
      src='https://images.fanart.tv/fanart/welcome-to-the-classroom-of-the-know-it-alls-5c620555791bb.png'
      alt='Classroom of the elite'/>
      <nav id='nav-bar'>
        <ul>
          <li><a 
          class='nav-link' 
          href='#home'>Home
          </a></li>
          <li><a 
          class='nav-link'
          href='#seasons'>Seasons
          </a></li>
          <li><a 
          class='nav-link'
          href='#novel'>Novel</a></li>
        </ul>
      </nav>
    </header>
    <section id='form-email'>
      <h1>¡I'll send you the news!</h1>
      <form 
      id='form' 
      action='https://www.freecodecamp.com/email-submit'>
        <input id='email'
        type='email'
        name='email'
        placeholder='Enter your email'
        required
        />
        <input id='submit'
        type='submit' 
        value='Submit'
        />
      </form>
    </section>
    <div>
      <iframe 
      id='video' 
      src='https://www.youtube.com/watch?v=PGRQB1VKEA0'
      width='680'
      height='480'
      allowfullscreen>
      </iframe>
    </div>


  </body>
</html>
/* file: styles.css */
body {
  background-color: rgb(10, 1, 20)
}

#header {
  display: flex;
  flex-direction: row;
  background-color: rgb(180, 10, 10);
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
}

#header-img {
  width: 200px;
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute; 
  right: 10px;
  top: 18px;
}

ul {
  color: rgb(180, 10, 10);
}

a {
  color: white;
}

@media (max-width: 650px) {
  nav > ul {
    flex-direction: row;
  }
}

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/104.0.5112.102 Safari/537.36 OPR/90.0.4480.84

Desafío: Proyectos de diseño web responsivo - Construye una página de inicio de producto

Enlaza al desafío:

Hola!

Lo que menciona el error es que debes enlazar los links del menu a elementos o secciones del cuerpo de tu sitio web.

Por ejemplo, el proyecto menciona que debes tener tres enlaces en el menu (al menos), por lo que deberias enlazar cada enlace a distintos elementos (o secciones) de la pagina. Para ello, debes darle un atributo id a la seccion y, en el atributo href del elemento a, utilizar el mismo id pero anteponiendo un #:

<a href="#seccion-uno">Ir a la Seccion 1</a>
<section id="seccion-uno">
<h2>Seccion Uno</h2>
</section>

Espero que te sirva,

Saludos!

1 Like