Movie Night Ticket
A black cinema ticket with notched stub, gold seat numbers and a rotated time on the tear-off.
Preview and code
index.html
<div class='tk'><div class='tk-m'><small class='o'>ADMIT ONE</small><h4>Orbit Station</h4><p>Harbour Cinema</p><div class='g'><div><small>SCREEN</small><b>Screen 4 Β· IMAX</b></div><div><small>SEATS</small><b class='y'>G12, G13</b></div></div><div class='t'>π 7:45 PM π Sat, 7 Jun</div><small class='id'>TKT-00421</small></div><div class='tk-s'><span>7:45 PM</span></div></div>
styles.css
.tk{position:relative;display:flex;width:min(420px,94%);margin:auto;background:#0b0b0b;border-radius:16px;font-family:Inter,Arial,sans-serif;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}.tk-m{flex:1;padding:18px 20px}.tk small{display:block;font-size:9.5px;letter-spacing:.08em;color:#777}.tk small.o{color:#d97706;margin-bottom:8px}.tk h4{margin:0;font-size:22px;font-weight:700}.tk p{margin:4px 0 14px;font-size:13px;color:#7a7a7a}.g{display:flex;gap:30px;margin-bottom:12px}.g b{display:block;margin-top:3px;font-size:13.5px}.g .y{color:#f5a900}.t{font-size:13px;color:#ddd;margin-bottom:10px}.tk small.id{margin:0;font:10px ui-monospace,monospace;color:#555}.tk-s{position:relative;width:52px;background:#1a1a1a;display:grid;place-items:center}.tk-s span{writing-mode:vertical-rl;font-size:10px;letter-spacing:.1em;color:#666}.tk-s:before,.tk-s:after{content:'';position:absolute;left:-7px;width:14px;height:14px;border-radius:50%;background:var(--stage)}.tk-s:before{top:-7px}.tk-s:after{bottom:-7px}
About
A horizontal admit-one ticket: film title, venue, screen, seats, time and date, with semicircle notches and a vertical stub.