Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Workit Landing Page

P
gfunk77 1,200

@gfunk77

Desktop design screenshot for the Workit landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

P

@DanielDantas0921

Posted

congratulations on the code. It was the cleanest code I've ever seen. It was much better than the code I made

1

P
gfunk77 1,200

@gfunk77

Posted

@DanielDantas0921 Thanks!

0
P
Steve Xero 210

@stevexero

Posted

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
Discord logo

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