Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Hello guy pls I need help, with technical documentation page challenge 8

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Technical Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
    </head>
    <nav id="navbar">
      <header><h1>Introduction</h1></header>
      <ul>
        <li><a class="nav-link" href="#topic_1">topic 1</a>
        <li><a class="nav-link" href="#topic_2">topic 2</a>
        <li><a class="nav-link" href="#topic_3">topic 3</a>
        <li><a class="nav-link" href="#topic_4">topic 4</a>
        <li><a class="nav-link" href="#topic_5">topic 5</a>
        <ul>
      </nav>
    <body>
      <main id="main-doc">
        <section class="main-section" id="topic_1"><header><h2>topic 1</h2></header>
        <p></p>
        <p></p>
        <code></code>
        <ul><li></li></ul>
        </section>
        <section class="main-section" id="topic_2"><header><h2>topic 2</h2></header>
        <p></p>
        <p></p>
        <code></code>
        <ul><li></li></ul>
        </section>
        <section class="main-section" id="topic_3"><header><h2>topic 3</h2></header>
        <p></p>
        <p></p>
        <code></code>
        <ul><li></li></ul>
        </section>
        <section class="main-section" id="topic_4"><header><h2>topic 4</h2></header>
        <p></p>
        <p></p>
        <code></code>
        <ul><li></li></ul>
        </section>
        <section class="main-section" id="topic_5"><header><h2>topic 5</h2></header>
        <p></p>
        <p></p>
        <code></code>
        <ul><li></li></ul>
        </section>
      
        


      </main>
    </body>
    </html>

/* file: styles.css */
#navbar{
  position: fixed;
  top: 5px;
  left: 0px;
}

main{
  position: absolute;
  margin-left: 200px;
}

@media(max-width: 500px){
  #navbar{
    position: absolute;
    width: 15%;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Welcome to the forum @mbony

Your code passes. Save your code to a folder on your computer.

Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding