Skip to content
Submitted over 1 year ago

Workit landing page with HTML & CSS

Jeff Lang•280
@jefflangtech
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

I used the CSS property clip-path like so:

clip-path: ellipse(60% 55% at 50% 45%);

to create the curves at the bottom of the hero and main sections. Any other ideas of ways to do that? It reminded me of making an layering shapes in the canvas, so it wasn't totally out there, but also not as easy as I anticipated.

And what about grid vs flexbox for the numbered cards section? If I did it again I'd probably used grid to have more control over the layout but I ended up sticking with flex even though at some screen widths it does things I don't like as much.

Community feedback

  • Josh Javier•830
    @joshjavierPosted over 1 year ago

    Hello Jeff 👋

    I think using clip-path is a clever way to implement the curve dividers. Another approach is to use inline SVG, which is what I did in my solution. Both approaches look similar, although the "div with clip-path" uses less markup, so I might try this in a future solution ;)

    As for using grid vs flexbox in the numbered cards section, I think either is fine for this particular layout. Personally I used flexbox as well. I did notice some overflow in the tablet view (https://ibb.co/wWp1w3H), which can be fixed by adjusting the position of the pseudo-element:

    .card-title::before {
/* ... */
left: 4rem; // from -1rem
}

    Hope that helps, happy coding!

    Marked as helpful
    0
  • Dor Shani•150
    @dors001Posted over 1 year ago

    At first i used clip-path as well, but then i had to fiddle with the other elements a lot to make it work. finally i just used border-radius

    .block__rounded {
border-bottom-left-radius: 100% 30%;
border-bottom-right-radius: 100% 30%;
}

    got a pretty good results with a lot less fiddling. hope this helps, have fun!!

    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