Sitio web profesional para renta y venta de podiums en México.
PODIUMEX/
├── index.html # Página principal (contenido)
├── header.html # Header/Menú de navegación (separado)
├── footer.html # Footer (separado)
├── css/
│ └── style.css # Todos los estilos CSS
├── js/
│ └── app.js # JavaScript principal
└── estudio-mercado-podiumex.md # Estudio de mercado completo
- Header separado (
header.html) - Se carga dinámicamente - Footer separado (
footer.html) - Se carga dinámicamente - Contenido principal (
index.html) - Solo el contenido de la página
✅ Reutilizable: Usa el mismo header/footer en múltiples páginas ✅ Fácil mantenimiento: Cambia el menú en un solo lugar ✅ Escalable: Agrega nuevas páginas fácilmente
El archivo app.js carga automáticamente el header y footer cuando la página se carga:
// Carga header.html en el contenedor
await loadComponent('header-container', 'header.html');
// Carga footer.html en el contenedor
await loadComponent('footer-container', 'footer.html');- Crea un nuevo archivo HTML (ej:
productos.html) - Copia esta estructura básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Productos - PODIUMEX</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header Container (cargado dinámicamente) -->
<div id="header-container"></div>
<!-- TU CONTENIDO AQUÍ -->
<section class="hero">
<h1>Mis Productos</h1>
</section>
<!-- Footer Container (cargado dinámicamente) -->
<div id="footer-container"></div>
<!-- Scripts -->
<script src="js/app.js"></script>
</body>
</html>- ¡Listo! El header y footer se cargarán automáticamente
Todos los estilos están en css/style.css organizados por secciones:
- Variables CSS (colores, fuentes)
- Header y navegación
- Hero section
- Productos
- Servicios
- Precios
- FAQ
- Footer
- Responsive (móvil y tablet)
El archivo js/app.js incluye:
- ✅ Carga dinámica de header/footer
- ✅ Menú móvil hamburguesa
- ✅ Scroll suave entre secciones
- ✅ Acordeón FAQ
- ✅ Animaciones fade-in
- ✅ Botón "volver arriba"
- ✅ Formulario de contacto
- ✅ Efectos de scroll en header
El sitio es 100% responsive con breakpoints:
- Desktop: 1024px+
- Tablet: 768px - 1024px
- Móvil: < 768px
# Con Python 3
python -m http.server 8000
# Con Python 2
python -m SimpleHTTPServer 8000
# Con Node.js (npx)
npx http-server
# Con PHP
php -S localhost:8000Luego abre: http://localhost:8000
- Instala la extensión "Live Server"
- Click derecho en
index.html - Selecciona "Open with Live Server"
No abras el archivo directamente con file:// porque JavaScript no podrá cargar los archivos header.html y footer.html por restricciones de seguridad del navegador.
Edita las variables en css/style.css:
:root {
--primary: #1a1a1a; /* Color principal */
--accent: #2563eb; /* Color de acento (azul) */
--text: #333; /* Color de texto */
/* ... más colores */
}Edita header.html - los cambios se verán en todas las páginas automáticamente.
Edita la sección .products-grid en index.html y duplica cualquier .product-card.
El archivo estudio-mercado-podiumex.md contiene:
- Análisis completo del mercado mexicano
- Competidores principales
- Tipos de productos
- Segmentos de clientes
- Tendencias 2025
- Estrategias de precios
- Oportunidades de negocio
- Agregar imágenes reales de los podiums
- Crear página de catálogo completo
- Página de contacto con formulario funcional
- Integrar WhatsApp Business API
- Google Analytics para métricas
- SEO optimization (meta tags, schema.org)
- Backend para cotizaciones y reservas
Para cualquier duda sobre el código o estructura del sitio, revisa los comentarios en el código o consulta este README.
Desarrollado con base en estudio de mercado completo © 2025 PODIUMEX