Skip to content
Submitted 9 months ago

WorkIt Landing Page

Nick•260
@nn-code80
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Workit landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

This was my first time using Figma, so understanding the program and how to asses dimensions was challenging. Also, the curves in the design were tricky. I didn't see any SVG files for the curves, so I made my own using Illustrator and attached them using the::after pseudoelement. Feedback is always appreciated. Thanks!

Community feedback

  • Daniel Dantas De Carvalho Bezerra•170
    @DanielDantas0921Posted 7 months ago

    Congratulations on your code. I did this challenge and used 8 media. You only used 3. Then I'll stop to study your code to improve my skill.

    0
  • Steve Xero•210
    @stevexeroPosted 9 months ago

    Very nice! Did you use Chrome during your development? I read on here in the past that FireFox, for whatever reason, actually gets the site closer to the design and reflects in the above design/solution slider.

    For the curves at the bottom of the sections, I used the clip-path CSS property. 'clip-path: ellipse(120% 100% at 50% 0%);'

    I had to adjust only the horizontal radius <rx> (the first number) during the responsive development. It basically adjusts the width and will smooth out the curve depending on what you need.

    It's definitely something (along with SVG design) that I'll be diving deeper into!

    Cheers!

    0
    Nick•260
    @nn-code80Posted 8 months ago

    @stevexero, thanks! I did use Chrome Developer. I tend to use that the most, but I will check out Firefox. Thanks for the tip. I'm still finding it tricky to get the exact dimensions. I never considered the clip-path property, but that's another great way of doing it. I'm going to consider that in the future. Your design came out well—pretty much a pixel perfect match. Good job.

    1
    Steve Xero•210
    @stevexeroPosted 8 months ago

    @nn-code80 Yeah I have no idea why Chrome and Firefox would be different during development, it's something I'm going to look into!

    I typically use Figma to get my dimensions by drawing rectangles all over the place lol. It helps me see which are related so I can then group them under common variables.

    It's been interesting to see how different developers approach the curve and I've learned that there are so many ways to tackle any one thing!

    Thanks so much for the reply and kind words!

    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