Product Landing Page - Build a Product Landing Page

HTML-CSS
1

hello, i have a problem with the nav link i have the href attribute but its not working and idk how to do the flexbox please help me, thanks :grin:

  **Your code so far**

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<header id="header">
  <meta charset="UTF-8"></meta>
  <link rel="stylesheet" href="styles.css">
  <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
  <nav id="nav-bar">
    <nav class="nav-link" href="#features"></nav>
    <nav class="nav-link" href="#how-it-works"></nav>
    <nav class="nav-link" href="#pricing"></nav>
  </nav>
</header>
<body>
<iframe id="video" src="https://youtu.be/y8Yv4pnO7qc"></iframe>

<form id="form" action="https://www.freecodecamp.com/email-submit" >
<input id="email"placeholder="enter your email address" type="email" name="email"></input>
<input id="submit" type="submit"></input></form>
</div>


</body> 
</html>

/* file: styles.css */
body{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content: center;
align-items:center;
}


  **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

What do you want your nav-link to do that it is not doing right now?

3

the step is asking me to add a href attribute which i have but my code isnt passing for somreason

4

Do you mean this part is not passing?

  1. When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page
5

yes that part and the flexbox

6

Have you tried clicking the links to see if they are working?

If you look at your links, what do you think the test is asking you to do (other than just create a link)?

7

i have tried copying the links in the page i was given but its not working im lost

8

Okay. You should not copy. As you see copying does not help.

What does a link do?
(Why do people make links?)

9

to move from one page to another ?

10

Yes. In this case though, the links are “internal links”.
We know this because the test says:

So these links should take us to a section inside your page. Specifically each link should link to the corresponding or matching section.

So do you think your links are doing that?
What should you do next?

11

take the links from the corresponding page and put them in a href attribute in the nav link ??

12

You already have some links. They don’t work though right?
They need somewhere to go.
So create the required sections and give them the id that matches the links that you have in the navbar.

13

which is an a element right ?

14

ok no i understand now a section element thank you

15

but what about the flexbox

16

The thing to remember about flexbox is that only the direct child elements of the flex container will become flex items. You’ve made your html body a flex container, so you need to thing about which child elements will be affected.
You can create more than 1 flex container if needed.

1 Like
17

Hi, you should put some into de nav element like "a or li " element, after you have to add the href with the ID where you want go to.
For example:

<nav> // this wrapper for the links or content text
<ul> // this element is for the good pratices, but not is necessary
// then, into <nav>, in this case <ul> you put the text with href
<a href="your link or your section page (#form)">
</ul>
</nav>
1 Like
18

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

19

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