Descripción
En la pantalla aparecen unas plantas que van creciendo hasta que se convierten en unas bonitas flores amarillas. Los otros tres códigos son de una flor en una caja de cristal, como en la Bella y la Bestia. Existe una tradición en la que estas flores se envían en muchos lugares del mundo durante Septiembre, en concreto el día 21.
Mientras van apareciendo las flores, una animación muestra un texto en la parte superior. El texto por defecto es ‘Las flores amarillas simbolizan la felicidad. Tú eres la mía’. Este texto se puede modificar, en la sección ‘Tutorial paso a paso’ más abajo en esta página, te explico cómo hacerlo. Ahí también te explico como modificar la flor de dentro para poner la que más te guste.
Ideal para compartir por WhatsApp y sorprender a alguien.
Características
Fecha: 20/09/2024
Temática: Pareja
Lenguajes: HTML, CSS
Compatible con: PC, Android, Iphone
Ejemplos de uso
Sorpresa romántica: Envía este código a tu pareja para alegrarle el día. Las flores amarillas y el mensaje animado en la pantalla pueden expresar tus sentimientos de manera creativa. Puedes personalizar el texto con algo como «Cada día a tu lado florece con alegría» para darle un toque aún más especial y personal.
Detalle de amistad: Las flores amarillas también simbolizan la amistad. Puedes enviar este código a un amigo para recordarle cuánto valoras su compañía. Personaliza el texto con algo como «Nuestra amistad florece con cada momento compartido» para expresar tu aprecio de una forma alegre y creativa.
Mensaje de agradecimiento: Usa este código para agradecer a alguien especial. Las flores amarillas pueden ir acompañadas de un mensaje como «Gracias por estar siempre a mi lado, llenando mi vida de felicidad.» Es una forma bonita y significativa de expresar tu gratitud de manera visual y encantadora.
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. El texto está abajo del todo.
- Para personalizar la imagen, primero necesitarás convertirla a formato base64. Puedes hacerlo buscando en Google «image to base64». Una vez que subas tu imagen, si es muy grande, puedes reducir su tamaño bajando la calidad, por ejemplo, enviándotela a ti mismo por WhatsApp. Luego, cuando se codifique, simplemente haz clic en el botón «Copy Image» para copiar el código. Este texto largo que se genera tendrás que pegarlo entre las comillas de
background-image: url('');No te preocupes, en el propio archivo te doy más detalles sobre cómo hacerlo. - 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: