Check it out ↗
Intro
The Pride June Landing Page is a vibrant and interactive demo project I created to hone my skills in Framer. Inspired by the spirit of Pride Month, this page celebrates diversity and inclusion with dynamic animations and bold, colorful designs.
Landing Page Structure
Hero Section
Animated Gradient Background:
Using framer.supply, I animated a fluid rainbow-colored gradient background that sets a lively and dynamic tone for the page.
Theme:
"Reflect. Empower. Unite." is this year's theme, showcased in big, bold typography.
Rainbow Flag Section
As visitors scroll through the six sections, a rainbow flag forms and sticks to the top of the page. Each color of the flag symbolizes a different aspect.
Rainbow Flags Sticky Scroll
Celebration Tips Section
Each tip is presented in a card that stacks on top of each other as you scroll, accompanied by bold typography.
Sticky Stacked Tips Cards
Credit and CTA Section
The final section acknowledges credits and encourages support through a donation call-to-action.
Summary
The Pride June Landing Page, created with Framer, celebrates Pride Month with vibrant, interactive elements. Featuring an animated gradient background, a symbolic rainbow flag, and practical celebration tips, this project highlights the fusion of purposeful design and aesthetic appeal.
Remix Link
You can get the remix link here:
https://framer.com/projects/new?duplicate=Cd87iviYs95erSlm0OcP
