"Beating Hearts", My CSS project for Father's day.

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

Inspiration

For June Celebrations, I wanted to honor Father's Day with something clean and heartfelt using only CSS. No SVGs, no images — just pure CSS magic. A simple animated heart and a bold "DAD" in fancy handwritten typography to show love and appreciation to fathers everywhere.

Demo

Check out the code here on Github pages

*Journey *

This was my first time pushing a full CSS Art piece entirely with shapes and animations — no images, no external graphics. I learned how to:

1. Combine basic shapes with rotation to build complex forms
2. Animate with @keyframes for a clean heartbeat effect
3. Use custom fonts from Google Fonts to elevate simple text
4. Deploy quickly with GitHub Pages for instant sharing ** What I'm definitely proud of:**
5. Kept it minimal but meaningful
6. Used Pure CSS, lightweight, responsive
7. I Learned how to center, animate, and style fluidly

Thank you to all Dads for your relentless support!

Comments

[Theodora Cristea]

A beautiful gesture for Father’s Day!🥰 The CSS animation and design are really cute. Looking forward to more of your creative projects! 🙃

[Collins Dada]

Thanks for the encouragement. I promise to work harder to provide more creative posts and tools. This encouragement meant a lot.