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
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