Skip to content
Submitted 4 months ago

Responsive landing page

P
mpujazon•250
@mpujazon
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Next time, I will try to write cleaner CSS code and use clamp() for font sizes.

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

I had a few problems positioning the header images using the position property in CSS. Eventually, I used margin to avoid overflow and layout issues.

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

I appreciate any feedback you may have. Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    laurice-dev•300
    @laurice-dev

    You're doing a great job! Kudos! Just a couple of notes that may be helpful. Your HTML markup looks great. A great element is the <picture> element. It allows us to change the header image at a certain breakpoint. This is super helpful when we need switch pictures.

    Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture

    #CSS Great use of custom properties for your colors and typography. The only thing I would re-examine is your breakpoints. I feel like the hero-image switched over to the mobile-hero-image a bit too soon at 1267px.

    Keep up the great work! We are in this together!

    Marked as helpful

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