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>
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 