Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I am getting two errors while submission :

  1. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

  2. Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

  3. (optional) Can anyone suggest me a unique good font style for my code.

Your code so far

<!DOCTYPE html>
<html lang="en">

<div id="background">
<img class="background_stretch" src="https://images.pexels.com/photos/1671325/pexels-photo-1671325.jpeg?auto=compress&cs=tinysrgb&w=600" alt="background-image">
</div> 

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My favourite Valorant Charachters</title>
      <link rel="stylesheet" href="styles.css">

  </head> 

  <body>
    
    <nav id="navbar">
 <header> TheMuggleCoder </header>
  <ul>
    <li> <a class= "nav-link" href="#Viper">Viper</a> </li>
    <li> <a class="nav-link" href="#Sage">Sage</a> </li>
    <li> <a class="nav-link" href="#Cypher">Cypher</a> </li>
    <li> <a class="nav-link" href="#Omen">Omen</a> </li>
    <li> <a class="nav-link" href="#Raze">Raze</a> </li>
    
  </ul>
</nav>

    <main id="main-doc">

      <section class="main-section" id="Viper">
        <header>
          <h1>Viper</h1>
          <p>
            <code>"No one can hold their breath forever."</code>
          </p>
          <p>
            <ul>
              <li>Controller</li>
              <li>	
The American chemist, Viper deploys an array of poisonous chemical devices to control the battlefield and cripple the enemy's vision. If the toxins don't kill her prey, her mind games surely will.</li>
            </ul>
          </p>

        </header>
      </section>

      <section class="main-section" id="Sage">
        <header>
          <h1>Sage</h1>
          <p>
            <code>"I am both shield and sword"</code>
          </p>
          <p>
            <ul>
              <li>Sentinel</li>
              <li>	
The bastion of China, Sage creates safety for herself and her team wherever she goes. Able to revive fallen friends and stave off aggressive pushes, she provides a calm center to a hellish fight.</li>
            </ul>
          </p>
          
        </header>
      </section>

      <section class="main-section" id="Cypher">
        <header>
          <h1>Cypher</h1>
          
          <p>
            <code>"Nothing stays hidden from me. Nothing."</code>
          </p>
          <p>
            <ul>
              <li>Sentinel</li>
              <li>The Moroccan information broker, Cypher is a one-man surveillance network who keeps tabs on the enemy’s every move. No secret is safe. No maneuver goes unseen. Cypher is always watching.</li>
            </ul>
          </p>
          
        </header>
      </section>

      <section class="main-section" id="Omen">
        <header>
          <h1>Omen</h1>
          <p>
            <code>"I am the beginning. I am the end."</code>
          </p>
          <p>
            <ul>
              <li>Controller</li>
              <li>A phantom of a memory, Omen hunts in the shadows. He renders enemies blind, teleports across the field, then lets paranoia take hold as his foe scrambles to learn where he might strike next.</li>
            </ul>
          </p>
          
        </header>
      </section>

      <section class="main-section" id="Raze">
        <header>
          <h1>Raze</h1>
          <p>
            <code>"Yes, I'm pumped!"</code>
          </p>
          <p>
            <ul>
              <li>Duelist</li>
              <li>Raze explodes out of Brazil with her big personality and big guns. With her blunt-force-trauma playstyle, she excels at flushing entrenched enemies and clearing tight spaces with a generous dose of “boom.”</li>
            </ul>
          </p>
          
        </header>
      </section>
    </main>

  </body>

  <footer>
  </footer>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You are wrapping all of the content in each section in a header element. I think you only want to wrap the h1 in a header, which should help you pass this test.

1 Like

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