Trying to complete userstory #5

Tell us what’s happening:
trying to figure out user story #5
Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <h1  id="header">Product Landing Page</h1>
    <meta charset="UTF-8">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <header id="header">
      <nav id="nav-bar">
        <img id="header-img" src="https://paulgureghian.s3.amazonaws.com/logos/download.png" alt="ge logo" />
       <ul>
          <li><a class="nav-link" href="#company">Company</a></li>
          <li><a class="nav-link" href="#revenue">Revenue</a></li>
          <li><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </nav>    

      <form  id="survey-form">
        Name:<input id="name" type='text' placeholder="Enter your name" /required>
        <label id="name-label" for="name"> * Name: </label>
        E-mail:<input id="email" type='email' placeholder="Enter your Email" /required>
        <label id="email-label" for="email">  * Email: </label>
        Number:<input id="number" type='number' min="1" max="125" placeholder="Age">
        <label id="number-label" for="age"> * Age: </label>
        <button id="submit" type="submit">Submit</button>
    </form>*Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

Hello Paul,

You have anchor links, such as #company and #revenue in your navbar. You also need an element with id="company" and id="revenue" for the links to link to. When you click the link, the page will move the page up so that the elements with the IDs are at the top of the viewport.

Do I need some special code which actually scrolls the page to the section which was clicked in the nav bar ?

It is not necessary. Without extra code, the page will jump to the ID. But, if you want a CSS scroll (not supported on older browsers), you can add,

html {scroll-behavior: smooth;}

You cannot control the speed of the scroll; for that, you’ll need JavaScript.
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

so, just a section id and the text I want to display?

Try it. You won’t break anything. :slight_smile:
The ID could be on any element.