Product Landing Page - Build a Product Landing Page

Please describe the situation to us.
Please help me. I’m stuck with my code. This is what it said I should do but I am fining it hard to solve the problem
Failed: 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)
Your #nav-bar should always be at the top of the viewport
Failed:Your Product Landing Page should use CSS Flexbox at least once

Your code so far

<!-- file: index.html -->
<!DOCTYPE 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></title>
  <head>
  <body>
    <header id="header">
      <img src="" id="header-img">
      <nav id="nav-bar">
        <a href="nav-bar" class="nav-link" id="#section1"></a>
        <a href="nav-bar" class="nav-link" id="#section2"></a>
        <a href="nav-bar" class="nav-link" id="#section3"></a>
     </header>
     <main>  
      <section id="section1"></section>
      <section id="section2"></section> 
      <section id="section3"></section> 
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input type="email" name="email" placeholder="email" id="email">
          <a href="https://www.freecodecamp.com/email-submit"><input type="submit" id="submit"></a>
          <iframe width="420" height="315" src="" id="video" control></iframe>
        </form>
       </main> 
      </nav>
  </body>
</html>
/* file: styles.css */
@media only screen and (max-width: 550px){
  
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

So below are the three things you seem to be failing:

  • 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).

  • Failed: Your #nav-bar should always be at the top of the viewport.

  • Your Product Landing Page should use CSS Flexbox at least once.

And it seems the reason is you didn’t do any of them. You need to use Flex at least once in the design of your page, which you didn’t do. You also need to lock your nav bar to the top of the screen which you didn’t write any code to do, and also your nav-bar doesn’t even show up because it’s blank, you didn’t write anything in it. The nav-link requirement you almost got, but the href for those all just say nav-bar instead of linking to the different sections.

If you’re unsure how to add those things above you may want to go review the coursework again, because you missed something in the classes.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.