Meet landing page using mobile first workflow

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

I got to learn about object-fit, object-position, block-size property for images. It helped me a lot to layout images and match the design for all the layouts.

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

I had hard time figuring out how to lay the hero and footer image. In the hero image I tried different things,

• I use transform scale, translateX to move the images in hero section
• It worked fine, but in CSS I have to add lots of calc() functions and tweak to pixels to match the design. I since I used scaling it messed up with the horizontal size, so I have to use overflow-x hidden.
• So, I had to redo it using object-fit and object-position property. And it fixed the overflow issue and I didn't have to tweak the pixels to make it work.
• And then the footer image messed up. I've used object-fit to cover, so the image zoomed up. Then I found another solution to use block-size to fit the image aspect ratio.

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

Open for feedback or comments