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

✨Social Proof Section -

MaryF 350

@Janselin

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone and thanks for checking on this solution. I had fun making this one, where I put on practise my flexbox skills.

🟣I would like some feedback about it and how i can improve flexbox. I know there are many other properties , I feel im using only the basic ones.

🟣I need help with the background image, I can't make it on the top and bottom properly. I always stuggle with bg sizes. Any tips?

thanks!

Community feedback

Luka 820

@LukaKobaidze

Posted

Hello!

For background images, you can use position: absolute and top: 0, right: 0, bottom: 0, left: 0 and z-index properties.

For background image on the top left corner, add following properties:

position: absolute;
top: 0;
left: 0;
z-index: -1;

And for background image on the bottom right corner:

position: absolute;
right: 0;
bottom: 0;
z-index: -1;

If you aren't familiar with positions and top, right, bottom, left properties, check out this source. There are also lot of other sources about positions on the internet that you can search for.

I used z-index: -1, because without it, images would be on top of the content, and z-index: -1 puts images behind it.

Hope this helps xD

Marked as helpful

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