In this article, we are gonna build a curved timeline for your website which you can use later on in your portfolio to display your work history or...
For further actions, you may consider blocking this person and/or reporting abuse
Nice idea @j471!
Using your inspiration I create my own version. I use the pseudo element to create the border, but just for 50% of it. After using negative margin looks like a curved line.
And here the code: codepen.io/elalemanyo/full/QWqydLp
Thanks again for the inspiration 👏
keep it up :) 🔥
Nice work!
Though it looks a pixel out on my device, where the borders overlap.
dev-to-uploads.s3.amazonaws.com/up...
fix:
.card:nth-child(odd)::before {
left: 0px;
top: -5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
Ah, it is only now that I realise that the original example was using 4.5px.
Jatin, what was the reason for this? What is your default browser?
Well, I am using Edge browser, It was only a pixel out in the mobile devices so I fixed it with the
@mediaqueries. you can see the updated version now. Thanks to all of you guys for pointing it out :)Chrome :)
Cool concept this is an interesting way of getting it to work.
Do you know how ot make a moving timeline like this one?crustac.fr/en/home/
It's an SVG path that's animated on scroll.
css-tricks.com/scroll-drawing/
Awesome 🤩