I need help with my product landing page

Tell us what’s happening:

the form element is not in the right place, the nav bar is not even fixed, i am unable to place the image in the right place.

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Build a Product Landing Page

Link to the challenge:

There is a header section outside of the body, but it has to be IN the body (like everything).
And you shouldn’t use display:block and position:fixed lines, if the content is not… working :smiley:
Block elements starts on a new line, and takes up the whole width.
Fixed element is positioned relative to the browser window.
So this two not gonna work for you.

If you delete the block displays and positions, and nest the header section inside the body I think it will be right.

Hint: before you try to style the page, you should create the content first, and after the CSS.

i brought everything down, and did it again. I don’t know why the video player is shrinking, the nav link is also out of order or something, the “get started” button is not centred. i am not getting the product menu correctly. is the padding on the product description also not too much ?

Tell us what’s happening:

I don’t know why the video player is shrinking, the nav link is also out of order or something, the “get started” button is not centred. i am not getting the product menu correctly. is the padding on the product description also not too much?

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Build a Product Landing Page

Link to the challenge:

There are errors in your HTML code @lekan.

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

Don’t try and replicate the sample code. The samples are just one way to do the projects. The instructions say to make one that functionally similar and give it your own personal style.

Also, make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

thank you, i am unable to implement the media query. when i zoom in, most of the text go missing, the header covers it, i dont know how to reduce its size when it is in mobile view. the list item too is acting like the nav-bar. i not get the user story for the button what do i do there

i am trying to resize the screen for mobile but the nav bar is not responsive.

please i need help with user story 5 and 6 https://codepen.io/Aqua7/pen/NWbwZrJ?editors=1000

so for 5 and 6, first don’t worry, its all semantic errors. Your code has nothing wrong.
But what they actually want in story 5, is let your nav-link class be the clickable <a> elements.
Example instead of:

<div class="nav-link">
   <a href="#id">go to id</a>
</div>

they want:

<a class="nav-link" href="#id">go to id</a> 

For story 6 it is similar, instead of #video being on a wrapper, they want it on the <video> or <iframe> element itself.

It may help in the future to read the error message a little further than the first line. For example, your story 5 error says: “Each .nav-link element should have an href attribute : expected false to equal true”.

This message is pretty clear on what the problem is, and fixing it becomes not that hard.

thank you, it fixed it