Design comparison
Solution retrospective
My approach for the curved lines in the purple and pink sections was to make separate svgs and attach them to the bottom of the sections.
If there is an easier approach, please comment. I would love to learn an easier and cleaner way.
I ran into problems bundling with parcel. On local, the svgs were fine but in production they weren't spanning the entire width of the viewport. To solve this, I removed the width and height attributes from the svgs and added inline styles. With these changes the build was successful.
Feedback is appreciated, thanks!!
Community feedback
- @DanielDantas0921Posted 7 months ago
congratulations on the code. It was the cleanest code I've ever seen. It was much better than the code I made
1 - @stevexeroPosted 8 months ago
I used the CSS propert 'clip-path' in the same selector as my background-color, like so: clip-path: ellipse(120% 100% at 50% 0%);
I had to adjust the horizontal radius <rx> for each media query.
While it was kind of a headache, it was fun to learn about this!
1
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