Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Meet landing page using both grid and flexbox

@sazzad88

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. What size of image should be considered for website. Generally big size images are used in figma but they are not very good to be used in website.

  2. Should we use multiple image for different screen size ?

Any other suggestion for better practice is appreciated.

Community feedback

@xtirian

Posted

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

@sazzad88

Posted

@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

@PRINCEKK122

Posted

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

This is really cool!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord