Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

The navigation bar in my code stays on one page when I scroll through. I do not know how to best describe the problem but IF you view my code in a project form(the design) YOU will understand my problem. I need solutions

Your code so far


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css"> 
    <link rel="stylesheet" href="TechnicalDocumentationPage.css">
    <title>Health Is Wealth Documentation</title>
      <nav id="navbar"><header>
        Health Is Wealth Documentation
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#Use_of_Balanced_Diet">Use of Balanced Diet</a></li>
      <li><a class="nav-link" href="#Avoid_Unhealthy_Food">Avoid Unhealthy Food</a></li>
      <li><a class="nav-link" href="#Physical_Activity">Physical Activity</a></li>
      <li><a class="nav-link" href="#Healthy_Environment">Healthy Environment</a></li>
      <main id="main-doc">
        <section class="main-section" id="Introduction">
          <p>As we all know, our life is very complicated and busy today. And all these engagements are just to make money.
            We have to work hard all day to earn money and in the cycle of earning money, we forget that taking care of our health; the most important element of our life.
            <p>We also forget to eat, exercise, rest, etc. on time. We must not forget that the real wealth in our lives is our health. It is true for everyone that “health is wealth”.
            <li>Good health reduces stress and promotes healthy living without pain.</li></p>
                Private Sub Timer1_Timer()
  n = n + 1
  Lbl_Display.Caption = n
  End Sub

        <section class="main-section" id="Use_of_Balanced_Diet">
          <header>Use of Balanced Diet</header>
          <p>To maintain good health, we should eat a balanced diet. The elements of the balanced diet are fresh fruits, green vegetables, lentils, milk, eggs, yogurt, etc.
            <li>Healthy eating at the right time is very important for a healthy body, which is possible only with a balanced diet. It promotes the proper development of our body and keeps us mentally, physically, and socially healthy.</li>
            <li>With good health, we can cope with any bad situation in life.</li>
              Private Sub Command1_click()
Lable1.Caption="Start Counting"
End sub
         <p>We must always remember that it is very important for our well-being to stay healthy and for this we should always take care of our food.<img src="" alt="variety of food"></p>

        <section class="main-section" id="Avoid_Unhealthy_Food">
          <header>Avoid Unhealthy Food</header>
          <p>The fast-food and junk food are unhealthy foods as these do not contain any nutritious value. We should avoid such types of foods as much as possible because these can also cause different types of diseases like blood pressure, diabetes and heart issues etc</p>
              Private Sub Command1_Click()
'To add the values in TextBox1 and TextBox2
  Sum = Val(Text1.Text) +Val(Text2.Text)
'To display the answer on label 1
  Label1.Caption = Sum
End Sub
           <p>Smoking can cause long-term negative effects on the body, including heart disease, cancer, and diabetes<img src="" alt="smoking"></p>
        <section class="main-section" id="Physical_Activity">
          <header>Physical Activity</header>
          <p>A busy life having no physical activity can lead to serious health hazards. <li>Physical activities like walking, running, and exercises are as necessary as food.</li>
            The physical activities also involve different kinds of physical games.

            <p>Whether you play a game or take exercise, it will keep you fit, active, and healthy.
            <img src="" alt="Jogging" id="Workout"></p>
        <section class="main-section" id="Healthy_Environment">
          <header>Healthy Environment</header>
          <p>To maintain good health, the environment also plays a vital role. You can notice a huge difference between the healths of two persons; one living in a perfect and relaxing environment and others living in a depressed and noisy environment.
            Nowadays, all sorts of steps are being taken to make human life better, but we do not care about our health at all.
            <li>In the present era, the smoke coming out of various factories and factories has spoiled the fresh air, due to which the supply of fresh air is decreasing day by day. Air, water, environment, and food have been affected and polluted.</li> If we want to keep our environment clean and tidy, we need to plant as many trees as possible and keep our environment clean.
                Private Sub Command1_click()
                End sub
            <p>A healthy environment is pollution and noise-free and has greenery. If these elements are not found naturally, you should adopt environmental guidelines and try to maintain your environment clean.<img src="" alt="beach"></p>



html {scroll-behavior: smooth;}

body {background-color: rgb(233, 233, 233);
flex-direction: column;
min-height: 20px;
font-family: sans-serif;

#navbar {border-bottom: 5px solid;
  width: 75%; resize: horizontal; margin: 0;}

section {margin-top: 60px;}

#navbar li {border-color: 5px solid blue;
  list-style: none;}

#navbar a {display: block;
  padding: 10px 25px;
  cursor: pointer;
  font-size: 19px;}

#navbar a:hover {font-weight: 450;
  text-indent: 6px;
  transition: text-indent 0.3s ease-in-out;

p {margin: 10px;}

main-doc {margin: 0 auto;}

header {text-align: center;
  color: black;
  font-weight: 450;
  font-size: 2em;
  margin: 10px;}

  code {display: block; 
    padding: 0 12px;
  background-color: #fff;
  margin: 10px ;
text-align: left; 
border-radius: 7px;

 .image {width: 70px; margin-left: 20px;}

 @media only screen and (min-width: 810px)
 {body {flex-direction: row;} #navbar {width: 200px; height: 100%; position: fixed;} } 

#main-doc {margin-left: 300px; margin: 0 20px;}

#Workout{width: 50; height: 50;}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

The only test I see your code failing is that you don’t have five code elements. Once I add enough to make five then your code passes.

But if you have a problem with your navigation then please explain it in more detail.

Five code elements? What are those? Take the code I shared and view it in your IDE and tell me if it makes sense to you

View the code first. as in how I designed my technical documentation

you need to have one more of these.
task said have 5, you have 4.

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