Scribd
Upload
4 views3 pages

!doctype HTML

This HTML document is a birthday greeting card for a mother, featuring a cheerful design with a pink color scheme and animated elements. It includes a message that expresses love and incorporates animated confetti and a pulsing heart symbol. The layout is responsive and centered, designed to create a festive atmosphere for the occasion.

Uploaded by

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

!doctype HTML

This HTML document is a birthday greeting card for a mother, featuring a cheerful design with a pink color scheme and animated elements. It includes a message that expresses love and incorporates animated confetti and a pulsing heart symbol. The layout is responsive and centered, designed to create a festive atmosphere for the occasion.

Uploaded by

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

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>¡Feliz Cumpleaños Mamá!</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #ffe4e1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-
serif;
overflow: hidden;
}
.card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
border: 2px solid #ffb6c1;
z-index: 10;
}
h1 {
color: #ff69b4;
font-size: 2.5rem;
margin-bottom: 10px;
}
p{
color: #555;
font-size: 1.5rem;
}
.heart {
color: #ff1493;
font-size: 50px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Decoración de fondo */
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: #ffc0cb;
top: -10px;
border-radius: 50%;
animation: fall 3s linear infinite;
}
@keyframes fall {
to { transform: translateY(100vh); }
}
</style>
</head>
<body>

<div class="card">
<h1>¡Feliz Cumpleaños!</h1>
<div class="heart">❤️</div>
<p>Te quiero mucho, mamá</p>
</div>

<script>
// Generar confeti de colores
for (let i = 0; i < 50; i++) {
let confetti = [Link]('div');
[Link] = 'confetti';
[Link] = [Link]() * 100 + 'vw';
[Link] = [Link]() * 3 + 's';
[Link] = ['#ffb6c1', '#ff69b4',
'#ff1493', '#ffd700'][[Link]([Link]() * 4)];
[Link](confetti);
}
</script>
</body>
</html>

You might also like