“Tu escaparate digital, presentado con estilo futurista.”
Simple-Flyer-Digital es un folleto interactivo vertical diseñado para tablets de mostrador, enfocado en potenciar la presencia online de las pequeñas y medianas empresas peruanas. Con una estructura modular en HTML, CSS y JavaScript, ofrece una experiencia inmersiva que combina animaciones suaves, paleta de neones y componentes glassmorphism para destacar productos, planes y hoja de ruta en un solo lugar.
- Crear un diseño limpio y llamativo usando una paleta oscura con destellos de neón.
- Implementar glassmorphism para tarjetas de contenido (features, eventos, planes).
- Añadir animaciones CSS para dar vida a secciones clave: hero, timeline y pricing.
- Ajustar el layout responsivo para tablets verticales sin sacrificar la legibilidad.
- Sincronizar animaciones CSS en background con el contenido principal sin afectar el rendimiento.
- Equilibrar el contraste entre colores neón y textos legibles en entornos de baja luminosidad.
- Layout fluido con
containerygridCSS optimizado para pantallas de hasta 600 px de ancho. - Animaciones con
@keyframesy timing easings para un desplazamiento armónico. - Feather Icons dinamizado con JavaScript para cargar los íconos al vuelo.
- Glassmorphism aplicado a tarjetas y eventos, con backdrop-filter y opacidades controladas.
Simple-Flyer-Digital/
├── index.html
├── README.md
├── LICENSE
└── assets/
├── css/
│ └── styles.css
└── js/
└── main.js
-
Estructura HTML
- Maquetación semántica de secciones:
<header>,<section>y<footer>. - Uso de comentarios para delimitar bloques: HERO, FEATURES, TIMELINE, PRICING, CTA.
- Maquetación semántica de secciones:
-
Estilos con CSS puro
- Definición de variables CSS en
:root(colores, radios, tipografías). - Glassmorphism en
.glassconbackdrop-filter: blur()y bordes semitransparentes. - Grid layouts para
.feature-gridy.pricing-grid. - Animaciones
@keyframespara fondos flotantes y planos con efecto levitación.
- Definición de variables CSS en
-
Animaciones y comportamiento
- Fondo animado en
<header>con pseudo-elementos difuminados. - Efecto “pulse” en botones CTA usando
animationytransform: scale(). - Feather Icons cargadas dinámicamente al final del
<body>confeather.replace().
- Fondo animado en
-
Optimización responsive
width: min(92%, 600px)en.containerpara adaptarse a tablets verticales.- Tipografías “Poppins” y “Bebas Neue” importadas desde Google Fonts.
- Meta viewport configurado para garantizar escala adecuada en dispositivos.
git clone https://github.com/tu-usuario/Simple-Flyer-Digital.git
cd Simple-Flyer-DigitalNo se requieren dependencias externas; basta con abrir el archivo en tu navegador o emplear un servidor local:
# Opcional: usar un servidor HTTP simple
python -m http.server 8000
# y luego visita http://localhost:8000-
Desplázate verticalmente para navegar entre secciones:
- Hero: título y enlace a demo.
- Features: beneficios instantáneos.
- Timeline: hoja de ruta de 2025 a 2027.
- Pricing: planes Seed, Grow y Bloom-AI.
- CTA: llamado a la acción final.
-
Haz clic en el botón “Ver Demo” para acceder a la demo alojada.
-
Personaliza textos, colores y enlaces editando
index.htmlyassets/css/styles.css.
- Totalmente libre de frameworks: cero dependencias.
- Funciona offline salvo carga de Google Fonts y Feather Icons.
- Ideal para instalación en tablets de mostrador o kioscos informativos.
- Verifica la compatibilidad en Chrome, Safari y Edge en modo tablet.
- Emplea herramientas de Lighthouse para medir rendimiento y accesibilidad.
- Ejecuta la demo en distintos niveles de brillo para validar contraste.
MIT License. Puedes usar, modificar y redistribuir este proyecto libremente.
Desarrollado por sjaquer Repositorio original: github.com/sjaquer/Simple-Flyer-Digital