Guidance To UI Design
I am Trying to replicate this UI. I have tried to replicate them but the steps are not aligning properly. how can I align them . , Can you please tell how can I Do it . Please find the codesandbox link : https://codesandbox.io/p/sandbox/floral-cdn-7n2c7t?file=%2Fsrc%2Findex.css%3A9%2C2
24 Replies
I'm not sure if it's just for me
but I can't access the sandbox
ohh, let me put in codepen
give me a minute
maybe you missed something in the link? try to copy and paste it again
https://codesandbox.io/p/sandbox/floral-cdn-7n2c7t?file=%2Fsrc%2Findex.css%3A9%2C2
can you try again
it opened for me
yeah it's just for me then
let me put in codepen then
can you check this
sorry for delay
so the reason they are not aligned is because you are using two seperate containers that none of which know the height and content of the other.
I tried this solution: Wrap each step with its circle together in one wrapper. so it be like this:
step-desc
----step wrapper (3 wrappers in your case)
--------Circle
--------Step Content
I made this codepen for it, I'll try to add your paths as soon as I can have the break 🖖🏻
but overall I'm thinking of using it as ::before inside each circle
ok i will see, with your code, if we try to add before to generate the lines for the step, wouldn't there be space between them as we have grid gap?
yes true that, we can use padding-bottom for each step but there's another thing >> it won't take the full height of the step because we sat fixed value for the circle.
so you will need a different approach for it :PepeHmm:
🥺, yaa true, thinking what solution will work
Once i find this, I need another help, These steps are categorized into three sections, when user scrolls down, the section should be scroll pinned and scroll through these three sections. I have search GSAP solution for this, with gsap entire section gets scrolled, but i want to move certain parts, thinking how i can approach it. I have attached the video for it
Heya stealthy! Rather than having two separate grid containers, you could have one where each row contains a circle and the content. The grid columns could be width of largest circle / 1fr. On each row with overflow hidden, except the last, you could have a green line going down to the next item that would touch the next circle ;9
let me try and get back😉
https://codepen.io/naveen570/pen/VwgQRMw?editors=0110
is this good enough? any improvements? can you please confirm @Mimo Duo
Niceee!! That looks sweet! If you wanna go further you could change the html to be more semantic by converting it to an ordered list 😉
Sure i would 😁
Do you have any idea on this @Mimo Duo / @~MARSMAN~
I would have the right side be position: sticky / display grid / grid template areas "stack" with each child grid area stack, when the numbered section is active and in view, id apply a class to that section and the matching right hand section. Then id change scale/opacity of each icon on the right side!
Tons of ways to do it! I always try to leverage CSS over JavaScript.
@Mimo Duo will this work when the user scrolls i need the container to get pinned and section should get change as user scrolls down or up
Very late but yup!
no prob, we are in different timezone😉 , can you give a sample approach, not able to get how to start it