Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Hello I’m having problem :
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
I don’t know why please i need help.Thank you

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>Build a Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
<a href="styles.css" id="build_a_technical_documentation_page" target="_blank"></a>
  </head>
    <body>
<div id="side-nav">
<nav id="navbar">
<header id="head" align="left">Perfume Lovers</header>
<li><a class="nav-link" 
href="#News">News</a></li>
        <li><a class="nav-link" href="#Brands">Brands</a></li>
        <li><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></li>
        <li><a class="nav-link" href="#For_sale">For sale</a></li>
        <li><a class="nav-link" href="#History"> History</a></li>
        <li><a class="nav-link" href="#Perfumes_apps">Perfumes apps</a></li>
        <li><a class="nav-link" href="Notes"> Notes</a></li>
        <li><a class="nav-link"  href="#Forum">Forum</a></li>  
        <li><a class="nav-link" href="#Reference">Reference</a></li>
      <p></p>
      </nav>
<main id="main-doc">
      
      <section class="main-section" id="News">
      <header>News</header>
        <p><img src="https://www.fragrantica.com/news/Felisa-Born-In-Brazil-18111.html">Felisa: Born In Brazil</p>
        <p><img src="https://www.fragrantica.com/news/Nissaba-from-Geneve-with-Amazing-Natural-Ingredients-18110.html">Nissaba from Geneve with Amazing Natural Ingredients</p>
      </section>
      <section class="main-section" id="Brands">
    <header>Brands</header>
        <p><code><li>Disagners</code></li></p>
        <p><code><li>Nishe</li></code></p>
      </section>
      <section class="main-section" id="JavaScript_and_Java">
        <header>JavaScript and Java</header>
        <p></p>
        <p><code></code></p>
  </section>
  <section class="main-section" id="For_sale">
    <header>For sale</header>
    <p></p>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ol>
   </section>
  <section class="main-section" id="History">
   <header>History</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="Notes">
    <header>Notes</header>
    <p></p>
     <p><code><li>CITRUS</li></code></p>
     <p><code><li>FRUITS, VEGETABLES AND NUTS</li></code></p>
     <p><code><li>FLOWERS</li></code></p>
  </section>
  <section class="main-section" id="Perfumes_apps">
    <header>Perfumes apps</header>
    <p></p>
     <p><code><img src="https://www.ipsy.com/blog/how-to-apply-perfume#:~:text=Spray%20it%20onto%20your%20pulse%20points.&text=It's%20places%20like%20the%20inside,to%20naturally%20diffuse%20a%20scent.">
     </code></p>
  </section>
  <section class="main-section" id="Forum">
    <header>Forum</header>
     <p><code></code></p>
     <p></p>
 </section>
<section class="main-section" id="Reference">
    <header>Reference</header>
    <p></p>
  </section>
  
     </main>
      </body>
     </html>

/* file: styles.css */
#main{
  background-color: rgb(120, 40, 55);
  width: 100px;
  height: 45px;
}
.nav{
  position: absolute;
  color: rgb(20, 20, 100)
}
@media (max-width: 120px){
  .h1{
    color: black;
  }
  .nav-bar{
    float: left;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hi Lela, you are so close! There is only little anchor link giving you a problem. The “Notes” anchor link is missing its # so that it can go to that section!

<li><a class="nav-link" href="#Notes"> Notes</a></li>
2 Likes
3

Thank you so much :slight_smile: you save me.

1 Like
4

It was my pleasure! =]

5

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