Share your repls and programming experiences

← Back to all posts
Father's Day Card 👨 💖 ✉️
h
Bookie0 (6390)

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:

/* if screen width is below 600px (≈ phone) */
@media screen and (max-width: 600px) {
	.card {
		width: 320px; /* reduces width and height of card */
		height: 80%;
	}

	.cardTextBack {
		font-size: 20px; /* reduces font size of text */
	}

	.cardTextFront, .cardTextBackIntro {
		font-size: 60px !important; /* reduces font size of text */
	}
} 

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! ;)

Comments
hotnewtop
Whippingdot (680)

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 (146)

@Whippingdot why don't you make one yourself?

Bookie0 (6390)

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 (680)

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 (146)

@Whippingdot I can help you if you want :D

Whippingdot (680)

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

PixiGem (146)

@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 (680)

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 (146)

@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 (680)

oh hoi lol

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

PixiGem (146)

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

Bookie0 (6390)

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

Whippingdot (680)

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

PixiGem (146)

@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 (680)

Umm why do you want to do charity?

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

Bookie0 (6390)

@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 (680)

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

lizasss (4)

i wish we weren't out of milk on that one day...

cuber1515 (91)

Cool! I made one 2 but it was last minute so not great, I didn't even have time to make it responsive so it's really small for a phone. here

Bookie0 (6390)

woah nice, I like how it grows and expands! ;) @cuber1515

Bookie0 (6390)

hmm thats weird, what device/browser are you on? @JakeHu2020

Bookie0 (6390)

ah lol i knew there was smth fishy.. @JakeHu2020

PixiGem (146)

@Bookie0 I guess he was on an old Nokia

[deleted]

Awesome!

Bookie0 (6390)

Thanks, glad you like it! :D @Aphmeta

[deleted]

@Bookie0 I have a question to ask, if you don't mind. When did you start coding, like how many years ago or what age?

Bookie0 (6390)

@Aphmeta Well I've started actually started coding in like 5th grade with scratch and all, but tbh that doesn't really count. I started getting interested in coding a bit later, about last year actually with the start of the pandemic. Why?

[deleted]

@Bookie0 Did you ask why I asked?

[deleted]

@Bookie0 I was just curious because I am fairly new to coding and you seemed like you were really good at coding so I was wondering about how long it might take for me to be proficient at it.

Bookie0 (6390)

Haha thanks! Well it really depends you see. Like it depends on if you know other languages already, or how long you code every day, what you want to make with it, etc. @Aphmeta

[deleted]

Thanks so much! @Bookie0

Bookie0 (6390)

Thanks, glad you like it! :D @ZarmDev

nbash (7)

cool! I love the background! <3

nbash (7)

i just tried the app thing @Bookie0 AND ITS SOO COOL!

Bookie0 (6390)

hmm there's not much.. you should add some other things :) @nbash

nbash (7)

if i invite you too it will u help me @Bookie0/friend? :)

Bookie0 (6390)

perhaps, but please don't invite me to repls without asking me first :) @nbash

pzrepl (68)

WOW looks like 3js animation! Great job @Bookie0! You gained an admirer.

Bookie0 (6390)

@pzrepl haha, thanks, it’s all CSS tho — no JS! ;)

Bunnytoes (165)

this is really cool!

Bookie0 (6390)

thanks, glad you like it! :) @Bunnytoes