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