CSS Mother's Day Card 🤱 💖


Hope everyone is doing well and staying safe! Happy Mother's Day! (I'm a tad late lol).

Here is a site for Mother's Day, programmed only in HTML CSS, which you can use to surprise your own mothers!

Features ✨

  • Fade-in, 'glowing' (text shadow) title
  • Floating hearts of different sizes and speeds in the background
  • Short text for your mother

It's also responsive, meaning that you can view it on any device, computer, tablet, phone, etc.:

Links 🖇

Code 💻

Check out the code to see how the site was made. I've added many comments to guide you. Here's basically how the CSS works:

For the title, there's the animation using @keyframes where at 0% the opacity is at 0, then it gradually (in 5 seconds) goes to 100% where the opacity is at 1 and you can fully see it.

With the paragraph text, you'll see that there are margin-tops; this was to push them so that they aren't stuck together and are seperated.

The hearts are just unicode (\2665: ♥), and they move upwards also with @keyframes where at 0% the bottom is at 200px, then at 100% it's bigger. Each heart is wrapped in a container, and they have different animation-timing-functions like ease-in, ease-out, linear, etc.

All the text has a z-index of 2, and the heart containers have a z-index of 1. This is so that the hearts can go behind the text without hiding it. I think it looks pretty cool that way! I've also used CSS variables so that if I want to change something, I don't have to change it numerous times everywhere.

Also, colors come from coolors.co :)

Closing 🚪

Well, that's about all. Feel free to comment below your thoughts, and remember to wish your mom "Happy Mother's Day", even if it's passed. It'll make her happy! :)

Have an awesome day!

Bye! 👋

Edit: might be a bit laggy on Chrome, try on Edge, Firefox, or Safari :D

You are viewing a single comment. View All

Thanks! Happy you like it! :D @InvisibleOne