Submitted almost 2 years ago

Workit landing page with HTML & CSS

Jeff Lang•340

@jefflangtech

A solution to the Workit landing page challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Josh Javier•930
@joshjavier
Posted almost 2 years 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
Dor Shani•150
@dors001
Posted almost 2 years 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!!

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