Problems with the tests - Build a Product Landing Page

HTML-CSS
1

I have a problem with the tests, this goal doesn’t pass and i don’t know why

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

the .nav-link in my project link to the correspondent seccion thats why i don’t understand why the test do not pass

<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>Trombones</title>
    <link rel="stylesheet" href="index.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="C:\Users\Usuario\Desktop\ignaco\projecto-3-freecodecamp\index.css">
    <!----------------------------------- botstrapp icons----------------------------------->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body style="background-color: c7c7c7;">
    <!------------------------------------------nav bar----------------------------------------->
    <header id="header">
        <nav id="nav-bar" class="navbar navbar-expand-md fixed-top">
            <img
                src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                alt="Logo companie"
                height="70%"
                width="30%"
                id="header-img">
            <div class='botones'>
                <a class='nav-link' href="#features">Features</a>                    
                <a class='nav-link' href="#video">How it works</a>
                <a class='nav-link' href="#pircing">pircing</a>
            </div>
        </nav>
    </header>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <h2>Handcrafted, home-made masterpieces</h2>
        <br>
        <input style="width: 50%" class="form-control" type="email" id="email" placeholder="Enter your email address" size="30" name="email">
        <br>
        <input class="btn btn-info" type="submit" id="submit" href><br>
    </form>
    <div id="features">
        <div>
            <i class="bi bi-fire"></i>
            <div>
                <h4>Premium Materials</h4>
                <p>Our trombones use the shiniest brass which is sourced locally. This will
                increase the longevity of your purchase.</p>
            </div>
        </div>
        <div>
            <i class="bi bi-fire"></i>
            <div>
                <h4>Fast Shipping</h4>
                <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>
            <i class="bi bi-fire"></i>
            <div>
                <h4>Quality Assurance</h4>
                <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>
    
    <br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/kGgUK2s-sqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"
        id="video">
    </iframe>
    <div id="pircing">
        <div>
            <h4>
            <b>TENOR TROMBONE</b>
            </h4>
            <h3>$600</h3>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum dolor.</p>
            <p>Lorem ipsum.</p>
            <button class="btn btn-primary" type="button">Select</button>
        </div>
        <div>
            <h4>
            <b>BASS TROMBONEE</b>
            </h4>
            <h3>$900</h3>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum dolor.</p>
            <p>Lorem ipsum.</p>
            <button class="btn btn-primary" type="button">Select</button>
        </div>
        <div>
            <h4>
            <b>VALVE TROMBONE</b>
            </h4>
            <h3>$1200</h3>
            <p>Plays similar to a Trumpet</p>
            <p>Great for Jazz Bands</p>
            <p>Lorem ipsum dolor.</p>
            <p>Lorem ipsum.</p>
            <button class="btn btn-primary" type="button">Select</button>
        </div>
    </div>
        <div class="footer">
            <div>
                <a class='nav-link' href="https://cdpn.io/freeCodeCamp/fullpage/RKRbwL#">Privacy</a>
                <a class='nav-link' href="https://cdpn.io/freeCodeCamp/fullpage/RKRbwL#">Terms</a>
                <a class='nav-link' href="https://cdpn.io/freeCodeCamp/fullpage/RKRbwL#">Contact</a>
            </div>
            <p>Copyright 2016, Original Trombones</p>
        </div>
</body>
</html>```
3

You have your classes in between the a and href. Try adding the class after the last quote in href so for example

a href=“link” class=className
4

the problem still, i try that solution and doesn’t work

5

It is because you added the nav-link class to the links in the footer and they do not link to sections on the page. Use a different class name for them.

Also, just as an aside. The stylesheet in the editor is named styles.css

1 Like
6

I think I see the issue I did see that the class can be initiated the way you had it originally in other examples, but I never seen it done that way before. So, thats why it kind of threw me off

1 Like
7

thats was the problem, i pass the proyect thanks!

8

yeah i see the code for very long time and i didn’t see the problem but now is fixed thanks!

1 Like
10

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