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
8

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

1 Like
10

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

1 Like
11

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