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?
Oh man! It was at 110% for some reason. Now, I can see the curve at the top, but the image is still down at the bottom
At any rate, thank you! lol
https://codepen.io/chooking/pen/rNgxLwW
I made some changes. Does it work now?
I actually forgot to mention that there are several ways to achieve this.
I just used the first one I thought of.
Surely does!
Thank you for taking the time to answer! π
Okay, so @EIO - any suggestions on the best place to go to learn what all of that CSS means?
Also, one of the things that gets me about this challenge is that it's at the "newbie" level on Frontend Mentor. I don't think very many newbies would know how to achieve that curve using these methods. π€·ββοΈ
Hmm..
So, now, I realize that I could have made the code simpler (avoiding nesting, logical properties and maybe
rem)
However, I think it's easier for you to take it step by step.
So, whenever you encounter something you don't understand, look it up on MDN or W3Schools or any other place you can.
Of course, that's apart from going through video tutorials and courses.
So, for starters, you can just highlight a number of things you don't understand in the code and I can explain
Well, I've noticed that they do this a lot and I've come to terms with it.
The scale is pretty much defined by them, so they can do what they want, I believeOf course they can π
So, to start, here is this bit of code
background: radial-gradient(rgb(40, 0, 70) 50%, transparent 50%) 50% -100px/
1600px 400px no-repeat;
I've seen radial-gradient before and used it a couple of times, but I've never seen it with so many values. So, where do those come from and how did you know to use them?That's actually @ChooKing's implementation π
But let me try to explain it. π
That's a short form for the
background properties.
The radial-gradient() is just the value of the background-image
Then there's the background-*:
-position-x
-position-y
-size
-repeat
All those properties were defined by that single line, background: ...;
One neat thing, just like I did, is to inspect the element where the property is being used and see how the devTools handles the properties.
You can then expand those that have been done with the short form to see their actual implementationAs EIO explained, some of that code was for background and not the gradient itself. The gradient's parameters are contained within its parentheses. The parts include a color in rgb format and percentages to specify the location of the stops. The same percent is used for both the rgb color and the transparent to have a sharp division instead of a blur. When transitioning between two non-transparent colors, it is usually necessary to add a fractional offset to intentionally create a very small amount of blur. Without that, the edge may appear a bit jagged, but that usually isn't a problem when one of the colors is transparent.
Oops! My bad! π
Okay. I'm going to need to read that through a few times. (I'm very much a visual/example learner.) I'm not to a point yet where I remember to just go look at the dev tools first! I think it's because I still really don't know how to use them properly. I know how to do a few things and have watched some videos. So, thank you for that reminder!! And thank you both for discussing. I appreciate it very mucn!
*much