Build a Product landing page(navbar )

Build a Product landing page(navbar )
0

#1

Hi guys,I have been working on the product landing page,but I cant pass the text because there are 2 stories I cant work it out.

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

  2. My product landing page should have at least one media query.

https://codepen.io/HannahJiang/pen/ZMBByR

Thank you very much.


#2

For 1, your navbar isn’t at the top, so it certainly isn’t always at the top. First you need to move it to the top of the page, and then you need to make sure it stays at the top, even when you scroll down. (Try looking into position: fixed to use in the CSS for the navbar.) This is what they mean by the top of the viewport, no matter where you are on the page the navbar should still be visible at the top.

For 2, well, you aren’t using any media queries! These are used to style the same page differently depending on the size of the display it is being viewed with. See here for some more info and examples using them.


#3

Thank you very much!I worked it out! https://codepen.io/HannahJiang/pen/ZMBByR