CSS Mother's Day Card 🤱 💖
h
Bookie0 (6406)

Hi!

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
Whippingdot (681)

Three things:
First of all, I ain't upvoting even though it looks very nice cause Mother's day was the day before yesterday for me.
Second, spotlight pages are automatic when we open the link of your repo - adding a #README.md will not work on spotlight pages, and you do not need the ?v=1 at the end of your link to open the spotlight page for us as it is spotlight automatically. For you you need it but for us, we don't need it.
Finally, coolors.co is awesome 🥳 I have been using it for like 6 or more months.

EDIT: Oh and challenge for you - try to make the hearts just float around in a repetitive pattern instead of them just repeating. It kinda doesn't look nice with them just getting teleported back down.

Bookie0 (6406)

@Whippingdot um okay then lol

also yeah I just copied the link of my repl while I was editing the readme, that's why it's there, and I copied the link of the spotlight which also gave me the ?v=1.
Also yeah coolors.co is epic lol

Thanks anyways! :)

Whippingdot (681)

Welcome... I changed my mind - I am biased and you are @Bookie0 so UPDOOOOT