Product Landing Page - Build a Product Landing Page

You still have 2 Ids with the same name;
Only your section should have that Id and then you create a link to each section in your document in your nav-bar (don’t forget the footer…)
Your nav-links shouldn’t have same Id as your section since you just call those sections Id (=#) with your href. I hope it makes sense

1 Like

Hello - they don’t lead anywhere. This is what the issue is. I do not know where they should lead, as this is not given in the instruction? When I click on the links in the model page, it just jumps to the top of the page, so am I to assume that I need to ‘point’ those links to the top of the page? With the header navlinks, you can see where they need to point to, but not with the footer links?

Here are the instructions
image

Your links are fine except you gave your ‘li’ elements the same Ids your sections already have.

Just get rid of the Id in your ‘li’ elements

it makes sense, thank you. I thought I removed them but maybe didn’t save. I will try and try [Gray.n.Grey] suggestion too and let you know…

I think I do need them as they appear as clickable links in the model page which means I need hrefs…

I have tried pointing to #header and I am still getting the two errors - updated code attached…

<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">


</head>
<body>
  <header id="header">
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" width="250" id="header-img">
    <nav id="nav-bar">
      <ul>
<li class="nav-link"><a href="#Features">Features</a></li>
<li class="nav-link"><a href="#How_It_Works">How It Works</a></li>
<li class="nav-link"><a href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
  
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
 <form id="form" action="https://www.freecodecamp.com/email-submit">
<p>Handcrafted, home-made masterpieces</p>
 
    <input type="email" id="email" name="email" placeholder="Enter your email address" />
  <input type="submit" id="submit" value="Get Started">
  </form>

<section class="main-section" id="Features">
<div><img src="">
<h1>Premium Materials</h1>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></div>
<div><img src="">
<h1>Fast Shipping</h1>
<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><img src="">
<h1>
Quality Assurance</h1>
<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>
</section>
<section class="main-section" id="How_It_Works">
<iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc"></iframe>
</section>
<section class="main-section" id="Pricing">
  <div><h3>TENOR TROMBONE</h3>
  <p id="price">$600</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
<p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum</p>
  <input type="submit" value="Select"></div>
   <div class="products_column"><h3>BASS TROMBONE</h3>
  <p id="price">$900</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
<p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum</p>
  <input type="submit" value="Select"></div>
   <div class="products_column"><h3>VALVE TROMBONE</h3>
  <p id="price">$1200</p>
  <p>Plays similar to a Trumpet</p>
  <p>Great for Jazz Bands</p>
<p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum</p>
  <input type="submit" value="Select"></div>
  </section>
  <footer id="footer">
            <ul>
<li class="nav-link"><a href="#header">Privacy</a></li>
<li class="nav-link"><a href="#header">Terms</a></li>
<li class="nav-link"><a href="#header">Contact</a></li>
</ul>
<p id="Footer_text">Copyright 2016, Original Trombones</p>
</footer>
</body>
</html>```

Your links to your sections are correct

When you click on Features it jumps to your Features section in the page, same for other sections, that’s what you want

@Gray.n.Grey
I am maybe not helping well, we are all here to share maybe you can explain better than I do :smiley:

1 Like

thank you. I think the main problem is with the links in the footer if you have any ideas about that?

1 Like

@coderostro

Please review above, about that opening ‘section’ tag missing in footer and your form element :wink:

Also I am not sure how the system is checking, but remember the instructions are:
your nav-links should bring to each section in your page.

So if you added a section for your footer (which by the way you don’t need, I think footer is enough) then you may need a new nav-link to that section.

thank you, but please review my previous posts where I asked specifically about the href elements as that is what I have requested help with :sweat_smile:

:thinking:
We solved that… the double Ids was your problem with those links

A mistake is a mistake, sometimes the system isn’t accurate.

As long as you don’t solve all other syntax problems like form (method is missing) or you’re have a closing ‘section’ tag but no opening ‘section’ tag corresponding, the system will give you errors

You will win this I know it!

Ha, don’t be silly, I’m sure you deserve a break!

I haven’t fixed it yet, just taking a look now. I would imagine it has to be to do with those footers links…

I solved it (I should not have had the nav-links wrapped in list items)., but many thanks for your help.

Although, I cannot find an appropriate source for the icons that need to be put on the page. Not sure if there is a resource for this for the projects? I cannot copy them directly from the page…
[/quote]

1 Like

thank you

I mean the logos to the left of ‘Premium Materials’, ‘Fast Shipping’ and ‘Quality Assurance’ though?

thank you very much for your help

1 Like

thanks very much. I am new to ‘inspecting codes’ for things (!), but will try to figure that one out! thanks again for all your help

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