Frontend Mentor - Workit Landing Page
I have searched for things (and searched for things) to fix two issues with this project.
1) the bottom of the top (dark) portion should be curved, as in the example and
2) the image should span two sections, as in the example.
I've looked around at and/or tried clip-path and border-radius and possibly more for the curved bottom. I tried absolute positioning for the image, but that extended the top for the whole length of the image.
https://res.cloudinary.com/dkxyiogil/image/upload/v1715807255/image-founder_s5sfn5.webp
24 Replies
This should help:
https://codepen.io/eioluseyi/pen/zYQvdWe
Thank you for the response and example! I will have to look over it and research it a bit to figure out what all of it means and how it made the curve happen! lol. Thanks again!
The curve in EIO's solution is from border radius on a pseudoelement. It's also possible to use a radial gradient to achieve the same effect.
Thanks! I looked into it some and it seems like it's a pseudo element with a circular type border radius but that is a LOT bigger and placed behind the other container? That's kinda what it seemed like to me. I haven't dived back into that project again yet. How would a radial gradient work?
I don't see a curved border in this example..
Interesting. Which browser are you using?
CHrome
*Chrome
I just noticed the image is near the bottom. Do you have the code at the top? I didn't make it fully responsive for low height. Codepen has an option to put the code on the side.
I have my code on the left
Weird! It's visible in Firefox
This is how it looks in Chrome for me.
Is the image also near the bottom of the screen when you see it in Firefox?
Well, this is a little crazy. Here's how it looks for me in Firefox
What is your screen resolution?
I can get it to look like that if I zoom to 200%.
Anyway, I wasn't trying to make this fully responsive. The point was that a curve could be made with a radial gradient.
1920x180
What is your browser zoom level?