Product Landing Page - Build a Product Landing Page

<header id="header">
    <div class="logo">

    </div>
    <nav id="nav-bar">
      <ul>
        <li>
          <a href="#featured" class="nav-link">Features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">How It Works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">Pricing</a>
        </li>
      </ul>
    </nav>
  </header>

<div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
   
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="featured">
      <div class="features">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="features">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="features">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

Hi!
Please edit your post to include your code, without seeing it we can’t check to see what isn’t working.

i have done dat ma’am

what issue did you need help with? (please write a description of the issue and provide a link to the challenge)

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

 <nav id="nav-bar">
      <ul>
        <li>
          <a href="#featured" class="nav-link">Features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">How It Works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">Pricing</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="featured">
      <div class="features">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="features">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="features">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div id="footer-nav">
      <ul>
        <li><a href="">Privacy</a></li>
        <li><a href="" class="nav-link">Terms</a></li>
        <li><a href="" class="nav-link">contact</a></li>
      </ul>
    </div>
    <div class="footer-copyright">
      <p>Copyright 2016, Original Trombones</p>
    </div>
  </footer>
</body>
</html>

i am finding it difficult in the task that said, 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).

 <nav id="nav-bar">
      <ul>
        <li>
          <a href="#featured" class="nav-link">Features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">How It Works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">Pricing</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="featured">
      <div class="features">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="features">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="features">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div id="footer-nav">
      <ul>
        <li><a href="">Privacy</a></li>
        <li><a href="" class="nav-link">Terms</a></li>
        <li><a href="" class="nav-link">contact</a></li>
      </ul>
    </div>
    <div class="footer-copyright">
      <p>Copyright 2016, Original Trombones</p>
    </div>
  </footer>
</body>`Preformatted text`

make sure you match the exact characters and case for the ids and the name of the section.
so for eg here, it should be fixed to #Features not #featured

i did same thing but is still not working ma

have you double checked every id?
if yes, post your new code for review.

yes i have. okay ma let me re-post my code;

type o<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Produt Landing Page</title>
  </head>
<body>
  <header id="header">
    <div class="logo">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
    </div>
    <nav id="nav-bar">
      <ul>
        <li>
          <a href="#features" class="nav-link">Features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">How It Works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">Pricing</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="features">
      <div class="features">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="features">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="features">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div id="footer-nav">
      <ul>
        <li><a href="">Privacy</a></li>
        <li><a href="" class="nav-link">Terms</a></li>
        <li><a href="" class="nav-link">contact</a></li>
      </ul>
    </div>
    <div class="footer-copyright">
      <p>Copyright 2016, Original Trombones</p>
    </div>
  </footer>
</body>
</html>r paste code here

you haven’t matched the exact case yet.
Please re-read the post.

Also make sure you are not duplicating the ids anywhere.
The ids should be an exact match down to the capital letters or lower case letters.

i have made the correct but have not been pass ma. this is the correction

t<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Produt Landing Page</title>
  </head>
<body>
  <header id="header">
    <div class="logo">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
    </div>
    <nav id="nav-bar">
      <ul>
        <li>
          <a href="#features" class="nav-link">features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">how it works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">pricing</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="features">
      <div class="feature">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="feature">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="feature">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div id="footer-nav">
      <ul>
        <li><a href="">Privacy</a></li>
        <li><a href="" class="nav-link">Terms</a></li>
        <li><a href="" class="nav-link">contact</a></li>
      </ul>
    </div>
    <div class="footer-copyright">
      <p>Copyright 2016, Original Trombones</p>
    </div>
  </footer>
</body>
</html>ype or paste code here

this is not part of your code correct?

remove the class nav-link from these lines as it is confusing the test.
(all nav-links should link to something according to the test and these 2 link nowhere)

is not is a typo when i was trying to post my code let me resend it

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Produt Landing Page</title>
  </head>
<body>
  <header id="header">
    <div class="logo">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
    </div>
    <nav id="nav-bar">
      <ul>
        <li>
          <a href="#features" class="nav-link">features</a>
        </li>
        <li>
          <a href="#how-it-works" class="nav-link">how it works</a>
        </li>
        <li>
          <a href="#pricing" class="nav-link">pricing</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container subscribe">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input id="email" name="email" type="email" placeholder="Enter Your Email Address">
      <input id="submit" type="submit" value="get started" class="btn">
    </form>
  </div>


  <section >
    <div id="features">
      <div class="feature">
        <div class="icon">
          <i class="fa fa-firefox"></i>
        </div>
        <div>
        <h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
      
      <div class="feature">
        <div class="icon">
          <i class="fa fa-truck"></i>
        </div>
        <div>
        <h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>
        
    
      <div class="feature">
        <div class="icon">
          <i class="fa fa-battery"></i>
        </div>
        <div>
        <h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
    </div> 
  </section>

  <section>
    <div class="video-player" id="how-it-works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc" controls >
      </video>
    </div>
  </section>

  <section >
    <div id="pricing">
      <div class="pricing-box">
        <h4>TENOR TROMBONE</h4>
        <div class="box-body">
        <p class="price">$600</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button>
          select
          </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>BASS TROMBONE</h4>
        <div class="box-body">
        <p class="price">$900</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
         <button> select
     </button>
        </div>
      </div>

      <div class="pricing-box">
        <h4>VALVE TROMBONE</h4>
        <div class="box-body">
        <p class="price">$1200</p>
        <p>Plays similar to a Trumpet</p>
        <p>Great for Jazz Bands</p>
        <p>Lorem ipsum dolor.</p>
        <p>Lorem ipsum.</p>
        <button>
          select
          </button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div id="footer-nav">
      <ul>
        <li><a href="">Privacy</a></li>
        <li><a href="" class="nav-link">Terms</a></li>
        <li><a href="" class="nav-link">contact</a></li>
      </ul>
    </div>
    <div class="footer-copyright">
      <p>Copyright 2016, Original Trombones</p>
    </div>
  </footer>
</body>
</html>

thank you so much ma it has worked. i really appreciate you ma

1 Like