Product Landing Page - Build a Product Landing Page

I am failing the nav-link part of the test. I have checked the id’s on each section but I cannot see what I am missing. I have also checked the forum and tried to match mine to other solutions but it is still not working.

I am sure it is something simple but I am stumped. Any help is greatly appreciated!

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" />
    <title>Yoga for Beginners</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://www.relajemos.com/wp-content/uploads/2017/11/yoga-postura.jpg"></img>
      <nav id="nav-bar">
        <ul>
            <a class="nav-link" href="features">Features</a>
  
            <a class="nav-link" href="#how_it_works">How It Works</a>
          
            <a class="nav-link" href="#pricing">Pricing</a>
       
</ul> 
      </nav>
    </header>

    <section id="features">
      <h1>Features</h1>
    <iframe id="video" src="https://www.youtube.com/watch?v=v7AYKMP6rOE" width="560" height="315"></iframe>
    </section>

    <section id="how_it_works">
      <div class="box-container">
        <h1>How It Works</h1>
      <p>Sign up for the mailing list to start your yoga journey.</p>
      </div>
      </section>

       <section id="pricing">
        <div class="pricing-container">
          <h2>Pricing</h2>
          <p>Free Trial for the first 30 days. Then $20 per month thereafter.
            </p>
            </div
          </section>

    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" placeholder="Enter Your Email Here" type="email" name="email"></input>
      <input id="submit" type="submit" value="Get Started"></input>
</form>




    

     
    
      
    </body>
    </html>
/* file: styles.css */
#nav-bar {
  position: fixed;
  top: 0px;
  right: 0px;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightblue;
  }
}

img {
 max-width: 75%;
 max-height: 75%;
 display: inline-block;
}

form {
  display: inline-block;

}

.video{
    width:50vw;
    height:auto;
}

head-title {
  font-size: 30px;
}

nav-bar {
  position: fixed;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I fixed the div on the pricing with no luck still…noticed it after I sent this.

Completely changed my nav-links and got it all to work. The video doesn’t play but I passed the project.

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