Submitted 17 days ago

Meet landing page - HTML, SCSS, RWD, flexbox, grid layout

webdevbynight• 240

@webdevbynight

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Meet landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learnt the image-set() CSS function to serve several resolutions of a same background image. For the next time, I will try to create a mixin or a Sass function to manage the image-set() content to avoid some repetitions.

What challenges did you encounter, and how did you overcome them?

The Figma file does not separate the green filter from the background image on the footer. I overcame by using the image located in the starting folder and applying a background colour on a pseudo-element covering that image.

What specific areas of your project would you like help with?

No particular help requested.

Community feedback

Ian Parker• 180

@i-prkr

Posted 9 days ago

Thanks for your solution! I enjoyed looking into your Sass implementation and different approach, the solution looks really nice. Getting more familiar working with images it was helpful to see how you have inserted the images in the solution. I took the chance to look into image-set() so thanks for that!

I noticed that the images in the photo gallery zoom in and change shape particularly in the larger medium screen sizes, was this intentional? I think it still looks great - but for my own undestanding is this coming from using block-size and object-position on the images to make them uniform given they are different sizes and shapes? Rather than letting the grid size them automatically?

webdevbynight• 240

@webdevbynight

Posted 8 days ago

@i-prkr I did not use object-position, but object-fit. I used block-size to make images equal in height. I just adjusted the object-fit value for the images not to seem cropped on larger screens.

I hope I have answered your questions.

Ian Parker• 180

@i-prkr

Posted 8 days ago

@webdevbynight Thanks for your reply!! :)

Please log in to post a comment

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