Winter Festival Scratch Ticket 🎭

#frontendchallenge #devchallenge #css #html

This is a submission for Frontend Challenge - February Edition, CSS Art: February.

Hi! This project is an interactive scratch-off ticket experience inspired by a very famous winter festival in Hungary called the Busójárás Festival. You can brush away a digital dust layer to reveal your fate, watch the ticket flip to display either sides, and download it as a keepsake.✨

📋Features:

Unique Design: I created the ticket design entirely from scratch in Canva and Figma, drawing inspiration from traditional carnival aesthetics.
Responsive Layout: Adapts to different screen sizes with flexible typography and layout.
Accessibility Considerations:
- WCAG-friendly colors and contrasts.
- Keyboard navigability and focus indicators.
- Proper use of semantic HTML elements.
Interactive Scratch Effect: Users "scratch" away the dust layer using mouse or touch gestures.
Dynamic Ticket Flip: At random intervals, the ticket flips on its own, revealing the back side.
Downloadable Ticket: Users can download both sides of their ticket as a single image, or scan the QR code to visit the official festival website.
Background Effects: Subtle ashy textures for a realistic scratched-off feel.

🛠️ Tools & Technologies Used

Design Tools: Canva, Figma
Development: HTML, CSS, JavaScript:
- Semantic structure for better accessibility.
- Custom styling, animations, and a visually appealing layout.
- Implements the scratch-off effect, ticket flip, and download functionality.

🖥️ How It Works

Scratch Off the Dust – Use your mouse (or touch) to uncover the ticket.
Reveal the Ticket Manually – If you prefer, press the "Reveal Ticket" button to instantly clear the dust.
Watch the Ticket Flip – At random intervals, the ticket flips on its own, revealing the back side.
Download Your Ticket – Click the "Download Ticket" button to save a copy.
Scan or Click the QR Code – Visit the festival’s official site with one tap.

🚀 Accessibility Considerations

Keyboard Navigation:
- All interactive elements (buttons, QR code) are reachable via Tab.
- Custom focus outlines for clear visibility. Color Contrast & Readability:
- Used high contrast colors (#E4572E for buttons, white text).
- Ensured text is large and scales well on different screens.
ARIA & Alternative Text:
- QR code has an accessible description.
- Images use meaningful alt attributes.