Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

So, the thing FCC says i’m doing wrong is that "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).

my entire index.html code looks like this:

Viris 
  <nav id="nav-bar">
    <div class="logo-container">
      <img src="https://previews.123rf.com/images/biseeise/biseeise2312/biseeise231213590/220914027-elegant-tiger-vector-refined-monochrome-renderingdynamic-tiger-art-energetic-monochrome-composition.jpg"
      alt="logo"
      id="header-img"

      />
      <span class="the-product">Viris</span>
       </div>
      <ul class="nav-links">

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

        <li><a href="#About_Us" class="nav-link">About Us</a></li>

        <li><a href="#Contact_Us" class="nav-link">Contact Us</a></li>
      </ul>
  </nav>
</header>

<section id="email-section">
  <h2 id="h2_1">Cars</h2>
  <form action="https://www.freecodecamp.com/email-submit" id="form">

  <input type="email" required placeholder="Please Enter Your Email" name="email" id="email">
  </input>

  <input type="submit" id="submit" value="GET STARTED"></input>
  </form>
</section>

<section id="features">
  <div class="feature">
    <i class="ri-bard-line ri-4x icon"></i>
    <div>
      <h2>Quality</h2>
      <p>
        The quality of our cars is one of the best throughout Romania
      </p>
      </div>
  <div class="feature2">
    <i class="ri-hand-coin-line ri-4x icon"></i>
    <div>
      <h2>Price</h2>
      <p>
        Our prices are the best because we offer you great discounts
      </p>
  </div>
  <div class="feature3">
    <i class="ri-time-line ri-4x icon"></i>
    <h2>History</h2>
    <p>
      You won't have surpises because we guarantee the car's history
    </p>
  </div>
  </div>
</section>

<iframe 
id="video"
 height="400" 
 src="https://www.youtube.com/embed/h-8B0bdgjRQ?si=822DM07oGjwvfUB1" title="YouTube video player" 
 frameborder="0" 
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 referrerpolicy="strict-origin-when-cross-origin" 
 allowfullscreen>
</iframe>

</section>
<section id="for_sale">

  <h2 id="h2_2">Sales</h2>
  <div class="product-cards">


    

    <div class="card">

      <div class="product-image product3">
      </div>

      <div class="inner-card">

        <div class="author">  
          Mercedes
        </div>

        <h1 class="header">Quality</h1>
        <p class="content">
          Mercedes is reputed for producing cars that provide exceptional performance and longevity. Its focus on quality manufacturing, precision engineering, and rigorous testing has helped it become a household name in the automotive industry.
        </p>
        <div class="flex">
          <p class="main-price">
            £93,955
          </p>
          <p class="old-price">
            £247,245
          </p>
        </div>
        <button class="add">
          <p style="margin-left: 5px">Add To Cart</p>
        </button>

      </div>


    </div>


    <div class="card">

      <div class="product-image product2">
      </div>

      <div class="inner-card">

        <div class="author">  
          BMW
        </div>

        <h1 class="header">Speed & Comfort</h1>
        <p class="content">
          The BMW Group is the world's leading provider of premium cars and motorcycles and the home of the BMW, MINI, Rolls-Royce and BMW Motorrad brands. Our vehicles and products are tailored to the needs of our customers and constantly enhanced – with a clear focus on sustainability and the conservation of resources.
        </p>
        <div class="flex">
          <p class="main-price">
            £70,685
          </p>
          <p class="old-price">
            £114,890
          </p>
        </div>
        <button class="add">
          <p style="margin-left: 5px">Add To Cart</p>
        </button>

      </div>


    </div>

      <div class="product-image product1">
      </div>

      <div class="inner-card">

        <div class="author">  
          Audi
        </div>

        <h1 class="header">The Ambition</h1>
        <p class="content">
          The Audi R8 is a mid-engine, 2-seater sports car, which uses Audi's trademark quattro permanent all-wheel drive system. It was introduced by the German car manufacturer Audi AG in 2006. Production ended in the first quarter of 2024.

The car is exclusively designed, developed, and manufactured by Audi AG’s private subsidiary company manufacturing high performance automotive parts, Audi Sport GmbH (formerly quattro GmbH, and is based on the Lamborghini Gallardo and presently the Huracán platform. The fundamental construction of the R8 is based on the Audi Space Frame, and uses an aluminium monocoque which is built using space frame principles. The car is built by Audi Sport GmbH in a newly renovated factory at Audi’s ‘aluminium site’ at Neckarsulm in Germany. At the time it was introduced in 2006, the R8 became the first production car with full-LED headlamps.




£135,300



£171,405




Add To Cart


      </div>


    </div>


</section>
2

I can’t see that you have linked to any elements on the page with ID attributes of “Home”, “About_Us” or “Contact_Us”.

1 Like
3

Now I have added those.
I added the id’s before but instead of id=“Home” I was doing id=“#Home”

Thank you,
Have a great day

2 Likes