Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I can not understand the situation or the issue.

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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="cars">
      <header id="cars">cars</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
         </section>
    <section class="main-section" id="bikes">
      <header id="bikes">bikes</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="boats">
      <header id="boats">boats</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="planes">
      <header id="planes">planes</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="train">
      <header id="train">train</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </section>
    <nav id="navbar" id="vehicles">
      <header>vehicles</header>
      <a class="nav-link" href="#vehicles" id="vehicles"></a>
      <a class="nav-link" href="#cars" id="cars">cars</a>
      <a class="nav-link" href="#bikes" id="bikes">bikes</a>
      <a class="nav-link" href="#boats" id="boats">boats</a>
      <a class="nav-link" href="#planes" id="planes">planes</a>
      <a class="nav=link" href="#train" id="train">train</a>

    </nav>

  </main>
</body>
</html>

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="cars">
      <header id="cars">cars</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
         </section>
    <section class="main-section" id="bikes">
      <header id="bikes">bikes</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="boats">
      <header id="boats">boats</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="planes">
      <header id="planes">planes</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
    </section>
    <section class="main-section" id="train">
      <header id="train">train</header>
      <p>a great way to transport</p>
      <p>a great way to move</p>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </section>
    <nav id="navbar" id="vehicles">
      <header>vehicles</header>
      <a class="nav-link" href="#vehicles" id="vehicles"></a>
      <a class="nav-link" href="#cars" id="cars">cars</a>
      <a class="nav-link" href="#bikes" id="bikes">bikes</a>
      <a class="nav-link" href="#boats" id="boats">boats</a>
      <a class="nav-link" href="#planes" id="planes">planes</a>
      <a class="nav=link" href="#train" id="train">train</a>

    </nav>

  </main>
</body>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Welcome to the forum @orickguzman

You have several issues with your code.

First, you have a typo in the class attribute value for train in the anchor element.

Second, you have duplicate id attributes throughout your code. id attribute values should be unique.

The third item is the number of elements with a class of .nav-link must match the number of section elements.

Finally, the tests require you to include an @media rule.

Happy coding

1 Like
3

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