This is a submission for Frontend Challenge - February Edition, CSS Art: February.

✨Introduction: February—A Month of Love, Remembrance, and Change

February isn’t just another month on the calendar—it carries a special significance.

It’s the shortest month of the year, yet it holds some of the most powerful and emotional events in history. From celebrating love on Valentine’s Week to honoring sacrifices on Pulwama Attack Remembrance Day, February is a month of emotions, achievements, and reflection.

As a developer, I wanted to bring these emotions into the digital space.
💡 Can a calendar do more than just mark dates?
💡 Can it make users feel the significance of each day?

This thought inspired me to create a CSS-only interactive event calendar—a project where each date tells a story, evokes emotions, and brings history to life. 🎨✨

🌟 Inspiration

The idea for this project stemmed from my desire to create a visually appealing, interactive, and fully responsive event calendar without relying on JavaScript. I wanted to challenge myself to push the boundaries of CSS and ensure that everything, from hover effects to animations, was handled purely with CSS magic.

Calendars are a fundamental UI element in many applications, from personal planners to event management tools. However, making them both functional and beautiful while maintaining responsiveness can be tricky. This project was my attempt to blend aesthetics with usability.

💡 How I Got the Idea

I’ve always loved interactive UI design. But while working on a calendar layout, I noticed a problem—most calendars are just plain grids of numbers. They don’t tell you why a date matters.

So, I thought:
🧐 What if each date had a unique effect representing the emotions behind it?
✨ What if I could visualize history using only CSS?

Thus, my mission was set:
✅ Make a calendar that interacts with the user.
✅ Use pure CSS to bring events to life.
✅ Ensure a seamless, responsive experience across all devices.

🎭 Events That Inspired the Calendar

Each date in this calendar represents something powerful. I carefully selected events that carry deep meaning and used CSS effects to reflect their emotions:
✨ USA Freedom Day (February 1) – Celebrates the abolition of slavery with a waving flag animation.

🕊️ Pulwama Attack Remembrance (February 14) – Honors the brave soldiers with a flickering candle effect.

🎗️ World Cancer Day (February 4) – Spreads awareness with a glowing ribbon animation.

🏆 Champions Trophy beginning (February 19) – Celebrates sportsmanship with a trophy sparkle effect.

🛕 Maha Shivratri (February 26) – Symbolizes divine energy with a shining trident animation.

👩‍🔬 International Day of Women & Girls in Science (February 11) – Highlights innovation with a lightbulb effect.

💖 Valentine’s Week (February 7–14) – Depicts love and romance with floating hearts.

🔬 National Science Day (February 28) – Celebrates scientific discoveries with light beam effects.

Indian Coast Guard (February 1) – Honors India’s air warriors with a jet-fly animation.

🚀 Features: What Makes This Calendar Special?

This event calendar is more than just a grid of dates. It includes:

✅ Hover-activated event details – Users can see event descriptions, images, and even background music for special occasions.
✅ Smooth CSS animations – Events feature zoom-in and pulse effects to make them stand out dynamically.
✅ A fixed calendar layout – The calendar remains in place while scrolling, ensuring accessibility.
✅ Fully responsive design – On mobile, the calendar shifts above the event details for better readability.
✅ Pure CSS event image animations – Images continuously animate for an engaging experience.
✅ Background music control – Ensuring that only one event audio plays at a time (without JS!).

Of course, implementing these features without JavaScript came with challenges. Here’s how I tackled them.

🎨 Demo – See the Magic!

🔗 Live Demo: https://february-calender-css-sheetal-bajaj.netlify.app/
💾 GitHub Repo: https://github.com/Sheetal-cell/Frontend-challenge

🎭 Hover over each date to experience unique effects!

🛠️ Specified Code: Bringing Events to Life

✨USA Freedom Day – The Flag Waves in Code!

@keyframes wave {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}
#event1 {
    animation: wave 1s infinite ease-in-out;
}

🕊️ Pulwama Attack Remembrance – Tribute to the Brave

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
#event14 {
    animation: flicker 2s infinite;
}

💖 Valentine’s Week – Love in Motion!

@keyframes floatHeart {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(-10px); opacity: 0.8; }
    100% { transform: translateY(0px); opacity: 1; }
}
#event12 {
    animation: floatHeart 1.5s infinite ease-in-out;
}

🛕 Maha Shivratri (Shining Trident Animation)

@keyframes shine {
    0% { text-shadow: 0 0 5px gold; }
    50% { text-shadow: 0 0 15px gold; }
    100% { text-shadow: 0 0 5px gold; }
}
#event26 {
    animation: shine 1.5s infinite alternate;
}

🔬 National Science Day (Light Beam Effect)

