Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
I can’t find the bug in it.

**
Filler Text 1

 <a class="nav-link" href='#filler_text'>Filler Text 2</a>

<a class="nav-link" href='#filler_text'>Filler Text 3</a>

 <a class="nav-link" href='#filler_text'>Filler Text 4</a>

 <a class="nav-link" href='#filler_text'>Filler Text 5</a>

<header>Filler Text 1</header>

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

<code></code>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<header>Filler Text 2</header>

<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<code></code>

<header>Filler Text 3</header>

<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>
<code></code>

<header>Filler Text 4</header>

<p>This is paragraph 7.</p>
<p>This is paragraph 8.</p>
<code></code>

<header>Filler Text 5</header>

<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<code></code>
** 
<!-- file: index.html -->
<main id="main-doc">

  <link rel='stylesheet' href="styles.css">

  <nav id='navbar'>

    <header>Topic</header>

<a class="nav-link" href='#filler_text'>Filler Text 1</a>

     <a class="nav-link" href='#filler_text'>Filler Text 2</a>

    <a class="nav-link" href='#filler_text'>Filler Text 3</a>

     <a class="nav-link" href='#filler_text'>Filler Text 4</a>

     <a class="nav-link" href='#filler_text'>Filler Text 5</a>

  </nav>

  <section class="main-section" id="filler_text_1">

    <header>Filler Text 1</header>

    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>

    <code></code>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
  
  <section class="main-section" id="filler_text_2">

    <header>Filler Text 2</header>

    <p>This is paragraph 3.</p>
    <p>This is paragraph 4.</p>
    <code></code>
  </section>

  <section class="main-section" id="filler_text_3">

    <header>Filler Text 3</header>

    <p>This is paragraph 5.</p>
    <p>This is paragraph 6.</p>
    <code></code>
  </section>

  <section class="main-section" id="filler_text_4">

    <header>Filler Text 4</header>

    <p>This is paragraph 7.</p>
    <p>This is paragraph 8.</p>
    <code></code>
  </section>

 <section class="main-section" id="filler_text_5">

    <header>Filler Text 5</header>

    <p>This is paragraph 3.</p>
    <p>This is paragraph 4.</p>
    <code></code>
  </section>

</main>

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

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7;

}

#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px;

}

#main-doc {
  margin-left: 200px;
}

@media (max-height: 600px;) {
  .main-section{
    font-size .7em;
  }

}

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:

2

Duplicate post.

Please do not make duplicate posts for the same issue?

Happy coding!

3

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