From dee1eea4b85f2bc6987d3e953fdaf27df76b37cb Mon Sep 17 00:00:00 2001 From: J R Deva Dattan Date: Sun, 5 Oct 2025 16:48:20 +0530 Subject: [PATCH] Flip Card --- components/flip-card.html | 25 +++++++++++++++ css/style.css | 64 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 components/flip-card.html diff --git a/components/flip-card.html b/components/flip-card.html new file mode 100644 index 0000000..0a647c2 --- /dev/null +++ b/components/flip-card.html @@ -0,0 +1,25 @@ + + + + + + Flip Card Component + + + +
+
+
+
+

Front Side

+

Hover me to see the back!

+
+
+

Back Side

+

This is the back of the card.

+
+
+
+
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 1bfcdcf..f17b0d1 100644 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,70 @@ body{ background: var(--background-color); } +/* Flip Card Styles */ +.flip-card { + width: 300px; + height: 200px; + perspective: 1000px; + margin: 20px; +} + +.flip-card__inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; +} + +.flip-card:hover .flip-card__inner { + transform: rotateY(180deg); +} + +.flip-card__front, +.flip-card__back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: var(--radius); + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.flip-card__front { + background-color: var(--surface-2-color); + color: var(--text-color); +} + +.flip-card__back { + background-color: var(--primary-color); + color: var(--primary-contrast); + transform: rotateY(180deg); +} + +.flip-card h2 { + margin: 0 0 15px 0; + font-size: 24px; +} + +.flip-card p { + margin: 0; + font-size: 16px; +} + +@media (max-width: 320px) { + .flip-card { + width: 260px; + height: 180px; + } +} + h1 { font-family: Georgia, "Times New Roman", Times, serif; text-decoration: underline;