Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Cannot pass te last user story about the one media query. I ave also inserted the command

@media (max-width: 1199px) and (min-width: 769px) {

#main-doc {

width: 800px;

}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="./styles.css">
    <nav id="navbar">
    <header>COSMOS PRODUCTION</header>
    <ul>
          <li>
        <a class="nav-link" href="#Partnership">Partnership</a>
        </li><li>
        <a class="nav-link" href="#Code_share_definition">Code share definition</a>
        </li>
              <li>
        <a class="nav-link" href="#Flight">Flight</a>
        </li>
              <li>
        <a class="nav-link" href="#Distribution">Distribution</a>
        </li>
              <li>
        <a class="nav-link" href="#Simulation">Simulation</a>
        </li>
      </ul>
      </nav>
  </head>
  <body>
<main id="main-doc">
<section class="main-section" id="Partnership">
  <header>Partnership</header>
  <p>1</>
  <p>2</>
  <p>3</>
  <p>4</>
  <p>5</>
  <p>6</>
  <p>7</>
  <p>8</>
  <p>9</>
  <p>10</>
</section>
<section class="main-section" id="Code_share_definition">
  <header>Code share definition</header>
  <code>Code 1</code>
  <code>Code 2</code>
  <code>Code 3</code>
  <code>Code 4</code>
  <code>Code 5</code>
</section>
<section class="main-section" id="Flight">
   <header>Flight</header>
   <li>Li1</li>
   <li>Li2</li>
   <li>Li3</li>
   <li>Li4</li>
   <li>Li5</li>
</section>
<section class="main-section" id="Distribution">
   <header>Distribution</header>
</section>
<section class="main-section" id="Simulation">
   <header>Simulation</header>
</section>

</main>
    </body>
    </html>
/* file: styles.css */
#navbar {
  position: fixed;
  min-width: 290px; 
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%; 
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4)
}

nav {
  display: block;
  unicode-bidi: isolate;
}

body {
  display: block; 
  margin: 8px;
}

header {
  display: block;
  unicode-bidi: isolate;

html, body {
    min-width: 290px;
    color: #4d4e53;
    background-color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;

#main-doc {
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px;
}
main {
    display: block;
    unicode-bidi: isolate;}
    

@media (min-width: 769px) {
  body {
    display: flex;
    flex-direction: row;
  }

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

you really shouldn’t put the nav bar in the head element. It should be in the body element.

as for your styles.css, you have multiple areas with missing curly } braces.

For example:

There’s one missing in the media rule.

There’s another one missing here.

and another one missing here.

1 Like

That was indeed my mistakes. thanks a lot, I’ve just passed it!

2 Likes