Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Can someone please help me with a hint . I have tried several means to link the nav-link to the .main-section id but , I still can’t get it right.

A help to a brother will highly be appreciated

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./styles.css" />
    <title>Technical Documentation Page/title</title>
  <body>
    <h1>Technical Documentation</h1>
    <main id="main-doc">
      <section class="main-section" id="internet_connection">
        <header id="internet_connection">Internet Connection</header>
        <p></p>
        <p></p>
        <code></code>
        <div>
          <li>
            <a href="internet-connection.html">Internet Connection</a>
          </li>
        </div>
      </section>
      <section class="main-section" id="cable_budget">
        <header id="cable_budget">Cable Budget</header>
        <p></p>
        <p></p>
        <code></code>
        <div>
          <li>
            <a href="cable-budget.html"></a>
          </li>
        </div>
      </section>
      <section class="main-section" id="fire_protection">
        <header id="fire_protection">Fire Protection</header>
        <p></p>
        <p></p>
        <code></code>
        <div>
          <li>
             <a href="fire-protection.html">Fire Protection</a>
          </li>
        </div>
      </section>
      <section class="main-section" id="water_supply">
        <header id="water_supply">Water Supply</header>
        <p></p>
        <p></p>
        <code></code>
        <div>
          <li>
             <a href="water-supply.html">Water Supply</a>
          </li>
        </div>
      </section>
      <section class="main-section" id="construstion_site">
        <header id="construstion_site">Construstion Site</header>
        <p></p>
        <p></p>
        <code></code>
        <div>
          <li>
             <a href="construstion-site.html">Construstion Site</a>
          </li>
        </div>
      </section>
      <nav id="navbar">
        <header>Technical Documentation Tools</header>
        <a class="nav-link" href="internet_connection">Internet Connection</a>
        <a class="nav-link" href="cable_budget">Cable Budget</a>
        <a class="nav-link" href="fire_protection">Fire Protection</a>
        <a class="nav-link" href="water_supply">Water Supply</a>
        <a class="nav-link" href="construstion_site">Construstion Site</a>
      </nav>
    </main>
  </body>
</html>

/* file: styles.css */
@media ( max-width: 678px){
  #main-doc{
    font-style: timenewroman;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hello, be patient and pay attention to the HTML structure, you were supposed to write first the nav bar and nav link inside it and then write 14 sections. Everything must be descendants of the “main” tag.

1 Like
3

Your meta tag has viewpoint written in it instead of viewport.

1 Like
4

20231229_181441
20231229_1814411908×4032 440 KB

Use this HTML structure, I didn’t write it till the end but it will be enought to get the meaning. Goodluck!

5

Hello @hiekamara1 !

I noticed that each of the nav-link is missing the # to connect it to the id of the corresponding section.

Try adding that before the text in the nav-link and see if that helps you fix that issue.

And for the media query you may wish to enclose the font-family in quotes and place spaces between the words.

Happy coding!

6

Hey Earth Dust,
Thank you so much for the help. I apply the # and it went through successfully. respect man

1 Like
7

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