Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
this is what is telling after several attempt please help me out

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 code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Product Landing Page

Handcrafted, home-made masterpieces

  • Premium materials
    Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.

  • Fast Shipping
    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.

  • Quality Assurance
    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.

TENOR TROMBONE

$600

Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.

BASS TROMBONE

$900

Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.

VALVE TROMBONE

$1200

Plays similar to a Trumpet
Great for Jazz Bands
Lorem ipsum dolor.
Lorem ipsum.

Privacy Terms Contact
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You have to share your code if you need help because that’s the only way someone can help you!!!

i did but is there another way i can do that, like how to share my code, i just did another one again now

1 Like

I really don’t understand you because i can’t see any code here…
You can share your code using codepen because you only sent a link to your challenge

Product Landing Page

Handcrafted, home-made masterpieces

  • Premium materials
    Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.

  • Fast Shipping
    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.

  • Quality Assurance
    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.

TENOR TROMBONE

$600

Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.

BASS TROMBONE

$900

Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.

VALVE TROMBONE

$1200

Plays similar to a Trumpet
Great for Jazz Bands
Lorem ipsum dolor.
Lorem ipsum.

Privacy Terms Contact

Tell us what’s happening:
this is what is keep telling me, please i need help!
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 code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="Landing Page Page" content="Landing Page"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css"/>
    <title>Product Landing Page</title>
    </head>
    <body>
      <header id="header">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
        <nav id="nav-bar">
    <div>      
  <ul>
    <li><a class="nav-link" href="#Features" accesskey="a">Features</a></li>
    <li><a class="nav-link" href="#How-It-Works" accesskey="b">How It Works</a></li>
    <li><a class="nav-link" href="#Pricing" accesskey="c">Pricing</a></li>
  </ul>
  </div>
  </nav>
</header>
<main>
  <div id="contact-block">
  <h1 class="second-heading">Handcrafted, home-made masterpieces
</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit"><input id="email" type="email" name="email" placeholder="Enter your email address">
<div>
<input id="submit" type="submit" value="GET STARTED" cursor="pointer" required/>
</div>
</form>
</div>
<a name="Features"  id="Features"></a> 
  <div id="info-block">
    <ul id="info-list">
<img id="header-img1" src="https://img.icons8.com/external-those-icons-flat-those-icons/2x/external-Flame-nature-and-ecology-those-icons-flat-those-icons.png"/>
<li id="info-li"><p><strong>Premium materials</strong></br>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></li>
<img id="header-img2" src="https://img.icons8.com/color/2x/truck.png"/>
<li id="info-li"><p><strong>Fast Shipping</strong></br>
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></li>
<img id="header-img3" src="https://img.icons8.com/ios-glyphs/72/full-battery.png"/>
<li id="info-li"><p><strong>Quality Assurance</strong></br>
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></li>
</ul>
</div>
<a name="How-It-Works" id="How It Works"></a>
  <div id="video-id">
      <video id="video">
<source src="https://www.youtube.com/embed/y8Yv4pnO7qc">
        </video>
    </div>
  <a name="Pricing" id="Pricing"></a>
    <div id = "columns-block">
        <div id="col">
            <div id="header-col">TENOR TROMBONE</div>
            <div id="h2-col"><p>$600</p></div>
            <div id="col-text"><p>Lorem ipsum. </br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</br></p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
  <div id="col">
            <div id="header-col">BASS TROMBONE</div>
            <div id="h2-col"><p>$900</p></div>
            <div id="col-text"> <p>Lorem ipsum.</br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
        <div id="col">
            <div id="header-col">VALVE TROMBONE</div>
            <div id="h2-col"><p>$1200</p></div>
            <div id="col-text"><p>Plays similar to a Trumpet</br>
                Great for Jazz Bands</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
<div id="col-button">
<form id="button-form">
<input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
    </div>
</div>
  <footer id="footer">
  <nav id="nav-bar">
    <a class ="nav-link" href="#Features" >Privacy</a>
<a  class ="nav-link" href="#How-It-Works">Terms</a>
<a class ="nav-link" href="#Pricing">Contact</a>
    </nav>
  </footer>
  </main>
</body>
</html>

Replace these two sentences with your copied code.
Please leave the

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="Landing Page Page" content="Landing Page"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css"/>
    <title>Product Landing Page</title>
    </head>
    <body>
      <header id="header">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
        <nav id="nav-bar">
    <div>      
  <ul>
    <li><a class="nav-link" href="#Features" accesskey="a">Features</a></li>
    <li><a class="nav-link" href="#How-It-Works" accesskey="b">How It Works</a></li>
    <li><a class="nav-link" href="#Pricing" accesskey="c">Pricing</a></li>
  </ul>
  </div>
  </nav>
