Love Language Discovery

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

Inspiration

This project highlights the power of CSS to create engaging, interactive experiences. We focused on three core CSS Art aspects:

1. Dynamic Animations

   • Pulse effect on titles
   • Smooth card hover transitions
   • Animated progress bars
   • Expandable story cards

2. Complex Layouts

   • CSS Grid card containers
   • Flexbox-based carousels
   • Absolute-positioned map markers

3. Responsive Visuals

   • Mobile-first media queries
   • Fluid gradient backgrounds
   • Adaptive component sizing

Demo

GitHub Repository

Journey

What We Learned:

• Advanced pseudo-element usage for decorative effects
• CSS Grid/Flexbox combination patterns
• Animation performance optimization
• Mobile touch interaction considerations

Proud Achievements:

• Smooth chart animations synced with JS data
• Responsive map markers maintaining proportions
• Consistent visual language across components
• CSS-only hover states with accessibility fallbacks

Code Structure:

/* Animation System */
@keyframes pulse {
  0% { transform: scale(1) }
  50% { transform: scale(1.02) }
  100% { transform: scale(1) }
}

/* Responsive Grid */
#language-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Complex Hover States */
.card:hover::before {
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Next Steps:

• Add 3D transform effects
• Implement CSS Scroll Snap
• Create print stylesheets
• Explore CSS Houdini animations

License

[MIT License] - Free for learning and adaptation

<!-- License Comment -->
<!-- Love Language CSS Art - MIT License (https://opensource.org/license/mit/) -->