Responsive Web Design Projects - Build a Product Landing Page Step 10

Step 10 says 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 ). since it’s asking to link do I link it to the href or do something to the footer at the end. Thanks

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/108.0.0.0 Safari/537.36 Edg/108.0.1462.54

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

If you click on:

<a href="#smth" class="nav-link">Smth</a>

It will lead you to HTML element with the id set to “smth”:

<section id="smth">

</section>

This is just an example.

1 Like

the 3 href is underlined but only the last one works as a link when i click it

Post your complete code here in order for us to see what is an issue.

what about when you click the link to the challenge on the first post it brings up the code for me not sure because i posted or if it will bring up the code for others

Follow this instruction:
“If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge . It will create a new topic with all code you have written and include a link to the challenge also.”

If i post again is it ok to have 2 things for the same question

Unfortunately, it is not. But you can post your code here by clicking on the </> icon in edit mode (a small pencil icon) and you will get the following:
three backticks ```

type or paste code here

and three backticks ```

Within these opening and closing backticks, you can copy and paste your code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="styles.css">

</head>
<body>
  <div id="page-wrapper">
  <header id="header">
    <div class="logo">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"  alt="original trombones logo"
    />
   </div>
<header id="fixed">
  <nav id="nav-bar">
          <ul>
            <li><a class="nav-link"
href="#features">features</a></li>
            <li><a class ="nav-link" href="#how-it-works">how It Works</a></li>
            <li><a class="nav-link" href="#pricing">pricing</a></li>
          </ul>
        </nav>
      </header>
<main>
   <div class="container"></div>
      <section id="features">
    <h2>To order fill out line below</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" placeholder="Enter your email address" type="email" name="email" required>
    <br><input id="submit" type="submit" value="GET STARTED" class="btn"/></br>
    </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>Product Description</h2>
    <p>Describe the product.</p>
    </div>
    </div>
    <div class="grid">
    <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div class="desc">
<h2>Shipping Info</h2>
    <p>Shipping info goes here.</p>
    </div>
</div>
          <div class="grid">
            <div class="icon">
              <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
            </div>
            <div class="desc">
    <h2>Quality Assurance</h2>
    <P>Whatever else needed goes here.</p>
    </div>
          </div>

          </section>
        <section id="how_it_works">
    <iframe height="240" id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen type="video/mp4" >
    </iframe>
    </section>

<section id="pricing">
          <div class="product" id="tenor">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ul>
              <li>brown.</li>
              <li>green.</li>
              <li>blue.</li>
              <li>red.</li>
            </ul>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="bass">
            <div class="level">Bass Trombone</div>
            <h2>$900</h2>
            <ul>
              <li>brown.</li>
              <li>green.</li>
              <li>blue.</li>
              <li>red.</li>
            </ul>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="valve">
            <div class="level">Valve Trombone</div>
            <h2>$1200</h2>
            <ul>
              <li>plays similar to a trumpet</li>
              <li>great to have one</li>
              <li>many colors</li>
              <li>fair price.</li>
            </ul>
            <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>
          <span>Copyright 2016, Original Trombones</span>
        </footer>
        </main>
      </div>
    </div>
    </body>
    </html>
  • first ‘header’ element doesn’t have the closing tag
  • #href has a value with dashes between words, whereas the corresponding section has an id with underscores between them:
<ul>
         <li><a class ="nav-link" href="#how-it-works">how It Works</a></li>
</ul>
    <section id="how_it_works">

after making both dashes it worked. I didn’t see that part of the code different thanks

1 Like