Share your repls and programming experiences

← Back to all posts
CSS Mother's Day Card 🤱 💖
h
Bookie0 (6407)

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

Comments
hotnewtop
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 (6407)

@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

EpicGamer007 (1755)

wow, i had a youtube video playing in the background and when i opened this, my youtube video stopped playing. when i closed it, it started again. almost like magic lol. (edge btw)

GhostKing007 (143)

Beautiful! You never cease to amaze!

DynamicSquid (5027)

Mother's day was yesterday smh Nice!

Bookie0 (6407)

@DynamicSquid yes i know i know but i had to go on a 15km trek the whole day and now my legs hurt Thanks, glad u like it! :D

DynamicSquid (5027)

@Bookie0 lol imagine not being able to swim

Bookie0 (6407)

@DynamicSquid i can swim, but not very long or i get chilly, not very fast or i get tired, and must have goggles or i cant see, and most important thing: must not get wet (so i cant swim, problem solved.) xD

SilvermoonCat (458)

@Bookie0 mhm yeah, that’s cool! I’ve never known another person capable of swimming and not getting wet :D

JBloves27 (1905)

Pretty cool, just a few suggestions:

  • Maybe make the h1 tag unselectable?
  • Maybe add a alert or a input to ask your name? (So you can put the name inside the card or etc.)

Otherwise a really nice project! ;)

Bookie0 (6407)

@JBloves27 Thanks!

Wait so what would it change to make it unselectable? Just so you can't highlight it?

Also for ur 2nd suggestion I was actually thinking of making it kinda interactive with DOM and stuff, but then decided against it to not make it "overdone"

But thank you so much anyways! :D

JBloves27 (1905)

Np!

Uh, yeah. I mean, you don't have to do it though

Ah, okie

lol, np! :D @Bookie0

Bookie0 (6407)

Thank you! Glad you like it! :D @CodeMaster007