Can I get help with my product landing page?

Hello
I’ve been able to complete 13 out of 16 tasks of this project, and I need the last 3.
This is what I’ve done so far and this is the project I’m supposed to complete

I’m supposed to have my nav-bar on the top. I thought I did that, but when I run the tests it says I haven’t done that. Is it because I use flex-box?

I’m also supposed to have a submit input with corresponding id=“submit”. I’m confused with this, because I thought I didn’t have to add ‘input’ to a button; example,

<button type="submit">Submit</button>

Where would the input part come in? Or is it supposed to be somewhere else in the form?

Lastly, I’m confused about using media queries. I tried going back to freecodecamp lessons, but I still can’t use queries in CodePen or Visual Studio

HI @maameyaatwumasi!

User Story #11: Within the form, there is a submit input with a corresponding id="submit" .

Right now you have a button with type submit but the test is looking for an <input> with the id of submit.

User Story #13: The navbar should always be at the top of the viewport.
You need to have the navbar fixed at the top of the page
postion:fixed;

User Story #14: My product landing page should have at least one media query.

This is a media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This part tells the computer that the background color for the body will only be lightblue if the width of the page is 600px or less.
@media only screen and (max-width: 600px)

The light blue background color will not show up if the width of the screen is more than 600px.

Media queries are used to help make sure that the design looks good on all sizes like phones, tablets and laptops.

1 Like

Thank you so much! This helped me complete the project

1 Like