I'm on Product Landing Page

HTML-CSS
1 
<!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">
  <header id="header">
    <img id="header-img" src="https://www.freecodecamp.org">
    <nav id="nav-bar" href="https://freecodecamp">
      <video src="https://www.frecodecamp.org" class="nav-link" id="video" href="#header"></video>
      <div class="nav-link" id="video" href="#header"></div>
      <div class="nav-link" id="video" href="#nav-bar"></div>
      <div class="nav-link" id="video" href="#header-img"></div>
    </nav>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" placeholder="email" type="email" name="email">Enter your email address here</input>
      <input id="submit" href="https://freecodecamp.com/email-submit" type="submit"></input>
    </form>
  </header>
</html>

This is my code so far. The hint says, " Each .nav-link element should have an href attribute."

I don’t see where I went wrong. Can you point me into the right direction?

2

They say each. Not just one.

3

I have 3 .nav-link elements and all three have an href attribute.

4

Hi! In future please use the ask for help button, it will appear after your code fails a few times and looks like a question mark.

It will contain a link to the lesson, your formatted code and browser information.

5

As for your code, divs cannot have a href value. These need to be anchor elements.

<div class="nav-link" id="video" href="#header"></div>
      <div class="nav-link" id="video" href="#nav-bar"></div>
      <div class="nav-link" id="video" href="#header-img"></div>

Also you have syntax errors in your code. There should be a <head> and <body> element in this code. Your <header> element has no closing tag.

I would run your html though this code validator.

6

My apologies. But I tried, It wouldn’t let me even open the forum through the help button.

7

Can you explain what you mean by ‘wouldn’t let me’? Was there an error message of some kind?

8

No error message. I clicked on it and nothing happened. It might have been my laptop. I just had to restart for an update. Thank you for the help. your advice and the html validator, I see so many places I went wrong.

9

One more question. To make sure my #nav-bar element is at the top of the viewport, I should use Style.CSS right?

10

Yes, you need to use css code to make the navbar stay at the top of the page.

11

Thanks. That’s all I needed to know.

1 Like