Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer)

HTML-CSS
1

Tell us what’s happening:
having trouble with the nav-link part. Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ). what do i do? thats the only part i am failing to complete.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset='UFC-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> 
<title>Product Landing Page</title>
</head>
<body>
  <header id='header'>
    <img id='header-img' src='https://picsum.photos/200/300' />
    <nav id='nav-bar'>
      <a class='nav-link' href='#footer'>Features</a>
      <a class='nav-link' href='#services'>How It Works</a>
      <a class='nav-link' href='#bottom'>Pricing</a>
    </nav>
 
  </header>
  <video id='video' src='https://youtu.be/y8Yv4pnO7qc'></video>
  <form id='form' action='https://www.freecodecamp.com/email-submit'>
    <input name='email' id='email' placeholder='type your email address' required type='email'>
    <a href="https://www.freecodecamp.com/email-submit"><input type="submit" id="submit" value="submit" name="submit"></a>
  </form>
</body>
</html>

/* file: styles.css */
navbar{
position: top;
}
header {
position: fixed;
width: 100%;
}

@media (max-width: 650px) {
   #ul {
     flex-direction: column;
   }
}
header {
position: fixed;
top: 0;
min-height: 15px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ab8103;
@media (max-width: 600px) {
  flex-wrap: wrap;
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

The links that you have refer to no elements with that id.
For example you have:

<a class='nav-link' href='#footer'>Features</a>

What this is supposed to do is go to where an element with the id of footer is on the page.
I don’t see any elements with an id of footer anywhere in your code.

1 Like
3

what do you suggest I do?

4

What it wants you to do is add elements with ids that match the links. Try adding a footer at the bottom of the page and give it id=“footer”. When you click the link it should take you to the bottom of the page. The lesson this is from is below.

2 Likes
5

Thanks alot. Your suggestion worked.

1 Like
6

add id to <a element

  <a class="nav-link" href="services" id="services">How It Works</a>
2 Likes
7

ISSUE :

 <nav id="nav-bar">
      <ul>
        <li>
          <a class="nav-link" href="#features">Features</a>
        </li>
        <li>
          <a class="nav-link"  href="#how-it-works">How it works</a>
        </li>
        <li>
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
      </ul>
    </nav>

SOLUTION TO THE 3 .nav-link :

1.  <div class="container">
        <section id="features">

2. <section id="how-it-works">

3. <section id="pricing">



Thats how your code should look like.
1 Like
8

THANK YOU! this worked :slight_smile:

1 Like
9