Father's Day Card 👨 💖 ✉️
h
Bookie0

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
Whippingdot

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.

PixiGem

@Whippingdot why don't you make one yourself?

Bookie0

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

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)

PixiGem

@Whippingdot I can help you if you want :D

Bookie0

@Whippingdot Lol thanks! :)

Whippingdot

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

Whippingdot

wulcome @Bookie0

PixiGem

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

Whippingdot

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

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

Whippingdot

oh hoi lol

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

PixiGem

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

Bookie0

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

PixiGem

@Bookie0 pog! thx!

Bookie0
Whippingdot

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

Whippingdot

lol ya no meat 4 sure @PixiGem

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

Whippingdot

Umm why do you want to do charity?

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

PixiGem

@Whippingdot I deleted my alts

Bookie0

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

Whippingdot

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