Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
its asking me:

Each .nav-link element should have an href attribute.

<body>
      <div class="page-wrapper">
        <header id="header">
          <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones Logo">
          <nav id="nav-bar">
            <ul>
              <li class="nav-link" href="#features">Features</li>
              <li class="nav-link" href="#how-it-works">How it Works</li>
              <li class="nav-link" href="#pricing">Pricing</li>
            </ul>
          </nav>
        </header>
</div>
        <body>
          <div>
            <section class="hero">
              <h1>Handcrafted, home-made masterpieces</h1>
              <form id="form" action="https://www.freecodecamp.com/email-submit">
                <input name="email" id="email" type="email" placeholder="Pleace enter your email. Thanks" required>
                <input id="submit" type="submit" value="Get Yours" class="btn">
              </form>
            </section>
            <div class="container">
              <section id="features">
                <div class="grid">
                  <div class="icon">
                    <i class="fa fa-3x fa-fire"></i> 
                  </div>
                  <div class="desc">
                    <h2>Premium Materials</h2>
                    <p>
                Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
                    </p>
                  </div>
                </div>
                  <div class="grid">
                    <div class="icon">
                      <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                      <h2>Fast Shipping</h2>
                      <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 class="grid">
                  <div class="icon">
                    <i class="fa fa-3x fa-battery-full"></i>
                  </div>
                  <div class="desc">
                    <h2>Quality Asurance</h2>
                      <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>
              </section>
              <section id="how-it-works">
                <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" Frameborder="0" allowfullscreen>
                </iframe>
              </section>
              <section id="pricing">
                <div class="product" id="tenor">
                  <div class="level">Tenor Trombone</div>
                  <ol>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                  </ol>
                  <h2>$600<h2>
                  <button class="btn">Select</button>
                </div>
                <div class="product" id="basss">
                  <div class="level">Bass Trombone</div>
                  <ol>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                  </ol>
                  <h2>$900<h2>
                  <button class="btn">Select</button>
                </div>
                <div class="product" id="valve">
                  <div class="level">Valve Trombone</div>
                  <ol>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                    <li>lorem impus</li>
                  </ol>
                  <h2>$1200<h2>
                  <button class="btn">Select</button>
                </div>
              </section>
              <footer>
              <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
              <footer>
            </div>
          </div>
        </body>
      </div>
    </body>
</html>

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like
2

Can you explain further, I can see that your nav-link classes all have the href attribute

2 Likes
3

On my screen, at the top of your post,
it says your last post was 8 months ago, welcome back uhrich1130!
The href attribute is meant to be used on the anchor element which can look like this:
<a href="#features" class="nav-link">Features</a>

4

I thought similarly when I first saw the code.
I remembered that I have seen posts in this forum that had a code error that I overlooked but that actually had an obvious bug.
I was determined to spot the problem right away this time.

5

yeah, idont know why but its the last part to pass the project, it says i have to have the href part in all my nav-links and i do have them the problem is that it isn’t like readyng it
i don’t know i’ve tryed changing the code but its says i dont have them

6

Hello!

remove the <ul> and replace the <li>s with <a> tags and the tests will pass!

1 Like
7

Hello, nice to see you back in the community.

Another suggestion is to

  1. close the opening li element tag immediately after it.
  2. add opening and closing anchor tags to each nav-link.

It would look something like the following example.

<li><a all of the current class information>Text</a><li>

Hope this helps you!

Keep up the good progress!

1 Like
8

Thank you so much, that was what was wrong, apriciate it mate

1 Like
9

I am happy to be able to help you continue on your coding journey.

Keep up the good progress!

1 Like
10

thanks mate, the same to you and have a good day

1 Like