Untitled
unknown
plain_text
3 months ago
3.7 kB
3
Indexable
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>10K Race Pass</title> <style> /* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Arial", sans-serif; } body { background: #eee; display: flex; justify-content: center; align-items: center; height: 100vh; } .ticket { width: 320px; min-height: 500px; background: #fff; border: 2px solid #333; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } /* "Lanyard Hole" effect at top */ .lanyard-hole { position: absolute; width: 50px; height: 20px; background: #ccc; border: 2px solid #999; border-radius: 10px; top: 10px; left: 50%; transform: translateX(-50%); } /* Header / Title */ .ticket-header { text-align: center; background: linear-gradient(135deg, #567bdf, #6241a5); color: #fff; padding: 40px 20px 20px 20px; border-bottom: 3px solid #333; border-top-left-radius: 8px; border-top-right-radius: 8px; } .ticket-header h1 { font-size: 1.4em; letter-spacing: 1px; margin-bottom: 10px; } .ticket-header h2 { font-size: 1.1em; letter-spacing: 1px; font-weight: normal; margin-bottom: 5px; } /* Body / Details */ .ticket-body { padding: 20px; color: #333; } .ticket-body .reference { margin-bottom: 10px; font-weight: bold; } .ticket-body .participants { margin-bottom: 15px; } .ticket-body .participants h3 { font-size: 1em; margin-bottom: 5px; font-weight: bold; } .ticket-body .participants ul { list-style-type: none; margin: 0; padding: 0 0 0 10px; } .ticket-body .participants li { margin: 3px 0; } .ticket-body .event-details { margin-bottom: 15px; } .ticket-body .event-details p { margin: 3px 0; } .qr-section { text-align: center; margin: 20px 0; } .qr-section .placeholder { display: inline-block; width: 120px; height: 120px; background: #ccc; border: 2px dashed #999; line-height: 120px; text-align: center; vertical-align: middle; color: #999; font-size: 0.9em; border-radius: 10px; } .ticket-footer { text-align: center; font-size: 0.9em; background: #f8f8f8; padding: 10px; border-top: 2px solid #ccc; } </style> </head> <body> <div class="ticket"> <!-- Lanyard Hole at the top --> <div class="lanyard-hole"></div> <!-- Ticket Header --> <div class="ticket-header"> <h1>SPRING CITY 10K MARATHON</h1> <h2>OFFICIAL RACE PASS</h2> </div> <!-- Ticket Body --> <div class="ticket-body"> <div class="reference">Purchase Reference: #A1234BCD</div> <div class="participants"> <h3>Participants:</h3> <ul> <li>Vidal Perez</li> <li>Fabian Gomez</li> </ul> </div> <div class="event-details"> <p><strong>Date:</strong> March 15, 2025</p> <p><strong>Start Time:</strong> 7:00 AM</p> <p><strong>Location:</strong> Riverfront Park (Main Stage)</p> </div> <div class="qr-section"> <div class="placeholder">QR CODE</div> </div> </div> <!-- Ticket Footer --> <div class="ticket-footer"> * Present this pass at packet pickup *<br/> * Valid photo ID may be required * </div> </div> </body> </html>
Editor is loading...
Leave a Comment