All solutions

In terms of design, I still don't understand how to make those custom checklist buttons and how to make the border radius of the first item rounded. Any help/suggestions/comments are very welcome

I managed to make the features work, but I still don't understand how to make the code HTML Semantics. I'm also not sure if there's a better way to position the "SPLITTER" text and to make number of people input form border red as I put 0 number (it only turns red after I click somewhere outside the form, I think it's overridden by input form focus default of the form control). Any suggestions are definitely welcome

I don't know if it looks exactly the same as the preview. I'm still unsure if there are better ways than to use flex all the time. So any suggestions/improvement tips are very welcome, especially the dekstop vs mobile display of the design. I'm also not sure of the correct padding and font size of the texts

I find difficulties on controlling the left and the right gap of the QR code image and the white space. That resulted in me not being able to make a more similar looking website compared to the design, as I feel that aforementioned gaps in the design are smaller than the one I made. Instead of minimizing those gaps, I used paddings to push the image lower, to match the left and right gaps which I couldn't control. Feedbacks are very appreciated on how to solve it