Design comparison
Solution retrospective
Most proud of the curves.
Next time I would create wrapper elements for the contents of each section instead of relying on padding. This would make it easier to control the elements.
What challenges did you encounter, and how did you overcome them?The curves were especially difficult. I encountered them through brainstorming, ChatGPT, and a lot of trial and error. Part of the difficulty is that there are some many ways to approach the problem.
What specific areas of your project would you like help with?What do you think is the best approach for the curves in this case and why?
Community feedback
- @PeterBachman100Posted 7 months ago
Thanks! I started with https://www.cssportal.com/css-clip-path-generator/, but mainly it took a lot of experimentation. Once I realized the curve height was always 4.7% of the view width, I was able to set the height of a ::before pseudo-element to that height and play around with the numbers until it fit just right.
0 - @MorganEroPosted 7 months ago
Fantastic job! Is there a tool you used to create that clip-path ellipse? I experimented with clippy but did not see a way to create the bottom without affecting the top. I still need to explore clip-path more.
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