This is a submission for Frontend Challenge – February Edition, CSS Art: February.
💖 Inspiration
Told yaa —I’m absolutely love-brained! 😅 This project is my way of capturing the essence of love—the emotions, the phases, the journey. I wanted to take it from the lows to the highs, from heartbreak to fluttering excitement, and finally, to a love that lasts forever. It’s not a cycle—though you could interpret it that way—but no matter what, I truly wish for everyone to reach the final phase and stay there forever. 😁✨
Also, I adore stories, love itself, and songs that capture those emotions. So, this is the result—my little love letter to love itself. I hope you like it! 💗
🎬 Demo
The website is live at:- Phases of Love
Or you can watch it in action here:-
Journey
It has been quite the adventure! I wanted this to feel like a story—a visual, auditory and emotional journey through the phases of love. I learned a lot along the way, and I’m happy with both the final result and the process that led me here.
Some key highlights:
-
✨ Phases & Backgrounds: Each phase has a unique background, visually depicting the emotions—thunderstorms and rain(of tears) for heartbreak, fluttering lights for excitement, and a steady, glowing warmth for enduring love. This was my deep dive into CSS gradients!
-
🎵 Audio Magic: Every phase has its own song, perfectly matching the mood. Using JS, I ensured that only the current phase’s music plays at any given time.
-
💌 The Love Letter: Love is at the heart of everything, so I created a heart-shaped letter with different messages for each phase. More JS!
-
🎨 Color Psychology: The phases transition from dark, heavy heartbreak tones to lighter, warm hues—culminating in an eternal, enduring love, symbolized in soft, glowing shades. 🤍
📜 MIT License: The code is open-source under the MIT License—feel free to check it out!
So, that’s it!
If you’re still here, Thank you ☺️🙏🏻💗.
Please share your thoughts, feedback, and suggestions in the comment section below 🗨️