@keyframes beam {
    0% { box-shadow: 0 0 5px cyan; }
    50% { box-shadow: 0 0 15px cyan; }
    100% { box-shadow: 0 0 5px cyan; }
}
#event28 {
    animation: beam 1.5s infinite alternate;
}

✨Indian Air Force Day (Jet-Fly Animation)

@keyframes fly {
    0% { transform: translateX(-10px); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.8; }
    100% { transform: translateX(-10px); opacity: 1; }
}
#event1_1 {
    animation: fly 1.5s infinite ease-in-out;
}

🛠️ Journey: Challenges, Fixes, and Learnings

🔹 1. Positioning the Calendar & Events Correctly

Problem: My first version was a disaster. 🤦‍♀️ The calendar and event descriptions were overlapping, misaligned, and totally unreadable on mobile.
Fix: I restructured my layout using Flexbox and CSS Grid, ensuring that:

• On desktop, the calendar stays on the left while event details appear beside it.
• On mobile, the calendar shifts above the event details for better readability.

@media (max-width: 1024px) {
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .calendar {
        order: 1;  /* Move calendar first */
        width: 100%;
    }

    .event-info-container {
        order: 2;
        width: 100%;
    }
}

Lesson: Always plan mobile-first design to avoid layout-breaking issues later.

🔹 2. Making Events Appear on Hover (Without JS)

Problem: I wanted users to hover over a date and reveal event details, but without JavaScript, I had to find a pure CSS solution.
Fix: I used :hover and :target selectors to toggle the event details on hover and active states.

td:hover + .event-details {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

However, this approach only worked when the event immediately followed the date in HTML. To avoid structural dependencies, I later used CSS sibling and adjacent selectors for better control.

Lesson: CSS is powerful but has limitations in dynamic interactions—sometimes, using JS could be more efficient.

🔹 3. Keeping the Calendar Fixed on Scroll

Problem: When scrolling down to view event details, the calendar moved out of view.
Fix: I used position: sticky; to keep the calendar in place.

.calendar {
    position: sticky;
    top: 10px;
    height: fit-content;
}

Now, the calendar remains visible even when users scroll down to check event details.

🔹 4. Adding Continuous Animations to Event Images

Problem: **I wanted images in event details to gently zoom in and out for a subtle effect.
**Fix: Using @keyframes and animation, I created a pulse-zoom effect:

@keyframes pulseZoom {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

.event-info img {
    animation: pulseZoom 3s ease-in-out infinite alternate;
}

This gives life to static images and makes the event details more engaging.

🔹 5. Ensuring Only One Background Music Plays at a Time

Problem: Multiple event audios were playing simultaneously, leading to a chaotic user experience.
Fix: While this is better handled in JavaScript, I experimented with using CSS animation delays and hover effects to indirectly control playback. However, this was a limitation, as CSS alone cannot stop one audio when another starts.

Lesson: Some functionalities, like media control, are best suited for JavaScript.

📚 Learnings & Experiences

🌟 CSS is incredibly powerful—you don’t always need JavaScript!
🌟 Emotions can be embedded into UI with the right animations.
🌟 Small design choices (like hover effects) can enhance user experience massively.

This project gave me a new perspective on UI/UX design—it’s not just about functionality but also about emotion and storytelling.

🚀 Final Thoughts & What’s Next?

✅ What I Loved

✔ Bringing history and emotions into CSS.
✔ Experimenting with creative animations.
✔ Learning new CSS techniques.

🔜 What’s Next?

✨ Adding real audio clips for an immersive experience.
✨ Expanding the calendar to cover more events.
✨ Improving mobile touch interactions.

💬 What Do You Think?

Have you ever built something purely with CSS that felt interactive?
What’s your favorite CSS trick for making pages more dynamic?

👇 Drop your thoughts in the comments—I’d love to hear them! 😊

🎯 Conclusion: A Calendar That Tells a Story

✨ Code isn’t just logic—it’s also art.
✨ A simple hover effect can make a user feel something.
✨ Every date on a calendar has a story. Why not let it speak?
Every event on this calendar tells a story—of resilience, love, discovery, and remembrance. Whether it's raising awareness, celebrating achievements, or honoring sacrifices, these moments shape our collective journey. Let’s embrace these occasions not just as dates but as opportunities to inspire, reflect, and unite for a brighter future.

🔥 If you loved this, share it with a fellow CSS enthusiast!

Thank You.

🚀 Let’s Connect!

👉 Visit me at:
Linkedin: www.linkedin.com/in/sheetal-bajaj-s06091009
GitHub: https://github.com/Sheetal-cell
X: https://x.com/Sheetal_11
Email: sheetalbajajgodda@gmail.com