Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi everyone,

I was wondering if someone could point me in the right direction with the two run errors I have left on this project:

  • Failed:Each .nav-link element should have an href attribute.

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

I think the nav_links and sections are cross-referenced properly, but I was a bit unsure about where to link the ‘Privacy’, ‘Terms’ and ‘Contact’ in the footer to, since the page just jumps back to the top of the page when any of them are clicked. Being unsure about this, I just left the href as #footer for the time being…

Grateful for any input…

Also, I am aware that there are other things I need to look at (e.g. have 6
s for spacing is probably not ideal.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<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" id="features_link"><a href="#Features">Features</a></li>
<li class="nav-link"  id="#How_It_Works_link"><a href="#How_It_Works">How It Works</a></li>
<li class="nav-link"  id="Pricing_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/watch?v=y8Yv4pnO7qc&feature=youtu.be"></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>
    <nav id="footer_nav">
            <ul>
<li class="nav-link" id="Privacy"><a href="#footer">Privacy</a></li>
<li class="nav-link" id="Terms"><a href="#footer">Terms</a></li>
<li class="nav-link" id="Contact"><a href="#footer">Contact</a></li>
</ul>
<p id="Footer_text">Copyright 2016, Original Trombones</p>


    </nav>
  </footer>






    



</section>
</body>
</html>

/* file: styles.css */
*{box-sizing: border-box;}

header{position: fixed;}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
#nav-bar ul {
  display:flex;
  justify-content: flex-end;
list-style-type: none;

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

you have a tipo in the nav-link id

1 Like
3

you mean the ‘_link’ part?

1 Like
4

you have to conect the a href with the section id .
your li dos not need a id

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

 <section class="main-section" id="Features">
    <!-- Content for Features section -->
  </section>`

add ather sections too…

1 Like
5

I have three nav_links with the hrefs: href=“#Features”, “#How_It_Works” and “#Pricing”.

And I have three sections with IDs “#Features”, “How_It_Works” and “Pricing”.

That’s correct, no?

1 Like
6

I wonder if the problem is the navlinks in the footer…

1 Like
7

The href attribute for the footer links (Privacy , Terms , Contact ) should point to the respective sections, not #footer . For example, href="#Privacy" should link to the Privacy section’s ID.
The src attribute in the YouTube iFrame needs to point to the embed URL (https://www.youtube.com/embed/y8Yv4pnO7qc ) rather than the regular watch URL (https://www.youtube.com/watch?v=y8Yv4pnO7qc&feature=youtu.be )

1 Like
8

thank you. It is not clear to me what the privacy, terms or contact sections’ IDs should be though because when I click on those on the ‘model’ page, I am redirected to the top of the page, so where should I redirect them to?

1 Like
9

link your href to your section

<li class="nav-link"><a href="#privacy_section">Privacy</a></li>


<section id="privacy_section">
  <!-- Your Privacy content here -->
</section>
1 Like
10

So do I create ‘made up’ privacy, terms and contact content for those sections?

1 Like
11

you are linking everiting with a #footer , my question is where thet link go?
you dont have a id of footer no were…
why do you need a nav in your footer?

1 Like
12

29 Footer Examples for Websites

1 Like
13

Hi everyone,

I was wondering if someone could point me in the right direction with the two run errors I have left on this project:

  • Failed:Each .nav-link element should have an href attribute.
  • 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).

I think the nav_links and sections are cross-referenced properly, but I was a bit unsure about where to link the ‘Privacy’, ‘Terms’ and ‘Contact’ in the footer to, since the page just jumps back to the top of the page when any of them are clicked. Being unsure about this, I just set the href as #header for the time being…

Grateful for any input…

Also, I am aware that there are other things I need to look at (e.g. have 6
s for spacing is probably not ideal.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<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" id="Features"><a href="#Features">Features</a></li>
<li class="nav-link"  id="How_It_Works"><a href="#How_It_Works">How It Works</a></li>
<li class="nav-link"  id="Pricing"><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>






    



</section>
</body>
</html>

/* file: styles.css */
*{box-sizing: border-box;}

header{position: fixed;}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
#nav-bar ul {
  display:flex;
  justify-content: flex-end;
list-style-type: none;

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

14

@coderostro
Hi coderostro,
An Id must be unique, or here you have same Ids names in your section AND your

  • elements.
    For the footers links, I just put “#” as there is no page to reach but you can let header.
    I am only guessing as I am new to all this and I also am at this stage.
    I hope it helps and that you make it work, good continuation.

    • 1 Like
    15

    I had gone back and added “_link” to the IDs in the navbar but must have deleted again. In any case, they are unique now and I put “#” as you suggested, but it still does not work…

    16

    Could you repost your updated code please, that we can see. Thank you

    17

    I think the problem is with the links in the footer, I just don’t know how to fix though

    18 
    <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" id="Features"><a href="#Features">Features</a></li>
<li class="nav-link"  id="How_It_Works"><a href="#How_It_Works">How It Works</a></li>
<li class="nav-link"  id="Pricing"><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="#">Privacy</a></li>
<li class="nav-link"><a href="#">Terms</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
</ul>
<p id="Footer_text">Copyright 2016, Original Trombones</p>
</footer>
</body>
</html>```
    19

    I had not spotted but also your form action isn’t right.

    I am not sure you should leave your ‘src’ empty.

    you have a lonely closing section tag at the end, you probably wanted deleted the opening tag before your footer

    Also I just spotted your form isn’t right, it’s missing an important attribute.

    21

    Hi there. Thank you, but I am just concerned with the navlinks problem right now (I mentioned this in my original post). I want to fix that first.