Product Landing Page. I need for your help. Please, help me!

[serikbayevkalzhan0]

https://codepen.io/Kalzhan/pen/xxqOKWo?editors=1100

[cacious8]

These errors are pretty self explanatory if you understand what you are doing and have gone through the tutorials. Do you mind being specific about what is bothering you? It could help us answer you question faster.

[serikbayevkalzhan0]

I can see at least three clickable elements inside the nav element, each with the class “nav-link”.

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

I can watch an embedded product video with id=“video”.

The navbar should always be at the top of the viewport.

[cacious8]

I have taken time to review your code.

Firstly, the requirement is to have atleast 3 clickable elements that each have a class called nav-link.

Therefore, you should put nav-link inside each a tag instead of the nav tag.

Something like this:

<nav id="nav-bar">
      <ul>
        <li><a href="#featured" class="nav-link" id="nav-link">Features</a></li>
        <li><a href="#video" class="nav-link" id="nav-link">How it Works</a></li>
        <li><a href="#pricing" class="nav-link" id="nav-link">Pricing</a></li>
      </ul>
    </nav>

Next, I think the second problem will be solved once you fix this one.

Then you should put the #video id on the iframe element and not on the section element.

lastly, your header element with id of #header or one of its childen should have the css property:

position: fixed;

for it to float at the top of the viewport.
e.g:

header {
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
}

Hope that solves all your problems

[serikbayevkalzhan0]

Thank you very much, but I still have two unresolved errors. Can you help again?

[cacious8]

Sure, are there any problems left after this? Please let me know, I have edited the answer to cover all your issues.

[serikbayevkalzhan0]

The navbar should always be at the top of the viewport.

#header or one of its children should be at the top of the viewport : expected 32 to be close to 0 +/- 15

[cacious8]

I have found the solution, add top: 0 to your header element. Check the marked solution, I have edited it to reflect the correct answer.

If there is anything left, please let me know.

[serikbayevkalzhan0]

Thank you for your help! Resolved.

[cacious8]

You’re most Welcome.