Meet landing page using both grid and flexbox

Community feedback

• 

  Matheus Fernandes•340

  @xtirianPosted over 1 year ago

  Hey friend! Hope you are doing well.

  I don't have suggestion, just want to ask you something. I really liked the way you solved the footer part. Can you explain me what is the logic?

  footer::before {
      content: '';
      position: absolute;
      background-color: rgba(77 150 169 / 0.9);
  }
  

  Basically you create an empty content before the footer with the background-color, am I right?

  But, do you know why this content created before the footer isn't covered by the footer img?

  I had to create a div inside the footer to be like a colored glass between the footer img and the content.

  0

  ---

  

  Sazzadur Rahman•80

  @sazzad88Posted over 1 year ago

  @xtirian Hi

  footer::before {
      content: '';
      position: absolute;
      background-color: rgba(77 150 169 / 0.9);
      inset: 0;
      z-index: -1;
  }
  

  Here the magic happens mainly for position : absolute which takes this component out of document flow. Then then by using inset we are covering whole container.

  Hope this helps

  2

  

  Prince Awuah Karikari•160

  @PRINCEKK122Posted over 1 year ago

  @sazzad88 thanks for sharing this, I usually used the top, left, right and bottom to cover everything.

  This is really cool!

  0