Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi, can anyone help me find which one of my navigation links is not the same as the corresponding elements? I can’t pass the test of:

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

  • 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).

Your code so far

<!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>
    <section class="screen" id="section-1-1">
      <header id="header">
        <img id="header-img" src="https://en.pimg.jp/061/879/956/1/61879956.jpg" width="100px">
        <nav id="nav-bar">
          <ul>
            <li class="nav-link"><a href="#section-2-2">Katalog</a></li>
            <li class="nav-link"><a href="#section-1-2">Program</a></li>
            <li class="nav-link"><a href="#Tentang-kami">Tentang kami</a></li>
          </ul>
        </nav>
      </header>
      <main>
<section class="screen"  id="section-2-2">
        <div class="so-the-search-bar-can-be-seen"></div>
        <form id="search" method="post" action="https://www.freecodecamp.com/email-submit">
          <fieldset>
            <input id="needs" type="text" placeholder="Apa yang anda butuhkan?"></input>
          </fieldset>
          <button>Search</button>
        </form>
</section>
<section class="screen"  id="section-1-2">
        <div class="the-program-head-can-be-seen"></div>
        <table>
          <thead>
            <tr class="program-head">
              <td>Tanggal</td>
              <td>Program</td>
              <td>Status Program</td>
              <td>Status Pendaftaran</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>13-15 Juni 2023</td>
              <td>Pelatihan Budidaya Ulat Sutera</td>
              <td class="Status-Program">Selesai</td>
              <td class="Status-Pendaftaran">Ditutup</td>
            </tr>
            <tr>
              <td>20 Juli 2023</td>
              <td>Seminar Budidaya Go Ekspor</td>
              <td class="Status-Program">Selesai</td>
              <td class="Status-Pendaftaran">Ditutup</td>
            </tr>
            <tr>
              <td>30 Agustus 2023</td>
              <td>Seminar Menghasilkan Cuan dari Lahan Sewa</td>
              <td class="Status-Program">Sedang berlangsung</td>
              <td class="Status-Pendaftaran">Ditutup</td>
            </tr>
            <tr>
              <td>18-18 September 2023</td>
              <td>Pelatihan Budidaya Kedelai Intensif</td>
              <td class="Status-Program">Segera</td>
              <td class="Status-Pendaftaran"><a class="daftar" href="">Daftar</a></td>
            </tr>
          </tbody>
        </table>
      </section>
</main>
<footer id="Tentang-kami">
      <p>
        Tumbuh Kita merupakan platform yang menghubungkan antara pemilik sumber daya bahan pangan kepada pembeli. Semua bahan-bahan dijual langsung oleh produsen sehingga menurunkan jumlah tangan dalam rantai produksi dan menekan cost hingga serendah-rendahnya.
      </p> 
</footer>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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
  • try to troubleshoot it by, using only “tags first” and the bring in “actual content”
  • thi fairly similar to previous test case, so solve that first and then this will be resolved through that

happy coding :slight_smile:

3

I’ve tried your suggestion, but it’s not working. Is there any other way?

I’ve tested all the links, and they are functioning correctly. I’ve ensured that I’ve matched the proper corresponding elements. However, I still can’t pass the test :frowning:

4
  • its not quite correct

lets read from this test case

Each .nav-link element should have an href attribute

  • does your “.nav-link” element has an “href” attribute?

address this and it should be alright, happy learning :slight_smile:

1 Like
5

Oh my God, thank you so much pal!!! The code pass the test now. I really appreciate it :+1: :+1: :smile:

6

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