Descripción
Este código HTML presenta una interacción protagonizada por un pingüino animado. Al abrirlo, el pingüino aparece diciendo «Oye mira», acompañado de un botón que invita al usuario a «Continuar». Al pulsar el botón, el pingüino revela una carta en su mano y aparece el mensaje «Esto es para ti». Un segundo botón, «Leer carta», permite abrir la carta en grande, donde aparece un mensaje completamente personalizable. Este código es ideal para enviar mensajes románticos o detalles especiales a tu pareja, amigos o familiares, creando una experiencia visual tierna e interactiva. Además de la animación, el usuario puede modificar el texto del mensaje para adaptarlo a cualquier ocasión, desde una declaración de amor hasta una nota de agradecimiento. Es una manera original de sorprender a alguien especial con un detalle que no se espera, haciendo uso de un simpático pingüino como mensajero.
Características
Fecha: 25/09/2024
Temática: Pareja
Lenguajes: HTML, CSS
Compatible con: PC, Android, Iphone
Ejemplos de uso
Declaración romántica:
Personaliza la carta del pingüino con un mensaje de amor para sorprender a tu pareja. El pingüino con su simpática animación y el texto personalizado hacen que este código sea una manera creativa de enviar un mensaje romántico, perfecto para aniversarios, celebraciones o simplemente para recordarle a esa persona especial cuánto la quieres.
Felicitación personalizada para un amigo:
Este código no solo está limitado a temas románticos. También puedes usarlo para felicitar a un amigo en su cumpleaños o por algún logro personal. Cambia el texto de la carta para que el pingüino entregue un mensaje de felicitación personalizado. Un gesto tierno que alegrará el día de cualquier persona.
Mensaje de disculpa original:
Si has tenido un malentendido o simplemente quieres pedir perdón de una manera especial, este pingüino puede ser tu aliado. Personaliza el texto de la carta para pedir disculpas de forma divertida y sincera, utilizando la ternura del pingüino para suavizar la situación y hacer que tu mensaje sea inolvidable.
Tutorial paso a paso
1. Cómo obtener el código
Puedes descargar el archivo HTML y CSS desde el enlace al final de esta página. Guarda el archivo en tu dispositivo para personalizarlo y compartirlo.
2. Cómo modificar el código
El código viene con texto predefinido, pero puedes cambiarlo de forma sencilla. Aquí te muestro cómo hacerlo:
- Descarga el código en tu PC
- Ábrelo con cualquier editor de texto. Recomiendo Visual Studio Code pero si no lo tienes instalado puedes utilizar el Bloc de notas. Para ello haces clic derecho encima del archivo, pulsas la opción ‘Abrir con’ y escoges el programa.
- Busca en el archivo el texto que quieres modificar y reemplázalo por el tuyo. No te preocupes, en el código te explico cómo y dónde modificarlo.
- Guarda el archivo antes de cerrar, si no no se aplicarán los cambios.
- Si haces doble clic en tu archivo, se te abrirá con tu navegador por defecto y verás los cambios actualizados.
- Solo te queda enviar el archivo.
3. Cómo enviar el código
Una vez que hayas personalizado el mensaje, simplemente guarda los cambios y comparte el archivo con la persona que quieras. Aquí te doy algunos ejemplos de cómo hacerlo:
- WhatsApp: Envía el archivo directamente como documento adjunto.
- Correo electrónico: Adjunta el archivo al correo y añade un mensaje personal.
- Subir a Google Drive: Comparte el enlace con la persona para que lo descargue.
Enlace de descarga
Haz clic en el botón para descargar el código: