🎉 Celebrating Festa Junina: Brazilian Tradition in Color and Motion

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

In Brazil, June is marked by “Festa Junina,” a vibrant celebration filled with colors, traditional foods, lively music, and lots of joy. So, I decided to create a Festa Junina scene entirely in CSS, taking this opportunity to share a bit of Brazilian culture with the global community.

Demo

🎉 https://festa-junina-2025.jamesrmoro.me

Journey

Since 2019, I’ve made a habit of creating Christmas scenes using only HTML and CSS, documenting the entire process year after year in this playlist.

I always wondered where I could share these creations more broadly—so I was thrilled to see that this month’s Frontend Challenge theme is “celebration.” I decided to bring Festa Junina to the challenge and share a bit of this tradition.

For this Festa Junina scene, I added:

• A fixed side menu with information about Festa Junina.

Clickable stalls:

• Food: Discover the main traditional dishes with images.
• Games: See the most classic Festa Junina games.
• Correio Elegante: traditional messages from the celebration.

Floating accordion: click to hear a typical tune that brings Festa Junina to life.