Rocket - Start building, Now!
Mini tools
Stats
1 tool
4karma
Beginner
Joined: November 2024
Follow
Julio Alberto Brown Pastor's tools
-
```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Te Quiero Mucho</title> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffebee; overflow: hidden; } .message { font-size: 3rem; font-family: Arial, sans-serif; font-weight: bold; animation: colorChange 5s infinite; } @keyframes colorChange { 0% { color: red; } 25% { color: blue; } 50% { color: green; } 75% { color: purple; } 100% { color: red; } } .heart { position: absolute; width: 20px; height: 20px; background-color: red; transform: rotate(45deg); animation: float 5s infinite; } .heart::before, .heart::after { content: ''; width: 20px; height: 20px; background-color: red; border-radius: 50%; position: absolute; } .heart::before { top: -10px; left: 0; } .heart::after { top: 0; left: -10px; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-20px) rotate(45deg); } } </style> </head> <body> <div class="message">TE QUIERO MUCHO</div> <script> for (let i = 0; i < 20; i++) { const heart = document.createElement('div'); heart.classList.add('heart'); heart.style.left = Math.random() * 100 + 'vw'; heart.style.animationDuration = (Math.random() * 3 + 2) + 's'; heart.style.opacity = Math.random(); document.body.appendChild(heart); } </script> </body> </html> ``` This HTML page includes: 1. A centered, colorful, and animated "TE QUIERO MUCHO" message 2. A light pink background 3. Floating heart shapes in the background 4. Responsive design for different screen sizes You can save this code as an HTML file and open it in a web browser to see the result.
