Technical Documentation Page - Build a Technical Documentation Page

Just don’t know how to link each section to the nav-links at the bottom, can anyone help?

   <section class='main-section' id='Hello_Kitty'>
     <header>Hello Kitty</header>
     <p><code>Hello Kitty</code>, also known by her real name Kitty White, is a fictional character created by Yuko Shimizu, currently designed by Yuko Yamaguchi, and owned by the Japanese company Sanrio. Sanrio depicts Hello Kitty as an anthropomorphized white cat with a red bow and no visible mouth</p>
    <p><code>Hello Kitty</code> was created in 1974 and the first item, a vinyl coin purse, was introduced in 1975. Originally Hello Kitty was only marketed towards pre-teenage girls, but beginning in the 1990s, the brand found commercial success among teenage and adult consumers as well. Hello Kitty's popularity also grew with the emergence of kawaii (cute) culture. The brand went into decline in Japan after the 1990s, but continued to grow in the international market. By 2010 the character was worth $5 billion a year and The New York Times called her a "global marketing phenomenon. By 2014, when Hello Kitty was 40 years old, she was worth about $8 billion a year.</p>
     <ol>
       <li>
         Born in London</li>
       <li>A scorpio</li>
     </ol>
   </section>
   <section class='main-section' id='My_Melody'>
     <header>My Melody</header>
     <p><code>My Melody</code> is a little rabbit girl who was born in a forest in Mariland. She is a popular Sanrio character, in particular in Japan. She treasures her bright red hood (but it is often depicted as pink) that her grandmother made for her.</p>
   <p><code>My Melody</code> has her own anime series called Onegai My Melody that debuted in 2005, consisting of four sub-series; in which her (self-proclaimed by Kuromi) rival Kuromi was introduced.</p>
   <ol>
     <li>Loves to do crafts and bake cookies with her mother</li>
     <li>Favorite food is almond pound cake</li>
    </ol>
   </section>
   <section class='main-section' id='Kuromi'>
      <header>Kuromi</header>
     <p><code>Kuromi</code> is My Melody's rival, who is a white rabbit or imp-like creature wearing a black jester's hat with a pink skull on the front and a black devil's tail. The skull's facial expression changes to match Kuromi's mood. Fittingly, her birthday is Halloween (October 31st). Her name translates from Japanese to English as "black beauty".</p>
   <p><code>Kuromi's</code> appearance is also similar to those of cartoon characters from the 1990s such as Impmon from Digimon. Kuromi has become a popular character for the punk, scene, and goth crowds due to her appearance.</p>
   <ol>
     <li>Enjoys writing in her diary</li>
     <li>Hooked on romantic short stories</li>
   </ol>
     </section> 
   <section class='main-section' id='Keroppi'>
     <header>Keroppi</header>
     <p><code>Keroppi</code> is a fictional character created by Sanrio in 1988. While he was meant for the Keroppi universe, he is seen as a Hello Kitty character. Keroppi lives in Donut Pond.</p>
   <p><code>Keroppi</code> is one of the smallest characters. He is a green frog with big eyes. His mouth is typically V-shaped when closed, but certain scenes may give him different mouth shapes, such as the typical arch. His outfit consists of a red and white one-piece. He is usually seen with pink spots on his cheeks.</p>
   <ol>
    <li>Enjoys swimming and baseball</li>
    <li>Loves to sing</li>
   </ol>
   </section>
   <section class='main-section' id='Badtz_Maru'>
     <header>Badtz Maru</header>
     <p><code>Badtz-Maru</code>, a male penguin with spiky hair, is one of the many characters produced by the Japanese company Sanrio and created by Hisato Inoue in 1993. Unlike the more popular Hello Kitty, he has an attitude and is one of the few characters that is marketed to all genders. He was born on April 1st in Oahu, Hawaii.</p>
   <p><code>Badtz-Maru</code> has many different facial expressions and poses, but he is classically recognized for pulling one eye down and sticking out his tongue.</p>
   <ol>
     <li>A bit selfish</li>
     <li>Tends to make fun of things</li>
   </ol>
   </section>
   <nav id='navbar'>
     <header>change this</header>
     <a class='nav-link' href='Hello_Kitty'>Hello Kitty</a>
     <a class='nav-link' href='My_Melody'>My Melody</a>
     <a class='nav-link' href='Kuromi' >Kuromi</a>
     <a class='nav-link' href='Keroppi' >Keroppi</a>
     <a class='nav-link' href='Badtz-Maru'>Badtz-Maru</a>
   </nav>
  </main>
</html>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hello!

Here is an example of how the nav-link and main section are connected.
< nav id=“nav-bar”>
< ul>
< li>< a href=“#puppy_paws” class=“nav-link”>Puppy Paws< /a>< /li>
< li>< a href=“#kitten_kisses” class=“nav-link”>Kitten Kisses< /a>< /li>
< li>< a href=“#turtle_treasures” class=“nav-link”>Turtle Treasures< /a>< /li>
< li>< a href=“#bird_blessings” class=“nav-link”>Bird Blessings< /a>< /li>
< /ul>
< /nav>

< section>Pets< /section>
< header id="puppy_paws”>Puppy Paws< /header>
< p> Text for this header < /p>
< header id="kitten_kisses”>Kitten Kisses < /header>
< p> Text for this header < /p>
< header id=“turtle_treasures””>Turtle Treasures< /header>
< p> Text for this header < /p>
< header id=“bird_blessings”>Bird Blessings < /header>
< p> Text for this header < /p>

You may notice that any multiple word name needs to have the _ under-slash to join the words for both the id and the id link.

Placing the # before the name in the nav-link href but within the quotes makes the connection happen.

I hope it helps you.

Happy coding! :slight_smile:

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