Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening: These are the error messages I keep getting…

  • Each .nav-link element should have an href attribute. But this I went back and corrected.

  • 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). For this, everytime I click the linked word it goes to that section.

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.

      <li class="nav-link"><a href="#features" class="nav-link">Features</li>
      <li class="nav-link"><a href="#tips" class="nav-link">Tips</a></li>
      <li class="nav-link"><a  href="#pricing" class="nav-link">Pricing</a></li>
      </ul>
  </section>
  </nav>
  </header>
  <section id="hero"> <h2>Build a custom knife</h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email" id="email" placeholder="Enter email" name="email" required>
  <input type="submit" id="submit" value="Get started">
  </form>
  </section>
<div class="container">
  <div id="features"><div class="icon">
    <div class="grid">
    <i class="fa-regular fa-screwdriver-wrench"></i> </div>
   </div>
   <div class="text"><h2>Premium Materials</h2>
   <p>Customize your knife with many blade and handle options, and much more. You can even further personalize your knife with engraving. </p>
   </div>
  <div id="tips">
    <div id="tips"><div class="icon">
    <div class="grid">
    <i class="fa-regular fa-screwdriver-wrench"></i> </div>
   </div>
   <div class="text"><h2>Shipping</h2>
   <p>Custom knives typically have a 6-8 week lead time before shipping this ensures that your product is uniquely yours.</p>
   </div>
  </div>
  <div id="pricing"><div id="pricing"><div class="icon">
    <div class="grid">
    <i class="fa-regular fa-truck-fast"></i> </div>
   </div>
   <div class="text"><h2>Quality Assurance</h2>
   <p>For every purchased you make, we will ensure there are no damages or faults. </p>
   </div></div>

   <iframe id="video" src="https://www.youtube-nocookie.com/embed/hPC1UFtsj50?rel=0&control=0&showinfo=0" height="300" width="500" title="Product video"></iframe>

<div class="pricing"></div>
<div class="product"></div>
<div class="level">119 Special Knife
  <ol>
    <li>Blade</li>
      <li>Handle</li>
      <li>Accessory</li>
      </ol>
      <button class="bnt">Select</button>
</div>

<div class="pricing"></div>
<div class="product"></div>
<div class="level">113 Ranger Skinner Knife
  <ol>
    <li>Blade</li>
      <li>Handle</li>
      <li>Accessory</li>
      </ol>
      <button class="bnt">Select</button>
</div>

<div class="pricing"></div>
<div class="product"></div>
<div class="level">916 Bowie Knife
  <ol>
    <li>Blade</li>
      <li>Handle</li>
      <li>Accessory</li>
      </ol>
      <button class="bnt">Select</button>
</div>

</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Only the link should have a class of nav-link. Remove it from the li element.

P.S. You are missing the closing </a> tag on this link.

You can’t have duplicate ids on the same page. I don’t think it will cause you to fail the tests, but you shouldn’t do this.

3

Thank you this helps