Father's Day Card 👨 💖 ✉️

Father's Day Card

Hello! 👋

Happy Father's Day!!! 👨 💯 🥇

You might have remember that I've made a Mother's Day CSS Card here. Well it's Father's Day today, and here's another CSS card whcih you can use to say 'Happy Father's Day' to your dad!

Here's how it looks like:

Features ✨

  • Beautiful, smooth background

  • Card with 2 sides with flipping animation

  • Responsive design so it looks good on any device (computer, tablet, phone, etc.)

  • No JS (only CSS and of course HTML)

Links 🖇

Site ==> Fathers-Day.bookie0.repl.co

Code ==> replit.com/@Bookie0/Fathers-Day#README.md

Post ==> replit.com/talk/share/Fathers-Day-Card-envelope/141695

Apps/spotlight page ==> replit.com/@Bookie0/Fathers-Day?v=1

Code 💻

Here'a brief explanation of the way this site works. Check out the code for more; I've commented and explained everything!

In te HTML (index.html), we first have a <section> tag wrapping everything. In the CSS (style.css), that is where we have the background image with background-image: url("background.png");. Next, we have some more divs where there's <div class="cardFront"> for the front of the card, and naturally, <div class="cardBack"> for the back of the card. Inside each of those, there is text with the <h1>, <h2>, or <p> tags.

For the CSS, some important styles are the perspective rule with perspective: 350px; which gives a cool effect when the card turns. A lower number makes the card flip so much that it kind of stretchs, and a higher number makes it almost simply rotate. Try it out yourself by changing the values!

THere's also transform-style: preserve-3d;, which, according to W3 Schools, specifies how nested elements are rendered in 3D space.

Then, we have backface-visibility: hidden; to hide the hidden side of the card when it's not supposed to show. With box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7);, we make a box shadow around the card for a floating illusion.

You'll see that in the .cardBack selector, there's transform: rotateY(180deg);. This is so that the back side will first be rotated 180 degrees (meaning it will be flipped), because we want the front side of the card to show by default.

When the user hovers over the card (or when they click if they're on a touchscreen device), with .card:hover .cardInside, using the same transform: rotateY(180deg);, we flip the inside of the card 180 degrees to reveal the behind of the card.

Finally, responsiveness; making websites look and function properly on all devices (computer, tablet, phone, etc.). We use the media query @media screen and (max-width: 600px) {} to specift rules that will be applied to a certain element if the device width is below 1000px. For example, in this case, if the width is below 600px, the width and height of the card are reduced, and so is the font size:

Let me know if you have any questions and I'll do my best to answer them! :)

Closing 🚪

Well, that's about all. Feel free to comment below your thoughts, and remember to wish your father "Happy Father's Day"!

Have an awesome day!

Bye! 👋

PS: You can of course use this for your own fathers! ;)

You are viewing a single comment. View All

I wish I could give this to my father but it is one day late, and I would hate saying I made this myself. He knows I code, and would ask me that question and I would either say no, or lie, and both options are depressing for me.


@Whippingdot why don't you make one yourself?


it's never too late, and you don't have to say you made it. You could just say you found smth cool and want to share it with him! :) @Whippingdot


Ok, maybe I will... @Bookie0

Hey @PixiGem, I would if I could. I am not that talented unfortunately. I hope I will be in the future

Also @Bookie0, man you are def one of the best community members (I said the same thing to @RayhanADev, cause both of you are soo awesome)


@Whippingdot I can help you if you want :D


@Whippingdot Lol thanks! :)


umm...i don't know it is well past father's day... next year! @PixiGem


wulcome @Bookie0


@Whippingdot is ur mom's or dad's bday coming up? BTW mom's bday is july 5, will you help me make a card for my mom?


Ya maybe... I don't know you are a random person but probs ya. We need @Bookie0 on our side though to help us. @PixiGem


@Whippingdot who said im a random person?! im legendaryWOlfy guy boi.
and yes, im improved CSS skills so the only I want from bookie is the bg image maybe


oh hoi lol

wait don't i have beef with you? @PixiGem


@Whippingdot but... I.... I... II, I've changed myself! no beef, no meat!


@PixiGem You can get the background image from this great site; haikei.app.


@Bookie0 pog! thx!


if you want though you can still help us... @Bookie0


lol ya no meat 4 sure @PixiGem


@Whippingdot and @Bookie0 wud u guys like to deal with bugs like me? It's where we sell a bug, but give a cycle to the person instead...

This is what I meant -
selling a bug means giving a code error to someone on StackOverflow or ReplTalk to fix it, if he helps us, we give him a cycle by upvoting their comment as he/she helped us

AND LOOK! I hate cycles, upvoting is for making a useful post/comment popular and helping other people


Umm why do you want to do charity?

also is your alt account gonna answer the questions? @PixiGem


@Whippingdot I deleted my alts


@PixiGem Okay first of all why would you give a code error to someone to fix and give them a cycle? There's already the ask board for that with accepting their answer.

Next, you say "we give him a cycle by upvoting their comment as he/she helped us". How do you know it's a "him"? Then why do you say "he/she"? It's better to say "them".

And lastly, why do you hate cycles if your idea is to give cycles to people who help? Your whole comment is contradictory...


ya lol I agree with you i just didn't want to sound toxic cause I def have some meat with him

Also, it can be another gender other than he/she, it is pride month for a reason.

Finally the account you are commenting on is a new account I guess so... it could be counted as an alt... @Bookie0