<!DOCTYPE html>

   <meta charset="UTF-8">
   <title>Happy Birthday Sharun!</title>
   <style>
       body {
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 100vh;
           background: #f0f0f0;
           margin: 0;
           font-family: 'Arial', sans-serif;
       }

       .card-container {
           perspective: 1000px;
       }

       .card {
           width: 400px;
           height: 500px;
           transform-style: preserve-3d;
           transition: all 1s ease;
           position: relative;
           cursor: pointer;
       }

       .card:active .front {
           transform: rotateY(-180deg);
       }

       .card:active .inside {
           transform: rotateY(0deg);
       }

       .front, .inside {
           position: absolute;
           width: 100%;
           height: 100%;
           backface-visibility: hidden;
           border-radius: 15px;
           padding: 20px;
           box-shadow: 0 10px 30px rgba(0,0,0,0.2);
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }

       .front {
           background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
           transform: rotateY(0deg);
           transition: all 1s ease;
       }

       .inside {
           background: #fff;
           transform: rotateY(180deg);
           transition: all 1s ease;
       }

       .birthday-text {
           font-size: 2.5em;
           color: white;
           text-align: center;
           text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
           animation: float 3s ease-in-out infinite;
       }

       .age {
           font-size: 6em;
           color: #ffeb3b;
           margin: 20px 0;
           animation: bounce 2s infinite;
       }

       .message {
           font-size: 1.2em;
           text-align: center;
           line-height: 1.6;
           margin: 20px 0;
       }

       .confetti {
           position: absolute;
           width: 10px;
           height: 10px;
           background: #ffeb3b;
           animation: confetti 3s infinite;
       }

       @keyframes float {
           0%, 100% { transform: translateY(0); }
           50% { transform: translateY(-20px); }
       }

       @keyframes bounce {
           0%, 100% { transform: translateY(0); }
           50% { transform: translateY(-30px); }
       }

       @keyframes confetti {
           0% { transform: translateY(0) rotate(0deg); opacity: 1; }
           100% { transform: translateY(500px) rotate(360deg); opacity: 0; }
       }

       .balloon {
           position: absolute;
           width: 60px;
           height: 80px;
           border-radius: 50%;
           animation: balloon 6s infinite;
       }

       @keyframes balloon {
           0% { transform: translateY(0); opacity: 0; }
           30% { opacity: 1; }
           100% { transform: translateY(-500px); opacity: 0; }
       }

       .cake {
           width: 100px;
           margin: 20px 0;
           animation: scale 2s infinite;
       }

       @keyframes scale {
           0%, 100% { transform: scale(1); }
           50% { transform: scale(1.1); }
       }
   </style>

</head> <body>

HAPPY BIRTHDAY

16

Tap to open!

Dear Sharun,

🎉 Happy 16th Birthday! 🎂
Born on April 17, 2008
May your day be filled with joy,
laughter, and wonderful memories!
Wishing you an amazing year ahead!

🎈🎁🎊

From [Your Name]

🎂

</body> </html>