Technical Documentation Page - Build a Technical Documentation Page

I can’t seem to figure out what exactly is the problem

  • 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”).

  • Passed:Each .nav-link should have an href attribute that links to its

<!-- file: index.html -->
<main id="main-doc">
<section class="main-section" id="section_1_header">
    <header>Section 1 Header</header>
   <code>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus odio id sem malesuada.</p>
    <p>Duis commodo sapien non elit dapibus, vel dictum massa bibendum.</p>
      <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        </code>
</section>

<section class="main-section" id="section_2_header">
    <header>Section 2 Header</header>
    <code>
      <p>Ut eu libero non massa consequat dignissim ut tellus.</p>
    <p>Cras eleifend orci ac dolor ullamcorper, a iaculis mi sagittis.</p>
      <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        </code>
</section>

<section class="main-section" id="section_3_header">
    <header>Section 3 Header</header>
  <code>
      <p>Phasellus cursus velit eget lectus dictum, nec faucibus massa lobortis.</p>
    <p>Etiam tempus libero ut enim pretium, nec pulvinar augue imperdiet.</p>
      <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        </code>
</section>

<section class="main-section" id="section_4_header">
    <header>Section 4 Header</header>
  <code>
      <p>Pellentesque vestibulum elit a turpis commodo, et bibendum augue commodo.</p>
    <p>Aliquam nec enim sed metus facilisis auctor in augue.</p>
      <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        </code>
   </section>
   
<section class="main-section" id="section_5_header">
    <header>Section 5 Header</header>
   <code>
      <p>Pellentesque vestibulum elit a turpis commodo, et bibendum augue commodo.</p>
    <p>Aliquam nec enim sed metus facilisis auctor in augue.</p>
      <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        </code>
   </section>
 <nav id="navbar">
        <header>Technical Documentation</header>
        <a href="#section_1_header" class="nav-link">Section 1 Header</a>
        <a href="#section_2_header" class="nav-link">Section 2 Header</a>
        <a href="#section_3_header" class="nav-link">Section 3 Heade</a>
        <a href="#section_4_header" class="nav-link">Section 4 Header</a>
        <a href="#section_5_header" class="nav-link">Section 5 Header</a>
        
</main>

/* file: styles.css */
* {
  background-color: #3a3240;
}
a {
  color: #92869c;
}
a:hover {
  background-color: #92869c;
  color: #3a3240;
}
#navbar {
  border-style: solid;
  border-width: 5px;
  border-color: #92869c;
  height: 100%;
  top: -5px;
  left: -5px;
  padding: 5px;
  text-align: center;
  color: #92869c
}
@media (min-width: 480px) {
  #navbar {
    position: fixed;
  }
}
main {
  margin-left: 220px;
  color: #92869c
}
header {
  font-size: 20pt;
}
code {
  background-color: #92869c;
  border-style: dashed;
  border-width: 2px;
  border-color: #92869c;
  padding: 5px;
  color: black;
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

i think you dont have the closing </nav> at the end

1 Like

I have closed that tag but still the code is not running

Hello @Khin-Kay !

Section 3 Heade</a>

Just a small typing error here in Heade should be Header

I hope this helps you to move on in your coding journey.

Happy coding!

3 Likes

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