Product Landing By Isaac

HTML-CSS
#1

Hi everybody,
Done doing my product landing practice but I ran into a lot of problems that I couldn’t really solve. I found other ways around them but I think if I understand what’s going on it will make things easier and better
Here is the page I created: https://codepen.io/ZakOnif/full/MWbQPpV

I left different comment in my CSS part. The main was that when I use flexbox I can’t set justify-content to space-between… I tried that with my navBar but it didn’t work… Also tried it somewhere else and same thing and I don’t see what I am doing wrong. Please take a look and give me some feedback. It is a little messy, I am sorry​:grimacing::grimacing:… Also how can I design the button tag. I am probably just sleepy and I didn’t spend a lot of time trying to figure that one out.

#2

Hi @ZakM1, congrats on finishing your product landing page. You fulfilled all the user stories :muscle:


 /*When I create a flexbox in the header, the navBar goes behind the logo even when I use justify-content: space-between
  display: flex;
  justify-content: space-between.... Can't figure out what the problem is*/

The navbar goes behind the logo because the logo id attribute header-img has an absolute position.
Setting an element’s position to absolute tells your browser to fix it’s position on the page. This takes it out of the normal flow of the document. As a result, ‘other elements on the page are positioned as if it (element with absolute position) did not exist.’ This is why your navbar goes behind the logo. You can read more on CSS position here (MDN Web Docs: Position).

I hope this helps.

1 Like
#3

Oh I see. Thanks @dewslyse