design help | Scrimba | Page 1

barren zealot Dec 21, 2023, 6:58 AM

#

how to achieve this design

severe light Dec 21, 2023, 11:37 AM

#

For the track, I'd use a bunch of nested rectangular div's using ::before and ::after to create the half circles.
For the runnings dots, if you have to move them with JS, that's above my skillset 😅

barren zealot Dec 21, 2023, 1:47 PM

#

#

how to align these details to the name ,speed start ,time end time, Usain bolt 60km/h - - on same line

topaz stirrup Dec 21, 2023, 6:14 PM

#

I guess one easy way would be to use <table> and bootstrap
But you could also use display: grid or display: flex with flex-wrap: no-wrap

silver pewter Dec 21, 2023, 8:55 PM

#

I was wondering a similar thing earlier today with lining up input boxes. All I could think of was a table. I decided to skip it because it seemed like a lot of work for something really minor in my case.

slender slate Dec 21, 2023, 10:56 PM

#

I would personally use a canvas for the dots and path and move them around the canvas. Try to use d3 js for that, I think scrimba has a free course how to use it.
Regarding the second picture, just use a table or grid.

barren zealot Dec 21, 2023, 11:53 PM

#

grid worked out 👍

barren zealot Dec 22, 2023, 1:44 AM

#

how to make start race button text straight