Je veux un site qui permet de découvrir ce jeu de 7 familles : Le jeu des 7 constellations de l'alliance therapeutique. Le user peut naviguer et decouvrir chaque carte classée par constellation. Enfin un bouton lui permet de télécharger un pdf bien formaté ou le jeu de cartes est prêt à etre imprimé et découpé en cartes. # 🌟 Les 7 Familles Stellaires de l'Alliance Thérapeutique
881c493 verified | /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .float-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Card styling */ | |
| .card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px) rotateY(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .card-front, .card-back { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 1rem; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| background: linear-gradient(135deg, #4f46e5 0%, #a855f7 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .card { | |
| width: 100%; | |
| height: auto; | |
| aspect-ratio: 2/3; | |
| } | |
| } |