Hello! I need some help on Build a Product Landing Page Project

In this section [ “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 )” ], I try different ways but it does not work.

Pretty hard to tell with just a screenshot, but does those elements you are linking exists on the page?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./landpage.css" rel ="stylesheet">
</head>
<body>
    <a name = "start">
    <header id="header">
        </a> <img id ="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
          <nav id="nav-bar">
        <a href="#Features" class="nav-link">Features</a>
        <a href="#How-It-Works" class="nav-link">How It Works</a>
        <a href="#Pricing" class="nav-link">Pricing</a>
      </nav>
    </header>
</a>
    <main>
        
        <div id = "contact-block">
            <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
            <label for="email" id="email-label"> Handcrafted, home-made masterpieces</br></label>
                <input type="email" id="email" name="email" placeholder="Enter your email"></input>
            <div id="button-container">
              <input type="submit" id="submit" value="GET STARTED"></input>
            </div>
          </form>
        </div>
    


        <a name = "Features">
    <div id = "info-block">
        <ul id = "info-list">
            <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>
            <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></li>
            <li id ="info-li"></li><strong>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> </li>
            </ul>
    </div>
    </a>
    <a name = "How it works">
    <div id="video-id">
        <video id="video">
            <source src="https://www.youtube.com/embed/y8Yv4pnO7qc" >
        </video>
    </div>
</a>
 <a name = "Pricing">
    <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">
                    </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">
                    </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">
                    </form>
                </div>

        </div>

    </div>

    <footer id="footer">
        <a href="#privacy">Privacy</a>
        <a href="#terms">Terms</a>
        <a href="#contact">Contact</a>
    </footer>
</main>

</body>
</html>


Yes, they are existing, as you see on this screenshot above.

What exactly is that?
The HTML specs define a name attribute, but it’s mostly used for JS and is not valid on all elements, for instance the anchor tag is not one of them.

I think the test is failing because your link don’t point to anything in the page… there’s no valid Features element in the page.

Hope this helps :sparkles:

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