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!
- 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.:
- Site ==> https://mothers-day.bookie0.repl.co/
- Code ==> https://replit.com/@Bookie0/Mothers-Day#README.md
- Spotlight/Apps page ==> https://replit.com/@Bookie0/Mothers-Day?v=1
Check out the code to see how the site was made. I've added many comments to guide you. Here's basically how the
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
bottom is at
200px, then at
100% it's bigger. Each heart is wrapped in a container, and they have different
All the text has a
2, and the heart containers have a
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 :)
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!
Edit: might be a bit laggy on Chrome, try on Edge, Firefox, or Safari :D
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.
Pretty cool, just a few suggestions:
- Maybe make the
- Maybe add a
inputto ask your name? (So you can put the name inside the card or etc.)
Otherwise a really nice project! ;)
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