I spent more time on developing the design. I came up with the idea to make ticket shapes for the sections and the navigation bar, and splitting the diagram into 3 as I needed left, right, and middle sections on my design. I created them using flexes and a flex container, and I did some debugging to display content in them.

After doing the split, I created ticket as a css class with a clip-path class named cut-corners to get a basic ticket shape which I did get. Afterwards, I tried making a bigger copy of that ticket that would sit behind the smaller one to give a sense of a border, but I struggled on that for some time, because the solution I tried with .ticket::before didn’t work as it got its clip-path directly from ticket, thus making their dimensions same, and making the bigger one disappear, so I thought of doing it with a container. I created ticket-wrapper, and turned .ticket::before to ticket-back, did some splitting up in html, and I got my desired look on the page.