Skip to content
Submitted 12 months ago

Responsive Landing Page Using Flexbox

Alessandro Chrystian•90
@alessandro-chrystian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I made it with Mobile First design.

I had some difficult to make the curved section of my footer and I did it with HTML using the tag "img", but I tried to make it work with background-image in CSS and I failed it, if someone knows how to do that please tell me here so I can learn. Feedbacks are welcome!

Community feedback

  • jilenski•200
    @jilenskiPosted 11 months ago

    I also had a hard time with the section backgrounds.

    For background-image in CSS try to use pseudo elements ::before and ::after.

    Also check this out for the content background that will not overlap with top and bottom svg background-clip: content-box. You'll just need to experiment with the right padding to fit with the section content.

    I too was beginner in this and my solution still has some minor errors. I hope this community will help us grow. :smile:

    0
  • m1mmseen•460
    @m1mmseenPosted 12 months ago

    Hej, your solution (I only viewed it on mobile yet) looks very good 👍 I wonder what’s your problem with background-image. Can you provide your code, which failed?

    I didn’t use it before but what’s about masking or svg with paths? Best greetings🖖🏼

    0

Please log in to post a comment

Log in with GitHub

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