Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

The point number 10 (You should have at least five code elements that are descendants of .main-section elements), I really cannot understand it anymore, i think i have 6 added and the last point with the query, looked all over and can’t find how the cpy paste version of the instructions don’t even work when paste on the head.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>types of candy available</title>
    </head>
  <body style="margin-bottom: 8px !important">
    <nav id="navbar">
      <header>sugar expertise</header>
     <ul>
        <a class="nav-link" href="#gum">gum</a>
      <a class="nav-link" href="#chewing_gum">chewing gum</a>
      <a class="nav-link" href="#lollipop">lollipop</a>
      <a class="nav-link" href="#sugarless">sugarless</a>
      <a class="nav-link" href="#candy">candy</a>
      <a class="nav-link" href="#drop">drop</a>
    </ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="gum">
      <header id="gum">gum</header>
        <p>
          <li>petroleum base gum was created in 1900's by a chemist called Bubble.</li>
        </p>
        <p>
          <li>natural <bold>gum</bold> was already used by the incas together with cocaine leaf</li>
        </p>
        <ul>
          <li>chemical gum</li>
          <li>naturalesse</li>
        </ul>
      </section>
      <section class="main-section" id="chewing_gum">
        <header id="chewing_gum">chewing gum</header>
        <p>
          <li>with nicotine</li>
        </p>
        <p>
          <li>sugar free</li>
        </p>
        <ul>
          <li>illegal</li>
          <li>legal</li>
      </section>
      <section class="main-section" id="lollipop">
        <header id="lollipop">lollipop</header>
        <p>
          <li>mix of flavours</li>
        </p>
        <p>
          <li>chewable</li>
        </p>
        <ul>
          <li>strawberry</li>
          <li>coca-cola</li>
          </ul>
      </section>
      <section class="main-section" id="sugarless">
        <header id="sugarless">sugarless</header>
        <p>
          <li>root cane</li>
        </p>
        <p>
          <li>suikerbiet</li>
        </p>
        <ul>
          <li>diabetes</li>
          <li>diet</li>
          </ul>
      </section>
      <section class="main-section" id="candy">
        <header id="candy">candy</header>
        <p>
          <li>sweet</li>
        </p>
        <p>
          <li>savory</li>
        </p>
        <ul>
          <li>bad for your teeth</li>
          <li>healthy ones</li>
          </ul>
      </section>
       <section class="main-section" id="drop">
        <header id="drop">drop</header>
        <p>
          <li>horrible</li>
        </p>
        <p>
          <li>disgusting</li>
        </p>
        <ul>
          <li>no one likes it</li>
          <li>dutch like it</li>
        </ul>
      </section>
  </main>
  </body>
</html>

/* file: styles.css */
.main-doc {
  position: absolute;
  margin-left: 300px;
  padding: 20px;
  margin-bottom: 100px;
}

html, body {
  font-family: comic-sans;
  line-height: 1.5;
  text-align: center;
}

header {
  text-align: left;
  font-family: tahoma;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

The code element is a specific element, learn more about it here:

3

thank very much for the help, solved point 10. I still can’t understand what i did wrong on the last point about the media query, I already looked around in other forums and keeps not working.

4

I don’t see the media query, can you point out where you have written it?

5

I believe is this

in my understanding is asking the connection to the CSS file right?

6

no, that is not a media query, that is a link element

you may want to review about them

7

went reviewing and got it to work! thanks for the help!