Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Eu estou em dúvida de como fazer esse passo: 9. Each .nav-link element should have an href attribute. Qual é o href e se dentro da ancora mesmo ou dentro do button.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Product Landing Page</title>
  </head>
  <body>
    <div>
      <header id="header">
        <img src="https://product-landing-page.freecodecamp.rocks/" id="header-img">
        <nav id="nav-bar">
          <a href="https://product-landing-page.freecodecamp.rocks/">
          <button class="nav-link"></button>
          </a>
          <a href="https://product-landing-page.freecodecamp.rocks/">
          <button class="nav-link"></button>
          </a>
          <a href="https://product-landing-page.freecodecamp.rocks/">
          <button class="nav-link"></button>
          </a>
        </nav>
      </header>
    </div>
  </body>
</html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi,
the href attribute is given only to anchor elements. So when you use your anchor element, make sure to add the class of nav-link to them as well, and don’t use buttons.

3

I don’t understand how to structure this part, because for me href, it’s only “<a>” How I strutucture this part.

4

you need to give href and class attributes to a

5

inside the opening tag of your anchor element <a>, you can add both the class and href attribute. The syntax for both of them is the same.

6

Tell us what’s happening:

Eu não estou conseguindo fazer href adequado para o link das etapas. Alguém pode me ajudar . Eu não estou conseguindo fazer de acordo com essa verificação: 10. Cada .nav-linkelemento deve ter um link para um elemento correspondente na página de destino (tem um hrefcom o valor do id de outro elemento, por exemplo #footer).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <header id="header">
        <h2>Product Landing Page</h2>
        <img src="https://product-landing-page.freecodecamp.rocks/" id="header-img">
        <nav id="nav-bar">
          <a href="#Contact" class="nav-link">Contact</a>
          <a href="#about" class="nav-link">About</a>
          <a href="#features" class="nav-link"  href="features">Features</a>
          </nav>
      </header id="header">
    </div>
    <div>
      <h3 id="#contact">Venda do produto</h3>
    </div>
    <div>
     <h3 id="#about">Pré-Venda</h3>
   </div>
   <div>
     <h3 id="#features">Pós Venda</h3>
   </div>
  </body>
  <footer>
    <div id="#footer"></div>
  </footer>
</html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

7

When setting the id of an element, you shouldn’t use # in the beginning of the id. You only add # when you’re linking to section in the page, using it’s id. For example href="#Contact" is correct, but that is looking for an element with the id Contact. You have #contact on your id which is not the same. Also don’t forget about the capital letters.