Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi ! What does it mean please ? " * :Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer)."
Thanks

<!-- file: index.html -->
<header id="header">
  <div class="logo">
  <link rel="stylesheet" href="styles.css"></link>
  <img id="header-img" src=""/>
  </div>
  <svg viewBox="0 0 342 35" xmlns="http://www.w3.org/2000/svg"><path d="M0 .1a9.7 9.7 0 0 0 7 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 0 0 7-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 0 0 6-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 0 0-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 13.8h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 14.1h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zM308.5 7h26a9.6 9.6 0 0 0 7-7h-40a9.6 9.6 0 0 0 7 7z" fill="currentColor"></path></svg>
<nav id="nav-bar">
  <ul>
    <li><a class="nav-link" href="#model3">Model 3</a></li>
    <li><a class="nav-link" href="#models">Model S</a></li>
    <li><a class="nav-link" href="#modelY">Model S</a></li>
    <li><a class="nav-link" href="#modelx">Model X</a></li>
  </ul>
</nav>
</header>

<form id="form" action="https://www.freecodecamp.com/email-submit">
  <p>Enter your email adress for a chance to win a Tesla</p>
  <input id="email" type="email" placeholder="email" name="email"/>
  <input id="submit" type="submit" />
  </form>

<section id="model3">
  <iframe id="video" src="https://www.youtube.com/embed/Q4VGQPk2Dl8" title="Tesla Unveils Model 3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>
  <section id="models">
  <iframe id="video" src="https://www.youtube.com/embed/Ujp3q_aryRA" title="Model S Plaid at Nürburgring" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>
  <section id="modely">
  <iframe id="video" src="https://www.youtube.com/embed/Tb_Wn6K0uVs" title="Model Y Unveil" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>
  <section id="modelx">
  <iframe id="video" src="https://www.youtube.com/embed/JFOOo3hEjw8" title="Essentials | Model X" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>

/* file: styles.css */
header {
  position: sticky;
  top: 0; 
  display: flex;
  justify-content: space-between;
}

svg {
  width: 300px;
}

ul {display: flex;
list-style: none;
}

a {
  color: black;
  text-decoration: none;
  margin-right: 10px;
  }

@media (wax-width: 768px) {
header {
flex-direction: column;  
}
}
form {
  text-align: center;
   }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hey, you have grasped the concept, it means every href should have a section’s id value. However cases are important, check how your section id’s are written, and they should be exactly the same when referencing to them on the href.

<a ... href="modelY">...</a>

<section ... id="modely">...</section>
1 Like
3

Thanks I understand now