Pride Month

[MyrinNew]

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations


What I Built

I created a vibrant and interactive Pride Month landing page that celebrates love, diversity, and LGBTQ+ history. The page features:


Interactive CSS Art Pride Flag - A clickable animated Pride flag that triggers colorful fireworks when clicked

Dynamic Animations - Floating hearts, stars, and rainbow elements with hover effects throughout the page

Comprehensive History Section - Timeline covering the Stonewall Riots (1969), first Pride March (1970), and creation of the Rainbow Flag (1978)

Pride Colors Explanation - Interactive cards showing the meaning behind each color of the Pride flag

Community Section - Emphasis on love, unity, and pride with animated hover effects

Functional Call-to-Actions - "Learn More" button linking to Wikipedia's Pride Month page and "Get Involved" button connecting to a Pride Discord community

The design uses a modern gradient background, CSS animations, and responsive design principles to create an engaging, celebratory experience.


Demo link:

https://june-pride-month.netlify.app/

github repo:

https://github.com/Amaljithuk/june-css-joy

Click the Pride flag in the hero section to see fireworks! 🎆

Hover over timeline items, color cards, and community sections for interactive animations

Responsive design that works on all devices

Smooth transitions and gradient effects throughout

Key Technologies:


React with TypeScript

Tailwind CSS for styling

Lucide React for icons

Custom CSS animations and keyframes

Responsive grid layouts

Journey

Process & Learning: This project was an exciting journey in combining meaningful content with engaging visual design. I focused on creating CSS art that wasn't just decorative but interactive and meaningful.


What I'm Proud Of:


Interactive Fireworks Animation - The clickable Pride flag that triggers a burst of colorful fireworks and sparkles

Comprehensive CSS Art - Multiple animated elements including floating shapes, rainbow hearts, and gradient backgrounds

Educational Content - Balancing celebration with historical education about Pride's origins

Accessibility - Maintaining good contrast ratios and semantic HTML structure

Performance - Smooth animations that don't compromise page performance

Technical Highlights:


Custom CSS keyframe animations for flag waving, heart beating, and firework explosions

Dynamic gradient backgrounds that shift and pulse

Hover effects that transform cards with scaling, rotation, and color changes

Responsive design using CSS Grid and Flexbox




More...