Father's Day Card 👨 💖 ✉️
Bookie0 (6569)

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