🌱 Inspiration
The inspiration came from the urgency of the climate crisis and the challenge of telling meaningful stories using only HTML and CSS. Most websites rely on JavaScript for interactivity, but we wanted to prove that design and creativity alone can carry a powerful message. The hackathon’s theme pushed us to explore how far CSS animations, gradients, and layouts could go in building an immersive storytelling experience.
🌍 What it does
Climate Futures – A CSS Storytelling Journey is a single-page, fully responsive website that takes users through four “chapters”:
Hero (The Earth Today) – A glowing Earth with animated atmosphere.
Crisis (The Warning Signs) – Dark tones, fiery gradients, and sliding text to represent climate dangers.
Hope (Solutions in Action) – Interactive hover cards highlight renewable energy, recycling, and green cities.
Future (Call to Action) – A bright, uplifting ending with glowing CSS-only buttons inspiring change.
It’s more than a mockup — it’s a visual narrative that proves impactful design doesn’t need JavaScript.
🛠 How we built it
HTML5 for clean semantic structure (
, , ).CSS3 for responsive layouts (Flexbox & Grid), typography styling, and smooth transitions.
CSS animations & keyframes for fading, sliding, glowing, and floating effects.
Pure CSS illustrations (shapes like sun, clouds, and icons) to minimize reliance on images.
Designed to be mobile-first and fully responsive across screen sizes.
🚧 Challenges we ran into
Creating interactive effects without JavaScript forced us to stretch CSS to its limits.
Maintaining responsiveness while using complex animations required careful testing.
Balancing aesthetics with performance — gradients and animations can be heavy if overused.
🏆 Accomplishments that we're proud of
Building a story-driven website that feels alive and interactive without a single line of JavaScript.
Using CSS-only hover cards and transitions that feel like mini-app interactions.
Crafting a unified visual theme that shifts from crisis to hope to inspire emotion.
Creating a project that blends art, technology, and advocacy.
📚 What we learned
Advanced CSS techniques like clip-path, transform, and keyframe sequencing.
How to structure content semantically for better accessibility and maintainability.
The power of minimalist design — simplicity can create stronger impact than complexity.
🚀 What’s next for Climate Futures – A CSS Storytelling Journey
Adding accessibility features (screen reader-friendly content, better contrast ratios).
Expanding sections into a full educational microsite with climate resources.
Experimenting with CSS-only storytelling templates for other global issues (mental health, education, equality).
Publishing the site as a free open-source project so anyone can reuse or remix it for advocacy campaigns.
Log in or sign up for Devpost to join the conversation.