Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

It says that I need at least 5 code elements that are descendants of the .main-section element. However, I thought I already had that in my code. I don’t know what I am doing wrong

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang='en'>
<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset='utf-8'>
  <title>Types of Anime</title>
</head>
<body>
  <nav id='navbar'>
    <header id='nav_header'>Types of Anime</header>
    <br />
    <a class='nav-link' href='#slice_of_life'>Slice of Life</a>
    <a class='nav-link' href='#action'>Action</a>
    <a class='nav-link' href='#suspense_horror'>Suspense Horror</a>
    <a class='nav-link' href='#mystery'>Mystery</a>
    <a class='nav-link' href='#isekai'>Isekai</a>
  </nav>
<main id='main-doc'>
  <section class='main-section' id='slice_of_life'>
  <header><span class='bold'>Slice of Life</span></header>
  <br />
  <article>
    <ul>
    <h3>Toradora</h3>
    </ul>
    <img src='https://canvas-bridge02.tubitv.com/bt2vOB4qHTqYUGeARUVgA31lraE=/400x574/smart/img.adrise.tv/245cf5f4-c262-4a9a-a08a-545ba3512b88.png' id='toradora'>
    <p>A fascinating, yet slowly developed anime that encompasses love, friendship, and loneliness will have you begging for a second season by the end of the first episode. Taiga, the small but defensive main character, discovers love from a surprising source. I can't give too much away, but just know that this anime has one of the most unforgettable kissing scenes of all time. </p>
    <ul>
      <li></li>
      <li></li>
    </ul>
    <h3>Clannad</h3>
    <img src='https://cdn.cloudflare.steamstatic.com/steam/apps/519110/capsule_616x353.jpg?t=1580429037' id='clannad'>
    <p>TBA</p>
    <ul>
      <li></li>
    </ul>
    <h3>Fruits Basket</h3>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRs5uJ4RyiG_fFmiDUDpK0pu2rlP_hSFqRgBQ&usqp=CAU' id='fruits_basket'>
    <p>TBA</p>
    <ul>
      <li></li>
    </ul>
  </article>
  </section>
  <section class='main-section'id='action'>
  <header><span class='bold'>Action</span></header>
  <br />
  <article>
  <h3>Naruto</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh9AwyOd7DSXQiYow8B_oBBsRsyCbpoY9ywA&usqp=CAU' id='naruto'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  <h3>Hunter X Hunter</h3>
  <img src='https://lyricsfromanime.com/animes-info/hunter-x-hunter-2011/cover/hunter-x-hunter-2011-lyrics.jpg' id='hunter_x_hunter'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  </article>
  </section>
  <section class='main-section' id='suspense_horror'>
  <header><span class='bold'>Suspense horror</span></header>
  <br />
  <article>
  <h3>Promised Neverland</h3>
  <img src='https://m.media-amazon.com/images/M/MV5BMTYwYjYyZDgtMTQ3My00YTI4LThmZTUtZmU1MjllOWRlOTdhXkEyXkFqcGdeQXVyMzgxODM4NjM@._V1_.jpg' id='promised_neverland'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  <h3>High-Rise Invasion</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrAKkDk9t9fXuTrK1vGO7jy1OPwbH6qcMT0g&usqp=CAU' id='highrise_invasion'>
  <p>TBA</p>
  <ul>
    <li></li>
    </ul>
  </article>
  </section>
  <section class='main-section' id='mystery'>
  <header><span class='bold'>Mystery</span></header>
  <br />
  <article>
  <h3>Death Note</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOkVql4CTPRDhwd6OQqYoSs0wrEA1JPYQ_rg&usqp=CAU' id='death_note'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  <h3>ID: INVADED</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsPUFRptbitJQouqhdoEyipj6LIIE1jpzOOA&usqp=CAU' id='id_invaded'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  </article>
  </section>   
  <section class='main-section' id='isekai'>
  <header><span class='bold'>Isekai</span></header>
  <br />
  <article>
  <h3>That Time I Got Reincarnated as a Slime</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-3kMe2747QFe57GsDqf7dGfFoZ_LWFpzNQQ&usqp=CAU' id='slime'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  <h3>The Rising of The Shield Hero</h3>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBClFWZRCqNjw75ijPg54jbkLFanqOmDonpw&usqp=CAU' id='shield_hero'>
  <p>TBA</p>
  <ul>
    <li></li>
  </ul>
  </article>
  </section>
</main>
</body>
</html>

/* file: styles.css */
.bold {
font-size: 20;
font-weight: 700;
}

@media (min-width: 400px) {
body{
  background-color: lightgray;
}
}

  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hi!
This is a code element with some twine Harlow in as an example.

<code> [[go to the castle-> castle]] </code>

Where are your code elements?

3

I see what you’re saying. I was confused about what they were asking, but I understand now. I appreciate the help.

1 Like
4

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