Share your repls and programming experiences

← Back to all posts
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! ;)

Voters
SudhanshuMishra
piphi
Whippingdot
cuber1515
JakeHu2020
SilvermoonCat
20fcianfanelli
RayhanADev
JWZ6
PixiGem
Comments
hotnewtop
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

lizasss

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

Bookie0
cuber1515

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

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

cuber1515
JakeHu2020

Bookie0

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

JakeHu2020

@Bookie0 Lol just kidding

Bookie0

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

PixiGem

@Bookie0 I guess he was on an old Nokia

JWZ6

Nice! I also made a fathers’ day project: https://replit.com/talk/share/Happy-Fathers-Day/141710

Bookie0

Cool! @JWZ6

JWZ6
[deleted]

Awesome!

Bookie0

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

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

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

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

np, gl! :) @Aphmeta

ZarmDev

This is great

Bookie0

Thanks, glad you like it! :D @ZarmDev

nbash

cool! I love the background! <3

Bookie0

Thanks! I made it with this wonderful SVG app maker :) @nbash

nbash

Cool @Bookie0

nbash

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

Bookie0

lmao yeah ikr @nbash

nbash

@Bookie0 xD YA!!!

Bookie0

:D @nbash

nbash

wana be friends @Bookie0?

nbash

btw can u pls look at https://replit.com/talk/share/Happy-Fathers-day/141696 i made it for fathers day! @Bookie0

Bookie0

sure @nbash

Bookie0

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

nbash

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

Bookie0

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

nbash
pzrepl

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

Bookie0

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

Bunnytoes

this is really cool!

Bookie0

thanks, glad you like it! :) @Bunnytoes