Responsive Landing Page Using Flexbox
Design comparison
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
- @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 rightpadding
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 - @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 GitHubJoin 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