Father's Day Garden 👨‍👧‍👦🌻

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

Father's Day celebrates the nurturing and growth that fathers provide.

I drew inspiration from the idea of fathers as gardeners who help their children bloom and grow.

The sunflowers represent the warmth and guidance fathers provide, always turning toward the light and reaching for the sky.

Demo

Journey

This piece combines multiple CSS animation techniques to create a garden scene that comes alive. The sunflowers grow and rotate to follow the sun, while subtle animations bring the entire scene to life.

Technical highlights:

• Complex CSS shapes to create realistic sunflowers and stems
• Rotation animations that simulate sunflowers following the sun
• Layered backgrounds for depth and atmosphere
• Staggered animations for natural, organic movement

The biggest challenge was creating the sunflower petals using only CSS. I used multiple pseudo-elements and transforms to achieve the layered petal effect. I'm excited to explore more nature-inspired CSS art and perhaps create an interactive garden where users can plant their own flowers.