Landing temática de Semana Santa construida con HTML, CSS y JavaScript. El proyecto muestra una ilustración animada, texto tipográfico, un chat con las 7 palabras de Jesús en la cruz y una interacción de lightbox para el logo principal.
- Ilustración CSS animada del personaje principal 🎭.
- Halo, corona y elementos decorativos dibujados con CSS 👑.
- Texto animado con Typed.js ⌨️.
- Chat visual con las 7 palabras de Jesús en la cruz 💬.
- Lightbox para ampliar el logo 🔍.
- Responsive design optimizado para móvil, tablet y desktop 📱.
- Efectos visuales interactivos (lluvia, relámpagos, modo oscuro) ⚡.
- Animaciones suaves sin overflow en pantallas pequeñas ✨.
El proyecto está optimizado para funcionar correctamente en todos los tamaños de pantalla:
- Desktop (980px+): Versión completa con todas las nubes animadas y elementos decorativos.
- Tablet (760px - 980px): Ajuste de posiciones y tamaños, ocultación de algunas nubes.
- Móvil (480px - 760px): Escala optimizada del personaje, chat flotante al fondo, fx-widget centrado.
- Móvil pequeño (<480px): Versión ultra compacta, márgenes de seguridad, botones expandibles.
- ✅ Posicionamiento de elementos con
left/righten lugar dewidth: calcpara evitar overflow. - ✅ Centrado seguro con
transform: translateX(-50%)yleft: 50%. - ✅ Ocultación de nubes en móvil para mejor rendimiento y limpieza visual.
- ✅ Texto y chat box con ancho automático y márgenes constantes.
- ✅ FX-widget sin transformación heredada en pequeños dispositivos.
happy-easter/
|-- index.html
|-- css/
| `-- style.css
|-- js/
| |-- jquery.min.js
| |-- script.js
| `-- typed.min.js
|-- img/
| `-- ...
|-- README.md
El sitio incluye varios efectos visuales que se pueden activar/desactivar con los botones en la esquina inferior:
- Lluvia 🌧️: Animación de gotas cayendo en la pantalla.
- Relámpagos ⚡: Destellos visuales aleatorios.
- Modo Oscuro 🌙: Overlay oscuro con gradiente para una experiencia nocturna.
- Clona el repositorio:
git clone https://github.com/phpeitor/happy-easter
cd happy-easter- Instala la extensión Live Server en VS Code.
- Abre
index.htmlcon Live Server. - Prueba el responsive con las DevTools (F12) → Modo dispositivo → selecciona tamaño móvil.
Puedes abrir index.html en el navegador. Para mejor experiencia:
- Sirve desde un servidor local (recomendado para pruebas de responsive).
- Abre las DevTools en modo móvil para validar el diseño adaptatativo.
Sube los archivos a tu servidor web (Apache, Nginx, etc.) y accede desde dispositivos reales para probar completamente el responsive en móvil.
- Caché: Los archivos CSS y JS incluyen parámetros de versión (
?ver=X.X) para forzar recarga en navegadores. - Animaciones: Las animaciones se deshabilitan automáticamente en
@media (max-width: 760px)para mejorar la fluidez en móvil si es necesario. - Rendimiento: Las nubes se ocultan en pantallas pequeñas para optimizar performance.
Proyecto de uso libre con fines personales y educativos.
Creado por phpeitor