Technical Documentation Page - Build a Technical Documentation Page

Hi, this code is passing all the tests except for " You should have at least five code elements that are descendants of .main-section elements". Any help would be greatly appreciated.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
 <main id="main-doc">
 
 
   <section class="main-section" id="Ava">
     <header class="section-header">
       <h1>Ava</h1>
       </header>
 <div id="Ava_description">
 <p>Ava is my oldest niece and lives about 2 hours away.</p>
 <p>Here is a bit about her:</p>
 <ul>
   <li>She is a very outgoing girl</li>
   <li>She loves princesses and anything girly</li>
   </ul>
   </div>
   </section>
<section class="main-section" id="Joette">
     <header class="section-header">
       <h1>Joette</h1>
       </header>
 <div id="Joette_description">
 <p>Joette lives in Atlanta and we visit eachother as often as we can.</p>
 <p>Here is a bit about her:</p>
 <ul>
   <li>She is a very smart girl</li>
   <li>She loves <a href="https://en.wikipedia.org/wiki/Unicorn">unicorns</a> and is very curious</li>
   </ul>
   </div>
   </section>
<section class="main-section" id="Adiam">
     <header class="section-header">
       <h1>Adiam</h1>
       </header>
 <div id="Adiam_description">
 <p>Adiam is Ava's sister and the middle child of my brother.</p>
 <p>Here is a bit about her:</p>
 <ul>
   <li>She is a very independant girl</li>
   <li>She is a mix of tough and <a href="https://en.wikipedia.org/wiki/Lionel_Messi">sensitive</a></li>
   </ul>
   </div>
   </section>
 <section class="main-section" id="Jacob">
     <header class="section-header">
       <h1>Jacob</h1>
       </header>
 <div id="Jacob_description">
 <p>Jacob is my sister's second child and my only nephew.</p>
 <p>Here is a bit about him:</p>
 <ul>
   <li>He loves to jump and is full of energy</li>
   <li>He is not shy and is good with new people</li>
   </ul>
   <p>This is a picture of his trampoline.</p>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Hometrampoline.jpg/330px-Hometrampoline.jpg">
   </div>
    </section>
<section class="main-section" id="Aleah">
     <header class="section-header">
       <h1>Aleah</h1>
       </header>
 <div id="Aleah_description">
 <p>Aleah is the youngest of all my nieces and nephew.</p>
 <p>Here is a bit about her:</p>
 <ul>
   <li>She is a very outgoing girl and always has a big smile</li>
   <li>She is <a href="https://www.fcbarcelona.com/en/"fearless</a> and mature for her age</li>
   </ul>
   </div>
    </section>
    
<nav id="navbar">
 <header id="family">My nieces and nephew</header>
 <ul> 
 <li><a href="#Ava" class="nav-link">Ava</a></li>
 <li><a href="#Joette" class="nav-link">Joette</a> |
 <li><a href="#Adiam" class="nav-link">Adiam</a>
  |<li><a href="#Jacob" class="nav-link">Jacob</a>
 <li><a href="#Aleah" class="nav-link">Aleah</a>
 </ul>
</nav>



 </main>
 </body>
 </html>
/* file: styles.css */
@media only screen(min-width:1025px) {
{ body
}
}
   **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

As I understand it isn’t just any code. “code” is a type of element and is used to display code samples. Not sure how to type it here becuase its reading it as HTML.

1 Like

thanks. it has helped me solve my issue

That was it. Thank a lot.