DEV Community

Cover image for Juneteenth Landing Page – Honoring Freedom & Progress
THISHIKA K
THISHIKA K

Posted on

Juneteenth Landing Page – Honoring Freedom & Progress

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

What I Built

For this challenge, I created a modern, animated landing page to honor Juneteenth: Freedom Day. My page is dedicated to celebrating Black liberation, resilience, and culture, and is designed to educate visitors about the history and significance of Juneteenth in an engaging, accessible way.

Highlights:

  • A visually striking hero section with animated backgrounds and a bold call-to-action.
  • An interactive timeline that animates as you scroll, telling the story of Juneteenth from 1863 to today.
  • Celebration cards with hover effects, offering ideas for how to honor Juneteenth.
  • A vibrant "Socials" section encouraging visitors to share their stories and join the conversation online.
  • Fully responsive design with smooth transitions and accessibility in mind.

Demo

Code Repository:
https://github.com/thishika-k/JUNETEENTH----dev-challenge-

Screenshot:

LANDING PAGE

LANDING PAGE

LANDING PAGE

LANDING PAGE

Journey

I started by researching Juneteenth’s history and modern celebrations to ensure the content was meaningful and accurate.

I designed the layout to be beginner-friendly but visually impactful, using animated backgrounds and scroll-triggered timeline effects for engagement.

I learned how to make sections responsive and accessible, and how to use SVGs for crisp, scalable social media icons.

I’m particularly proud of the timeline animation and the stylish celebration cards, which make the page feel lively and welcoming.

Thank you for checking out my submission!
Happy Juneteenth and Happy coding! 🚀

Top comments (0)