Scribd
Upload
5 views3 pages

New Text Document

The document is an HTML code for a birthday card web page featuring a festive design with animated balloons and a rotating card effect. It includes a greeting 'Happy Birthday!' and a personalized message for 'Riya Didi' from 'Shuvrangshu'. The card has a front and back side, with CSS styles for layout, animations, and responsiveness.

Uploaded by

sagarikabanik0506
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

New Text Document

The document is an HTML code for a birthday card web page featuring a festive design with animated balloons and a rotating card effect. It includes a greeting 'Happy Birthday!' and a personalized message for 'Riya Didi' from 'Shuvrangshu'. The card has a front and back side, with CSS styles for layout, animations, and responsiveness.

Uploaded by

sagarikabanik0506
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Birthday Card</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background: url('flower.jpg') center/cover no-repeat; /* 🔁 Replace with your
image URL */
overflow: hidden;
position: relative;
}

h1 {
font-size: 50px;
font-weight: bold;
color: #ff4081;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
text-align: center;
z-index: 2;
}

.card-container {
perspective: 1200px;
position: relative;
z-index: 2;
width: 90%;
max-width: 500px;
}

.card {
width: 100%;
height: auto;
aspect-ratio: 1.4 / 1;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}

.card:hover {
transform: rotateY(540deg);
}

.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}

.card-front {
background: pink;
font-size: 20px;
font-weight: bold;
}

.card-back {
background: #fff0f5;
transform: rotateY(180deg);
font-family: 'Arial', sans-serif;
flex-direction: column;
}

.balloons-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

.balloon {
width: 40px;
height: 60px;
border-radius: 50%;
position: absolute;
animation: float 8s ease-in-out infinite;
}

.balloon:before {
content: '';
position: absolute;
width: 2px;
height: 40px;
background: gold;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}

.blue { background: blue; left: 10%; animation-delay: 0s; }


.cyan { background: cyan; left: 20%; animation-delay: 1s; }
.red { background: red; left: 30%; animation-delay: 2s; }
.lime { background: lime; left: 40%; animation-delay: 3s; }
.yellow { background: yellow; left: 50%; animation-delay: 4s; }
.magenta { background: magenta; left: 60%; animation-delay: 5s; }
.green { background: green; left: 70%; animation-delay: 6s; }
.maroon { background: maroon; left: 80%; animation-delay: 7s; }
.purple { background: purple; left: 90%; animation-delay: 8s; }

@keyframes float {
0% { transform: translateY(100vh); opacity: 1; }
50% { opacity: 0.8; }
100% { transform: translateY(-10vh); opacity: 0; }
}

@media (max-width: 600px) {


h1 { font-size: 30px; }
.card { aspect-ratio: 1.2 / 1; }
}
</style>
</head>
<body>
<h1>Happy Birthday!</h1>

<div class="balloons-container">
<div class="balloon blue"></div>
<div class="balloon cyan"></div>
<div class="balloon red"></div>
<div class="balloon lime"></div>
<div class="balloon yellow"></div>
<div class="balloon magenta"></div>
<div class="balloon green"></div>
<div class="balloon maroon"></div>
<div class="balloon purple"></div>
</div>

<div class="card-container">
<div class="card">
<div class="card-front">
Hold to reverse the card
</div>
<div class="card-back">
<h2>HAPPY BIRTHDAY RIYA DIDI!</h2>
<u><i>To Riya Didi</i></u>
<p align="left" style="font-family: 'Goudy Old Style', serif;">
<i>
<h4>
Wishing you a wonderful birthday filled with happiness, love, and
laughter!
May this special day bring you countless joyful and unforgettable
memories.
</h4>
</i>
</p>
<p align="right">From Shuvrangshu</p>
</div>
</div>
</div>
</body>
</html>

You might also like