</header>
<main>
  <div id="contact-block">
  <h1 class="second-heading">Handcrafted, home-made masterpieces
</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit"><input id="email" type="email" name="email" placeholder="Enter your email address">
<div>
<input id="submit" type="submit" value="GET STARTED" cursor="pointer" required/>
</div>
</form>
</div>
<a name="Features"  id="Features"></a> 
  <div id="info-block">
    <ul id="info-list">
<img id="header-img1" src="https://img.icons8.com/external-those-icons-flat-those-icons/2x/external-Flame-nature-and-ecology-those-icons-flat-those-icons.png"/>
<li id="info-li"><p><strong>Premium materials</strong></br>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></li>
<img id="header-img2" src="https://img.icons8.com/color/2x/truck.png"/>
<li id="info-li"><p><strong>Fast Shipping</strong></br>
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></li>
<img id="header-img3" src="https://img.icons8.com/ios-glyphs/72/full-battery.png"/>
<li id="info-li"><p><strong>Quality Assurance</strong></br>
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></li>
</ul>
</div>
<a name="How-It-Works" id="How It Works"></a>
  <div id="video-id">
      <video id="video">
<source src="https://www.youtube.com/embed/y8Yv4pnO7qc">
        </video>
    </div>
  <a name="Pricing" id="Pricing"></a>
    <div id = "columns-block">
        <div id="col">
            <div id="header-col">TENOR TROMBONE</div>
            <div id="h2-col"><p>$600</p></div>
            <div id="col-text"><p>Lorem ipsum. </br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</br></p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
  <div id="col">
            <div id="header-col">BASS TROMBONE</div>
            <div id="h2-col"><p>$900</p></div>
            <div id="col-text"> <p>Lorem ipsum.</br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
        <div id="col">
            <div id="header-col">VALVE TROMBONE</div>
            <div id="h2-col"><p>$1200</p></div>
            <div id="col-text"><p>Plays similar to a Trumpet</br>
                Great for Jazz Bands</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
<div id="col-button">
<form id="button-form">
<input id = "button" type="button" value="SELECT" cursor="pointer">
                    </form>
                </div>
        </div>
    </div>
</div>
  <footer id="footer">
  <nav id="nav-bar">
    <a class ="nav-link" href="#Features" >Privacy</a>
<a  class ="nav-link" href="#How-It-Works">Terms</a>
<a class ="nav-link" href="#Pricing">Contact</a>
    </nav>
  </footer>
  </main>
</body>
</html>

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

i have sent again pls, check below here

There are so many bugs in your code… why did you add the accesskey to your a element ??

I don’t know why you added accesskey to your anchor tag that could make your code mal-function

okay, let me remove it then, please tell me any other error i have made so far. thank you

Are you still there please

1 Like

You can have it done like this…

        <nav id="nav-bar">
           <ul>
             <li><a class="nav-link" href="#features">Features</a>

Here’s your code below

<a name="How-It-Works" id="How It Works"></a>

Your code looks weird and i don’t even think that exists having an anchor tag starting with “name”… Better still, just add a section id to your anchor tag like this below

<section id="features">
           <div class="grid">
           <div class="features">

The code above tells us that when a user clicks on the on the nav-link which has an #features it navigates to this particular section which has an id=“features”

Lastly case sensitivity matters a lot if use upper/lower case in your anchor tag which has the href=“features”, remember to use exactly the same in your id of section

1 Like

Study this well and do it just like i have it above and you’ll definately pass the challenge

1 Like

thank you it work but i still have to add a section id within my anchor tag and also change my id in my footer element to it corresponding name . Thanks for your time. i really appreciate. i just passed the test.

I’m glad you passed the test with my example and we are here for each other…Coding requires ability to think in-depth and solve a problem…Happy coding olayinka, if you got whatsapp we can connect i sent you a private message…

hello.
please tell me what you did to pass this:

Each .nav-link element should have an href attribute.

thank you

it means each of your “a” attribute must has an href link so that if you click on the link you will be directed to the page view.

kindly let me know if this helps

li><a class="nav-link" href="#features">Features</a>

something like example above … the #features is the link they are talking about… it might not be what you want to do, but just an example