Desarrollo web
Creando un E-commerce para Apicultores con HTML, CSS y JS
Inicia sesión para descargarEn esta serie de tutoriales, construiremos un sitio e-commerce completo y funcional desde cero. Tomando como base el proyecto "MielPura", aprenderás a maquetar múltiples páginas: inicio, tienda con categorías, guías, calendario, perfil …
Publicado: 06/07/2025
Por:
Juan Felipe Orozco Cortés
Contenido del tutorial ⌄
- Estructura de Directorios del Proyecto
- inicio.html
- inicio.css
- tienda.html
- tienda.css
- guias.html
- guias.css
- calendario.html
- calendario.css
- por_mayor.html
- por_mayor.css
- mi_perfil.html
- mi_perfil.css
- carrito.html
- carrito.css
- address-card.css
- banner.css
- button.css
- card.css
- featured-card.css
- filters.css
- form.css
- guide-card.css
- modal.css
El proyecto MielPura se presenta como un tutorial práctico para construir un sitio web de e-commerce completo y responsive. Su propósito es simular una tienda real para apicultores, guiando al estudiante a través de la creación de múltiples páginas como la tienda, el carrito de compras y las guías de contenido, utilizando HTML, CSS y JavaScript para lograr un resultado profesional y funcional.
Estructura de Directorios del Proyecto
│ calendario.html
│ carrito.html
│ guias.html
│ inicio.html
│ mi_perfil.html
│ por_mayor.html
│ tienda.htm
│
├───css
│ │ base.css
│ │ footer.css
│ │ layout.css
│ │ styles.css
│ │ theme.css
│ │
│ ├───modules
│ │ address-card.css
│ │ banner.css
│ │ button.css
│ │ card.css
│ │ featured-card.css
│ │ filters.css
│ │ form.css
│ │ guide-card.css
│ │ modal.css
│ │ modules.css
│ │ navigation.css
│ │ order-card.css
│ │ pagination.css
│ │ tabs.css
│ │ timeline.css
│ │ toolbar.css
│ │ video-card.css
│ │
│ └───pages
│ calendario.css
│ carrito.css
│ guias.css
│ inicio.css
│ mi_perfil.css
│ por_mayor.css
│ tienda.css
│
├───img
│ Alimentador_Techo_Rápido.png
│ aumador.jpeg
│ cera.jpeg
│ Cría de Reinas.png
│ Guía_Completa_Instalar.png
│ Herramientas que Todo Apicultor.png
│ Identificación y Control.png
│ Momento Perfecto para Cosechar.png
│ Reina_Italiana_Fecundada.png
│ traje.jpeg
│ Traje_Ventilado_Profesional.png
│ Tratamiento_Orgánico_Varroa.png
│
└───js
calendario.js
carrito.js
guias.js
inicio.js
mi_perfil.js
por_mayor.js
tienda.jsinicio.html
A continuación, se presenta el código fuente del archivo inicio.html. Esta página constituye la vitrina principal del e-commerce "MielPura", diseñada para dar la bienvenida a los apicultores, presentar la propuesta de valor de la marca, exhibir productos destacados y ofrecer acceso directo a las secciones más importantes del sitio:
MielPura: Código de la Página de Inicio (inicio.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MielPura - La Tienda #1 para Apicultores en Colombia</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/inicio.css">
</head>
<body>
<div class="honeycomb-bg"></div>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
<div class="close-menu" id="closeMenu">
<i class="fas fa-times"></i>
</div>
<ul class="mobile-nav">
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-home"></i> Inicio
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link" id="catalogToggle">
<i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
</a>
<div class="mobile-dropdown" id="catalogDropdown">
<a href="#" class="mobile-nav-link">Colmenas y Partes</a>
<a href="#" class="mobile-nav-link">Trajes y Protección</a>
<a href="#" class="mobile-nav-link">Herramientas</a>
<a href="#" class="mobile-nav-link">Ahumadores</a>
<a href="#" class="mobile-nav-link">Sanidad y Tratamientos</a>
<a href="#" class="mobile-nav-link">Nutrición</a>
<a href="#" class="mobile-nav-link">Cera y Marcos</a>
<a href="#" class="mobile-nav-link">Reinas y Abejas</a>
<a href="#" class="mobile-nav-link">Envases</a>
<a href="#" class="mobile-nav-link">Kits de Inicio</a>
</div>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-book"></i> Guías
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-calendar-alt"></i> Calendario
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-boxes"></i> Por Mayor
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-user"></i> Mi Cuenta
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-heart"></i> Favoritos
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<i class="fas fa-shopping-cart"></i> Carrito <span class="cart-badge">3</span>
</a>
</li>
</ul>
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Pasión por las Abejas. Herramientas para el Éxito.</h1>
<p>Encuentra todo lo que necesitas para tus colmenas, desde kits de inicio hasta equipos profesionales de alta calidad.</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary">Explorar la Tienda</a>
<a href="#" class="btn btn-secondary">Ver Guías Gratis</a>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2>¿Por Qué Elegirnos?</h2>
<div class="features-grid">
<div class="feature-item">
<i class="fas fa-award"></i>
<h3>Calidad Garantizada</h3>
<p>Seleccionamos solo los mejores materiales y equipos probados en campo por apicultores expertos.</p>
</div>
<div class="feature-item">
<i class="fas fa-user-friends"></i>
<h3>Asesoría de Expertos</h3>
<p>Somos apicultores como tú. Te ayudamos a elegir lo mejor para tus abejas y resolver tus dudas.</p>
</div>
<div class="feature-item">
<i class="fas fa-shipping-fast"></i>
<h3>Envíos a toda Colombia</h3>
<p>Recibe tus productos rápidamente en la puerta de tu casa o finca, sin importar dónde te encuentres.</p>
</div>
</div>
</div>
</section>
<section class="featured-products">
<div class="container">
<h2>Productos Destacados</h2>
<div class="product-grid">
<div class="product-card">
<div class="product-image">
<img src="img/traje.jpeg" alt="Kit de Inicio para Apicultura">
<div class="product-badge">NOVATOS</div>
</div>
<div class="product-info">
<span class="product-category">Para Novatos</span>
<h3>Kit de Inicio Completo</h3>
<p class="product-price">$450.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="img/aumador.jpeg" alt="Ahumador Profesional">
<div class="product-badge">POPULAR</div>
</div>
<div class="product-info">
<span class="product-category">Herramientas</span>
<h3>Ahumador Profesional de Acero Inox</h3>
<p class="product-price">$95.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="img/cera.jpeg" alt="Cera Estampada por Kilogramo">
<div class="product-badge">MAYORISTA</div>
</div>
<div class="product-info">
<span class="product-category">Insumos por Mayor</span>
<h3>Cera Estampada por Kg</h3>
<p class="product-price">$48.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
</div>
</div>
</section>
<section class="community-callout">
<div class="container">
<div class="community-content">
<h2>Más que una Tienda, Somos tu Aliado</h2>
<p>La apicultura es un viaje de aprendizaje constante. Consulta nuestro calendario de floración para <strong>Antioquia</strong> y prepárate para la cosecha, o explora nuestras guías gratuitas escritas por expertos.</p>
<a href="#" class="btn btn-primary">Ver Guías y Recursos</a>
<a href="#" class="btn btn-secondary">Ir al Calendario</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/inicio.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código de la Página de Inicio (inicio.html)
<!DOCTYPE html>
Declara el tipo de documento como HTML5, asegurando que el navegador interprete el código con los estándares más recientes.
<html lang="es">
Elemento raíz de la página, especificando que el idioma principal del contenido es español (es).
<head>
Inicia la sección de cabecera del documento. Contiene metadatos, enlaces a estilos y el título, información no visible directamente en la página.
<meta charset="UTF-8">
Define la codificación de caracteres como UTF-8, permitiendo el uso correcto de acentos y otros símbolos especiales.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configura el área visible (viewport) para que la página se adapte al ancho del dispositivo y tenga una escala inicial de 1.0, esencial para el diseño responsivo.
<title>MielPura - La Tienda #1 para Apicultores en Colombia</title>
Establece el título que se mostrará en la pestaña del navegador, optimizado para SEO con el nombre de la marca y su descripción.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Enlaza la hoja de estilos de la librería Font Awesome desde un CDN, para poder usar su amplio catálogo de iconos.
<link rel="stylesheet" href="css/styles.css">
Enlaza la hoja de estilos principal (styles.css), que contiene todos los estilos globales, de base y de componentes (módulos) del sitio.
<link rel="stylesheet" href="css/pages/inicio.css">
Enlaza una hoja de estilos específica para la página de Inicio (inicio.css), aplicando estilos particulares únicamente a esta sección.
</head>
Cierra la sección de cabecera (<head>).
<body>
Inicia el cuerpo (<body>) del documento, donde se encuentra todo el contenido visible de la página.
<div class="honeycomb-bg"></div>
Un elemento div probablemente usado para mostrar una imagen o un patrón de fondo decorativo con estilo de panal de abejas.
<header class="main-nav">
Define la cabecera principal de la página, que funcionará como la barra de navegación principal.
<div class="nav-container">
Contenedor que centra y organiza el contenido de la barra de navegación.
<div class="nav-logo">
Contenedor para el logotipo del sitio. Incluye un icono de abeja (<i>) y un enlace de texto con el nombre "MielPura" que lleva a la página de inicio.
<ul class="nav-links" id="nav-links">
Lista desordenada que contiene los enlaces de navegación principales para la versión de escritorio.
<li class="nav-item-shop">
Ítem de la lista para el enlace "Tienda". Es especial porque contiene un "mega menú" desplegable.
<div class="mega-menu">
Contenedor del menú desplegable grande que aparece al pasar el cursor sobre "Tienda".
<div class="mega-menu-column">
Define una columna dentro del mega menú. Cada columna agrupa una categoría de productos como "Equipamiento", "Cuidado" y "Envases".
<div class="mega-menu-promo">
Sección de promoción dentro del mega menú, diseñada para atraer a nuevos apicultores con un "Kit de Inicio".
<li><a href="guias.html">...</a></li>
Ítems de lista para otros enlaces de navegación importantes como "Guías", "Calendario" y "Por Mayor".
<div class="search-container">
Contenedor para la barra de búsqueda de productos.
<div class="nav-actions">
Contenedor para los iconos de acciones del usuario: Perfil, Favoritos y Carrito de Compras.
<span class="cart-badge">3</span>
Pequeña insignia sobre el icono del carrito que indica la cantidad de productos agregados (en este caso, 3).
<button class="mobile-menu-toggle" id="mobile-menu-toggle">...
Botón de tipo "hamburguesa" que solo es visible en dispositivos móviles para mostrar/ocultar el menú de navegación.
</header>
Cierra la sección de la cabecera principal (<header>).
<div class="mobile-menu" id="mobileMenu">
Contenedor del menú de navegación para la versión móvil, inicialmente oculto. Incluye enlaces de navegación y un desplegable para las categorías de la tienda.
<div class="overlay" id="overlay"></div>
Capa semitransparente que se muestra sobre el contenido principal cuando el menú móvil está abierto, para enfocar la atención en el menú.
<main>
Elemento principal que envuelve el contenido central y único de la página de inicio.
<section class="hero">
Sección "héroe" o principal. Es la primera sección visualmente impactante que ve el usuario, con un título, un párrafo descriptivo y botones de llamada a la acción.
<section class="features">
Sección de "Características" o "Ventajas", donde se destacan los puntos fuertes de la tienda como "Calidad Garantizada", "Asesoría de Expertos" y "Envíos a toda Colombia".
<section class="featured-products">
Sección para mostrar una selección de "Productos Destacados".
<div class="product-grid">
Contenedor que organiza las tarjetas de producto en un sistema de rejilla o cuadrícula.
<div class="product-card">
Tarjeta individual para un producto. Contiene una imagen, una etiqueta (product-badge), categoría, nombre, precio y un botón para "Añadir al Carrito".
<section class="community-callout">
Sección de "Llamada a la Comunidad". Invita a los usuarios a interactuar más con el sitio, visitando las guías y el calendario de floración.
</main>
Cierra la sección de contenido principal (<main>).
<footer>
Define el pie de página del sitio.
<div class="footer-grid">
Organiza el contenido del pie de página en una cuadrícula de columnas.
<div class="footer-column">
Columnas individuales del pie de página que contienen: información de la marca, enlaces de navegación, enlaces de soporte y datos de contacto.
<div class="footer-bottom">
La parte inferior del pie de página, con el aviso de copyright y los créditos de diseño.
</footer>
Cierra la sección del pie de página (<footer>).
<script src="js/inicio.js" defer></script>
Enlaza el archivo JavaScript específico para la página de inicio. El atributo defer asegura que el script se ejecute después de que el HTML haya sido completamente analizado, mejorando el rendimiento de carga.
</body>
Cierra el cuerpo del documento (<body>).
</html>
Cierra el elemento raíz (<html>), finalizando el documento.inicio.css
A continuación, se presenta el código fuente del archivo inicio.css. Este archivo define los estilos visuales exclusivos de la página de inicio del proyecto "MielPura", siendo responsable de la apariencia de secciones clave como el banner principal (hero), las tarjetas de características y los productos destacados, asegurando una presentación atractiva y adaptativa en diferentes dispositivos:
MielPura: Código de Estilos de la Página de Inicio (inicio.css)
.hero {
background-image:
linear-gradient(105deg, rgba(61, 43, 31, 0.9) 0%, rgba(61, 43, 31, 0.7) 100%),
url('https://images.unsplash.com/photo-1587773213451-d416040854b7?q=80&w=2070&auto=format&fit=crop');
background-size: cover;
background-position: center;
color: white;
padding: 10rem 2rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,0 L100,50 L50,100 L0,50 Z" fill="none" stroke="rgba(255,182,0,0.1)" stroke-width="1"/></svg>');
background-size: 100px;
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
color: white;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hero p {
font-size: 1.25rem;
margin-bottom: 2.5rem;
max-width: 600px;
}
.features {
padding: 6rem 0;
background: linear-gradient(to bottom, var(--color-pollen-light), white);
position: relative;
overflow: hidden;
text-align: center;
}
.features::before {
content: '';
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,10 Q50,0 100,10 Z" fill="white"/></svg>');
background-size: 100% 100%;
}
.features .container {
text-align: center;
position: relative;
z-index: 2;
}
.features h2 {
font-size: 2.8rem;
margin-bottom: 4rem;
position: relative;
display: inline-block;
}
.features h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--color-honey);
border-radius: 2px;
}
.feature-item {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border-bottom: 4px solid var(--color-pollen);
}
.feature-item:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-hover);
border-color: var(--color-honey);
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--color-honey);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.feature-item:hover::before {
transform: scaleX(1);
}
.feature-item i {
font-size: 3.5rem;
color: var(--color-honey);
margin-bottom: 1.5rem;
}
.feature-item h3 {
font-size: 1.6rem;
margin-bottom: 1rem;
}
.feature-item p {
color: var(--color-text);
}
.featured-products {
padding: 6rem 0;
background: white;
}
.featured-products .container {
text-align: center;
}
.featured-products h2 {
font-size: 2.8rem;
margin-bottom: 4rem;
position: relative;
display: inline-block;
}
.featured-products h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--color-honey);
border-radius: 2px;
}
.community-callout {
background: linear-gradient(105deg, var(--color-hive) 0%, var(--color-hive-light) 100%);
color: white;
padding: 6rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.community-callout::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,0 L100,50 L50,100 L0,50 Z" fill="none" stroke="rgba(255,182,0,0.1)" stroke-width="1"/></svg>');
background-size: 100px;
opacity: 0.2;
}
.community-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.community-callout h2 {
font-size: 2.8rem;
color: white;
margin-bottom: 1.5rem;
}
.community-callout p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 3rem auto;
}
.community-callout .btn {
min-width: 200px;
margin: 0 10px 15px;
}
@media (max-width: 768px) {
.hero {
padding: 8rem 1.5rem;
}
.hero h1 {
font-size: 2.8rem;
}
}
@media (max-width: 576px) {
.hero {
padding: 6rem 1.5rem;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1.1rem;
}
.features h2,
.featured-products h2,
.community-callout h2 {
font-size: 2.2rem;
}
}Explicación del código: MielPura: Código de Estilos de la Página de Inicio (inicio.css)
.hero { ... }
Estiliza la sección principal. Usa una imagen de fondo con un degradado oscuro superpuesto para mejorar la legibilidad del texto. `background-size: cover` asegura que la imagen cubra todo el espacio, y `position: relative` la prepara para elementos decorativos superpuestos.
.hero::before { ... }
Crea una capa decorativa usando un pseudo-elemento. Añade un patrón de rombos semitransparente (definido con un SVG en línea) sobre la imagen de fondo para darle una textura sutil y relacionada con la temática de las abejas.
.hero-content { ... }
Contenedor para el texto del "héroe". La propiedad `z-index: 2` asegura que el contenido (títulos, párrafos) se muestre siempre por encima de la capa decorativa creada con `.hero::before`.
.hero h1 { ... }
Define el estilo del título principal, dándole un tamaño grande, un interlineado adecuado y una sombra de texto para que resalte claramente sobre el fondo.
.hero p { ... }
Estiliza el párrafo de la sección "héroe", ajustando su tamaño de fuente y limitando su ancho para facilitar la lectura.
.features { ... }
Da formato a la sección de "Características". Tiene un fondo con un degradado suave y se posiciona de forma relativa para permitir la colocación de un efecto de curva en su borde superior.
.features::before { ... }
Añade un efecto de curva en la parte superior de la sección usando un SVG. Esto crea una transición visualmente más atractiva y suave desde la sección anterior.
.features h2::after { ... }
Genera una línea decorativa de color miel debajo de los títulos de sección. Se posiciona usando `position: absolute` y se centra con `transform: translateX(-50%)`.
.feature-item { ... }
Estiliza cada una de las tarjetas de características. Les da un fondo blanco, sombra, bordes redondeados y un borde inferior de color. La propiedad `transition` permite que los cambios al pasar el cursor (hover) sean suaves.
.feature-item:hover { ... }
Define el efecto al pasar el cursor sobre una tarjeta. La eleva ligeramente con `transform: translateY(-15px)` y cambia su sombra para dar una sensación de profundidad e interactividad.
.feature-item::before { ... }
Crea una línea decorativa superior que se anima al pasar el cursor. Inicialmente está oculta con `transform: scaleX(0)`.
.feature-item:hover::before { ... }
Hace que la línea decorativa superior aparezca con una animación de crecimiento horizontal (`transform: scaleX(1)`) cuando el usuario interactúa con la tarjeta.
.feature-item i, h3, p
Aplica estilos al contenido interno de las tarjetas de características, como el tamaño y color de los iconos y la tipografía de los textos.
.featured-products { ... }
Aplica espaciado y un fondo blanco a la sección de productos destacados, manteniendo la consistencia visual con el resto de la página.
.featured-products h2::after { ... }
Reutiliza el mismo estilo de subrayado decorativo para el título de esta sección, manteniendo un diseño coherente.
.community-callout { ... }
Estiliza la última sección de llamada a la acción con un degradado de colores de la marca, texto blanco y un patrón decorativo de fondo similar al del "héroe".
.community-content { ... }
Contenedor para el texto de la sección de llamada a la acción, asegurando que se posicione correctamente sobre el fondo decorativo.
.community-callout h2, p, .btn
Define los estilos para los títulos, párrafos y botones dentro de esta sección, ajustando tamaños y márgenes para una buena composición.
@media (max-width: 768px) { ... }
Define los estilos para pantallas de tamaño tablet y más pequeñas. Reduce el espaciado y el tamaño de la fuente en la sección "héroe" para una mejor adaptación.
@media (max-width: 576px) { ... }
Aplica estilos específicos para pantallas de móviles. Reduce aún más los tamaños de fuente de los títulos y párrafos en todas las secciones para garantizar la legibilidad en los dispositivos más pequeños.tienda.html
A continuación, se presenta el código fuente del archivo tienda.html. Este archivo es el núcleo del e-commerce "MielPura", presentando el catálogo de productos. Incluye una barra lateral con filtros interactivos por categoría, precio y marca, una barra de herramientas para ordenar los productos, y un sistema de paginación para navegar por el catálogo completo:
MielPura: Código de la Página de la Tienda (tienda.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda - MielPura | Equipos e Insumos para Apicultores</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/tienda.css">
</head>
<body>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="shop-content">
<div class="container">
<h1>Explora Nuestra Tienda</h1>
<div class="special-offer">
<h3>¡Oferta Especial de Verano!</h3>
<p>Descuento del 20% en todos los kits de inicio para nuevos apicultores. Aprovecha esta oferta por tiempo limitado.</p>
<a href="#" class="btn">Ver Ofertas</a>
</div>
<div class="shop-layout">
<button class="mobile-filter-toggle" id="mobile-filter-toggle">
<span><i class="fas fa-filter"></i> Filtrar y Ordenar</span>
<i class="fas fa-chevron-down"></i>
</button>
<aside class="shop-sidebar" id="shop-sidebar">
<div class="filter-group">
<h4><i class="fas fa-th"></i> Categorías</h4>
<ul>
<li><label><input type="checkbox" name="cat" value="equipamiento"> Equipamiento</label></li>
<li><label><input type="checkbox" name="cat" value="cuidadoysanidad" checked> Cuidado y Sanidad</label></li>
<li><label><input type="checkbox" name="cat" value="envases"> Envases y Empaques</label></li>
<li><label><input type="checkbox" name="cat" value="reinasyabejas"> Reinas y Abejas</label></li>
<li><label><input type="checkbox" name="cat" value="kitsdeinicio"> Kits de Inicio</label></li>
</ul>
</div>
<div class="filter-group">
<h4><i class="fas fa-dollar-sign"></i> Rango de Precio</h4>
<input type="range" min="10000" max="500000" value="250000" class="price-range-slider">
<div class="price-range-values">
<span>$10k</span>
<span>$500k</span>
</div>
</div>
<div class="filter-group">
<h4><i class="fas fa-tag"></i> Marcas</h4>
<ul>
<li><label><input type="checkbox" name="brand" value="mielpura"> MielPura (Marca Propia)</label></li>
<li><label><input type="checkbox" name="brand" value="apivit"> ApiVit</label></li>
<li><label><input type="checkbox" name="brand" value="beestrong"> BeeStrong</label></li>
<li><label><input type="checkbox" name="brand" value="apiguard"> ApiGuard</label></li>
</ul>
</div>
<div class="filter-actions">
<button class="btn btn-primary-filter">
<i class="fas fa-filter"></i> Aplicar
</button>
<button class="btn btn-secondary-filter">
<i class="fas fa-undo"></i> Limpiar
</button>
</div>
</aside>
<div class="shop-main">
<div class="shop-toolbar">
<p class="product-count">Mostrando 8 de 47 productos</p>
<div class="sort-by">
<label for="sort"><i class="fas fa-sort-amount-down"></i></label>
<select name="sort" id="sort">
<option value="popular">Ordenar por Popularidad</option>
<option value="price_asc">Precio: bajo a alto</option>
<option value="price_desc">Precio: alto a bajo</option>
<option value="latest">Más Recientes</option>
</select>
</div>
</div>
<div class="shop-product-grid">
<div class="product-card" style="--delay: 1">
<div class="product-image">
<img src="img/Tratamiento_Orgánico_Varroa.png" alt="Tratamiento Varroa">
<div class="product-badge">OFERTA</div>
</div>
<div class="product-info">
<span class="product-category">Cuidado y Sanidad</span>
<h3>Tratamiento Orgánico Varroa</h3>
<p class="product-description">Solución orgánica para el control de varroa, segura para tus abejas.</p>
<p class="product-price">$65.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
<div class="product-card" style="--delay: 2">
<div class="product-image">
<img src="img/Alimentador_Techo_Rápido.png" alt="Alimentador">
<div class="product-badge">NUEVO</div>
</div>
<div class="product-info">
<span class="product-category">Equipamiento</span>
<h3>Alimentador de Techo Rápido</h3>
<p class="product-description">Alimentador eficiente para colmenas, fácil de instalar y limpiar.</p>
<p class="product-price">$28.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
<div class="product-card" style="--delay: 3">
<div class="product-image">
<img src="img/Reina_Italiana_Fecundada.png" alt="Reina Fecundada">
<div class="product-badge">AGOTÁNDOSE</div>
</div>
<div class="product-info">
<span class="product-category">Reinas y Abejas</span>
<h3>Reina Italiana Fecundada</h3>
<p class="product-description">Reinas italianas de alta calidad, fecundadas y listas para tu colmena.</p>
<p class="product-price">$80.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
<div class="product-card" style="--delay: 4">
<div class="product-image">
<img src="img/Traje_Ventilado_Profesional.png" alt="Traje de apicultor">
</div>
<div class="product-info">
<span class="product-category">Equipamiento</span>
<h3>Traje Ventilado Profesional</h3>
<p class="product-description">Traje ligero y ventilado para apicultores, máxima protección.</p>
<p class="product-price">$320.000</p>
<a href="#" class="btn-add-to-cart">Añadir al Carrito</a>
</div>
</div>
</div>
<nav class="pagination">
<a href="#">«</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">...</a>
<a href="#">5</a>
<a href="#">»</a>
</nav>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/tienda.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código de la Página de la Tienda (tienda.html)
head
La cabecera enlaza los estilos globales (styles.css) y los estilos específicos para esta página (tienda.css), además del título optimizado para SEO y la librería de iconos Font Awesome.
header class="main-nav"
Se reutiliza la misma cabecera y barra de navegación principal que en la página de inicio para mantener una experiencia de usuario consistente en todo el sitio.
main
Elemento principal que envuelve todo el contenido de la tienda.
div class="special-offer"
Un banner promocional destacado en la parte superior de la tienda para anunciar ofertas especiales y captar la atención del cliente.
div class="shop-layout"
Contenedor principal que establece el diseño de dos columnas de la tienda: la barra lateral de filtros y el área principal de productos.
button class="mobile-filter-toggle"
Botón diseñado para dispositivos móviles. Permite a los usuarios mostrar u ocultar la barra lateral de filtros para ahorrar espacio en pantallas pequeñas.
aside class="shop-sidebar"
La barra lateral de la tienda. Contiene todos los controles para filtrar el catálogo de productos.
div class="filter-group"
Agrupa un conjunto de filtros relacionados, como "Categorías", "Rango de Precio" y "Marcas". Cada grupo tiene un título y los controles correspondientes (checkboxes, slider de rango).
div class="filter-actions"
Contiene los botones principales para "Aplicar" los filtros seleccionados o "Limpiar" la selección y ver todos los productos.
div class="shop-main"
El área de contenido principal de la tienda, donde se muestran la barra de herramientas y la cuadrícula de productos.
div class="shop-toolbar"
Barra de herramientas ubicada sobre los productos. Muestra el número de productos que se están viendo (product-count) y un menú desplegable (sort-by) para ordenarlos por popularidad, precio, etc.
div class="shop-product-grid"
El contenedor que organiza todas las tarjetas de producto en una cuadrícula responsive.
div class="product-card"
Tarjeta individual para cada producto. Se reutiliza el mismo componente visual de la página de inicio. La propiedad `style="--delay: 1"` sugiere que se usa para una animación de carga escalonada.
nav class="pagination"
Componente de navegación que permite al usuario moverse entre las diferentes páginas del catálogo de productos cuando hay más ítems de los que caben en una sola página.
footer
Se reutiliza el mismo pie de página global para mantener la consistencia en todo el sitio.
script src="js/tienda.js"
Enlaza un archivo JavaScript específico para la página de la tienda. Este script manejará la interactividad de los filtros, el ordenamiento de productos y la funcionalidad del botón de filtros en móviles.tienda.css
A continuación, se presenta el código fuente del archivo tienda.css. Este archivo se encarga de la maquetación y el estilo visual de la página de la tienda (tienda.html). Define la estructura de dos columnas para los filtros y los productos, crea una cuadrícula de productos adaptable y añade animaciones sutiles para una carga dinámica y atractiva. Además, incluye media queries para asegurar que la tienda se vea y funcione correctamente en todos los dispositivos:
MielPura: Código de Estilos de la Página de la Tienda (tienda.css)
.shop-content {
padding: 4rem 0;
}
.shop-content h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 2rem;
animation: fadeInDown 1s ease-out;
position: relative;
display: inline-block;
padding: 0 20px;
}
.shop-content h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--color-honey);
border-radius: 2px;
}
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
}
.shop-main {
width: 100%;
}
.shop-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2.5rem;
}
.shop-product-grid .product-card {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s forwards;
animation-delay: calc(var(--delay) * 0.1s);
}
.shop-product-grid .product-description {
font-size: 0.9rem;
color: var(--color-hive-light);
margin: 0.5rem 0 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 45px;
}
@media (max-width: 992px) {
.shop-layout {
grid-template-columns: 1fr;
}
.shop-product-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.shop-content h1 {
font-size: 2.5rem;
}
.product-image {
height: 220px;
}
}
@media (max-width: 576px) {
.shop-product-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.product-card h3 {
font-size: 1.2rem;
}
.product-price {
font-size: 1.4rem;
}
}Explicación del código: MielPura: Código de Estilos de la Página de la Tienda (tienda.css)
.shop-content
Aplica un espaciado interno vertical a toda la sección principal de la tienda para separarla de la cabecera y el pie de página.
.shop-content h1
Estiliza el título principal "Explora Nuestra Tienda". Le aplica un tamaño grande, lo centra, y le añade una animación de entrada (fadeInDown) para que aparezca desde arriba de forma suave.
.shop-content h1::after
Usa un pseudo-elemento para crear la línea decorativa de color miel debajo del título principal, manteniendo la consistencia visual con otros títulos del sitio.
.shop-layout
Crea el diseño principal de la página de la tienda usando CSS Grid. Define dos columnas: una estrecha de 280px para la barra lateral de filtros y otra que ocupa el resto del espacio (1fr) para los productos.
.shop-main
Contenedor del área principal de la tienda, que incluye la barra de herramientas y la cuadrícula de productos.
.shop-product-grid
Define la cuadrícula donde se mostrarán los productos. `repeat(auto-fill, minmax(280px, 1fr))` es una técnica de diseño responsivo muy potente que crea tantas columnas de 280px como quepan en el espacio disponible, ajustándose automáticamente.
.shop-product-grid .product-card
Aplica una animación de entrada a cada tarjeta de producto. Inicialmente, las tarjetas están invisibles y desplazadas hacia abajo. La animación `fadeInUp` las hace aparecer de forma gradual. `animation-delay: calc(var(--delay) * 0.1s)` crea un efecto escalonado, donde cada tarjeta aparece un poco después de la anterior.
.shop-product-grid .product-description
Formatea la descripción del producto dentro de la tarjeta. Las propiedades `-webkit-line-clamp: 2` y relacionadas se usan para limitar el texto a un máximo de dos líneas, finalizando con puntos suspensivos si es más largo. Esto asegura que todas las tarjetas tengan una altura consistente.
@media (max-width: 992px)
Primer punto de quiebre para la responsividad. En pantallas de 992px de ancho o menos (laptops pequeñas y tablets grandes), la disposición de dos columnas (`.shop-layout`) se convierte en una sola columna, apilando la barra de filtros y los productos verticalmente.
@media (max-width: 768px)
Segundo punto de quiebre para tablets. Reduce el tamaño de la fuente del título principal para que se ajuste mejor al espacio disponible.
@media (max-width: 576px)
Tercer punto de quiebre para teléfonos móviles. La cuadrícula de productos (`.shop-product-grid`) se convierte en una sola columna (`grid-template-columns: 1fr`), mostrando un producto por fila para una máxima legibilidad en pantallas estrechas.guias.html
A continuación, se presenta el código fuente del archivo guias.html. Esta página funciona como un "Centro de Conocimiento" para los apicultores, ofreciendo artículos y recursos educativos. La estructura incluye una guía destacada, un sistema de filtros por categorías, una cuadrícula con todas las guías y una sección de videotutoriales con un reproductor de video integrado:
MielPura: Código de la Página de Guías y Recursos (guias.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guías y Recursos para Apicultores - MielPura</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/guias.css">
</head>
<body>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="guides-header">
<div class="container">
<h1>Centro de Conocimiento</h1>
<p>Tu biblioteca de recursos para llevar tu pasión por las abejas al siguiente nivel. Aprende, explora y comparte.</p>
</div>
</section>
<section class="featured-guide-section">
<div class="container">
<article class="featured-guide-card">
<div class="featured-guide-image">
<img src="img/Guía_Completa_Instalar.png" alt="Instalando una nueva colmena">
</div>
<div class="featured-guide-content">
<span class="guide-category-tag">Primeros Pasos</span>
<h2>Guía Completa para Instalar tu Primera Colmena</h2>
<p class="guide-excerpt">Desde elegir el lugar perfecto hasta transferir tus primeras abejas. Te llevamos paso a paso para asegurar un inicio exitoso y sin estrés.</p>
<a href="#" class="btn btn-primary">Leer Guía Completa</a>
</div>
</article>
</div>
</section>
<div class="guide-filters">
<div class="container">
<button class="filter-btn active" data-filter="todos"><i class="fas fa-th"></i> Todos</button>
<button class="filter-btn" data-filter="novatos"><i class="fas fa-seedling"></i> Primeros Pasos</button>
<button class="filter-btn" data-filter="sanidad"><i class="fas fa-medkit"></i> Sanidad</button>
<button class="filter-btn" data-filter="cosecha"><i class="fas fa-honeycomb"></i> Cosecha</button>
<button class="filter-btn" data-filter="avanzado"><i class="fas fa-cog"></i> Avanzado</button>
</div>
</div>
<section class="guides-grid-section">
<div class="container">
<div class="guides-grid" id="guides-grid">
<article class="guide-card" data-category="sanidad">
<div class="guide-card-image">
<img src="img/Identificación%20y%20Control.png" alt="Control de Varroa">
</div>
<div class="guide-card-content">
<span class="guide-category-tag">Sanidad</span>
<h3>Identificación y Control de la Varroa</h3>
<p class="guide-excerpt">Aprende a detectar y tratar eficazmente al parásito más destructivo de las abejas.</p>
<div class="guide-card-meta">
<span><i class="fas fa-user"></i> Ana P.</span>
<a href="#">Leer más →</a>
</div>
</div>
</article>
<article class="guide-card" data-category="cosecha">
<div class="guide-card-image">
<img src="img/Momento%20Perfecto%20para%20Cosechar.png" alt="Extracción de miel">
</div>
<div class="guide-card-content">
<span class="guide-category-tag">Cosecha</span>
<h3>El Momento Perfecto para Cosechar la Miel</h3>
<p class="guide-excerpt">¿Cuándo y cómo saber que la miel está lista? Evita errores comunes y maximiza tu cosecha.</p>
<div class="guide-card-meta">
<span><i class="fas fa-user"></i> Carlos M.</span>
<a href="#">Leer más →</a>
</div>
</div>
</article>
<article class="guide-card" data-category="novatos">
<div class="guide-card-image">
<img src="img/Herramientas%20que%20Todo%20Apicultor.png" alt="Herramientas básicas">
</div>
<div class="guide-card-content">
<span class="guide-category-tag">Primeros Pasos</span>
<h3>5 Herramientas que Todo Apicultor Novato Necesita</h3>
<p class="guide-excerpt">No gastes de más. Te mostramos el equipo esencial para empezar con confianza.</p>
<div class="guide-card-meta">
<span><i class="fas fa-user"></i> Equipo MielPura</span>
<a href="#">Leer más →</a>
</div>
</div>
</article>
<article class="guide-card" data-category="avanzado">
<div class="guide-card-image">
<img src="img/Cría%20de%20Reinas.png" alt="Cría de reinas">
</div>
<div class="guide-card-content">
<span class="guide-category-tag">Avanzado</span>
<h3>Cría de Reinas: Técnicas Avanzadas</h3>
<p class="guide-excerpt">Domina la cría de reinas para fortalecer tus colmenas y mejorar la genética.</p>
<div class="guide-card-meta">
<span><i class="fas fa-user"></i> Laura S.</span>
<a href="#">Leer más →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<section class="video-guides-section">
<div class="container">
<h2>Videotutoriales</h2>
<div class="video-grid">
<div class="video-card" data-video="https://www.youtube.com/embed/dQw4w9WgXcQ">
<img src="https://placehold.co/600x400/3D2B1F/FFF9C4?text=Video+1" alt="Cómo usar el ahumador">
<div class="video-overlay"><h3>Cómo Usar el Ahumador Correctamente</h3></div>
<i class="fas fa-play play-icon"></i>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/dQw4w9WgXcQ">
<img src="https://placehold.co/600x400/FFB600/3D2B1F?text=Video+2" alt="Inspección de una colmena">
<div class="video-overlay"><h3>Inspección de Colmena: Guía Visual</h3></div>
<i class="fas fa-play play-icon"></i>
</div>
<div class="video-card" data-video="https://www.youtube.com/embed/dQw4w9WgXcQ">
<img src="https://placehold.co/600x400/5a4535/FFFFFF?text=Video+3" alt="Dividir una colmena">
<div class="video-overlay"><h3>Técnica para Dividir una Colmena</h3></div>
<i class="fas fa-play play-icon"></i>
</div>
</div>
</div>
</section>
<div class="video-modal" id="videoModal">
<div class="modal-content">
<span class="modal-close" id="modalClose"><i class="fas fa-times"></i></span>
<iframe class="modal-video" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/guias.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código de la Página de Guías y Recursos (guias.html)
section class="guides-header"
Cabecera principal de la página. Presenta el título "Centro de Conocimiento" y una descripción para dar la bienvenida al usuario.
section class="featured-guide-section"
Sección dedicada a mostrar una guía destacada. Utiliza un diseño de tarjeta horizontal para darle más importancia visual que al resto de las guías.
article class="featured-guide-card"
La tarjeta que contiene la guía destacada. Se divide en dos partes: una para la imagen (`featured-guide-image`) y otra para el contenido (`featured-guide-content`), que incluye categoría, título, un extracto y un botón de llamada a la acción.
div class="guide-filters"
Contenedor para los botones que permitirán filtrar las guías por categorías. Cada botón tiene un atributo `data-filter` que será utilizado por JavaScript para mostrar u ocultar las guías correspondientes.
section class="guides-grid-section"
La sección principal que contiene la cuadrícula con todas las guías disponibles.
div class="guides-grid"
El contenedor que usa CSS Grid para organizar las diferentes tarjetas de guías (`guide-card`) de forma ordenada y adaptable.
article class="guide-card"
Tarjeta individual para cada guía en la cuadrícula. Contiene una imagen, una etiqueta de categoría, el título, un extracto del contenido y metadatos como el autor y un enlace para "Leer más". El atributo `data-category` lo vincula con los botones de filtro.
section class="video-guides-section"
Sección dedicada a mostrar una colección de videotutoriales.
div class="video-grid"
Cuadrícula que organiza las tarjetas de los diferentes videos disponibles.
div class="video-card"
Tarjeta individual para cada video. Muestra una imagen en miniatura y un icono de "play". El atributo `data-video` contiene la URL del video que se abrirá, lo que permite que el JavaScript sepa qué video reproducir.
div class="video-modal"
Contenedor para la ventana modal (popup) que se usará para reproducir los videos. Inicialmente está oculto y se mostrará al hacer clic en una `video-card`. Contiene un `iframe` que cargará la URL del video correspondiente.
script src="js/guias.js"
Enlaza el archivo JavaScript de esta página. Este script es fundamental para la interactividad: manejará la lógica para filtrar las guías al hacer clic en los botones y para abrir, reproducir y cerrar los videos en la ventana modal.guias.css
A continuación, se presenta el código fuente del archivo guias.css. Este archivo contiene los estilos dedicados a la página de 'Guías y Recursos'. Se encarga de dar formato al encabezado de la página, a las distintas secciones de contenido, a los botones de filtro interactivos y a las cuadrículas de guías y videos. Incluye animaciones y un diseño totalmente adaptable para asegurar una experiencia de aprendizaje clara y agradable en cualquier dispositivo:
MielPura: Código de Estilos de la Página de Guías (guias.css)
.guides-header {
padding: 5rem 2rem;
background: linear-gradient(135deg, var(--color-pollen-light), var(--color-white));
text-align: center;
border-bottom: 1px solid var(--color-pollen);
position: relative;
}
.guides-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://www.transparenttextures.com/patterns/honey-im-subtle.png') repeat;
opacity: 0.1;
}
.guides-header h1 {
font-size: 3.5rem;
animation: fadeInDown 0.8s ease-out;
position: relative;
}
.guides-header p {
font-size: 1.25rem;
color: var(--color-hive-light);
max-width: 700px;
margin: 1rem auto 0;
animation: fadeInUp 0.8s ease-out 0.2s;
animation-fill-mode: both;
position: relative;
}
/* === SECCIONES DE CONTENIDO === */
.featured-guide-section,
.guides-grid-section {
padding: 5rem 2rem;
}
.video-guides-section {
padding: 6rem 2rem;
background: linear-gradient(105deg, var(--color-hive-light) 0%, var(--color-pollen-light) 100%);
color: var(--color-hive);
text-align: center;
position: relative;
}
.video-guides-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://www.transparenttextures.com/patterns/honey-im-subtle.png') repeat;
opacity: 0.1;
}
.video-guides-section h2 {
font-size: 2.8rem;
color: var(--color-hive);
margin-bottom: 3rem;
animation: fadeInDown 0.8s ease-out;
position: relative;
}
.guide-filters {
text-align: center;
padding: 3rem 2rem;
border-top: 1px solid var(--color-pollen);
border-bottom: 1px solid var(--color-pollen);
background: var(--color-white);
}
.filter-btn {
background: transparent;
border: 2px solid var(--color-pollen);
color: var(--color-hive-light);
padding: 10px 25px;
margin: 5px;
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
border-color: var(--color-honey);
color: var(--color-hive);
transform: translateY(-2px);
}
.filter-btn.active {
background-color: var(--color-honey);
border-color: var(--color-honey);
color: var(--color-hive);
}
.guides-grid, .video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}
@media (max-width: 768px) {
.guides-header h1 { font-size: 2.5rem; }
.video-guides-section h2 { font-size: 2.2rem; }
}
@media (max-width: 576px) {
.guides-grid, .video-grid {
grid-template-columns: 1fr;
}
}Explicación del código: MielPura: Código de Estilos de la Página de Guías (guias.css)
.guides-header
Estiliza la cabecera de la página de guías. Se le aplica un fondo con un degradado suave y un borde inferior para separarla del resto del contenido. La posición relativa es para contener al pseudo-elemento.
.guides-header::before
Añade una textura sutil de panal de abejas como una capa superpuesta con baja opacidad. Esto enriquece el diseño visual sin distraer del contenido principal.
.guides-header h1
Define el estilo del título principal "Centro de Conocimiento", aplicándole un tamaño de fuente grande y una animación de entrada para que aparezca suavemente desde arriba.
.guides-header p
Estiliza el párrafo de introducción. `animation-fill-mode: both` asegura que el elemento conserve los estilos del final de la animación (en este caso, su opacidad y posición) una vez que esta termina.
.featured-guide-section, .guides-grid-section
Aplica un espaciado vertical uniforme a las secciones que contienen las guías escritas.
.video-guides-section
Estiliza la sección de videotutoriales con un degradado de fondo distintivo y la misma textura de panal para mantener la coherencia visual del sitio.
.video-guides-section h2
Da formato al título de la sección de videos, manteniendo un estilo consistente con otros títulos de sección.
.guide-filters
Define el estilo para la barra que contiene los botones de filtro, separándola visualmente con bordes y un fondo blanco.
.filter-btn
Estiliza el estado por defecto de cada botón de filtro. Son transparentes con un borde de color, indicando que no están seleccionados. La propiedad `gap` añade un espacio entre el icono y el texto del botón.
.filter-btn:hover
Aplica un efecto visual cuando el usuario pasa el cursor sobre un botón: cambia el color del borde y el texto, y eleva ligeramente el botón para dar una sensación de interactividad.
.filter-btn.active
Define el estilo para el botón de filtro que está actualmente seleccionado. Se le da un color de fondo sólido para que se destaque claramente como la categoría activa.
.guides-grid, .video-grid
Establece una cuadrícula (grid) responsiva para las guías y los videos. `repeat(auto-fit, minmax(320px, 1fr))` crea columnas flexibles que se ajustan automáticamente al ancho de la pantalla.
@media (max-width: 768px)
Reglas para pantallas de tamaño tablet. Se reduce el tamaño de los títulos principales para que no ocupen demasiado espacio vertical.
@media (max-width: 576px)
Reglas para pantallas de móviles. Las cuadrículas de guías y videos se transforman a una sola columna para asegurar que el contenido sea fácil de leer y navegar en dispositivos estrechos.calendario.html
A continuación, se presenta el código fuente del archivo calendario.html. Este archivo estructura la página del Calendario Apícola, una herramienta interactiva para apicultores. La página está diseñada para ser dinámica, con un selector de región para personalizar el contenido. La información del mes se carga en una tarjeta principal, y una línea de tiempo permite la navegación anual, todo controlado por JavaScript:
MielPura: Código del Calendario Apícola (calendario.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario Apícola - MielPura</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/calendario.css">
</head>
<body>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="calendar-header">
<div class="container">
<h1>Calendario Apícola Anual</h1>
<p>Planifica tu temporada con nuestra guía mensual de tareas y floraciones clave para el apicultor colombiano.</p>
<div class="region-selector">
<label for="region"><i class="fas fa-map-marker-alt"></i> Tu Región:</label>
<select name="region" id="region">
<option value="andina" selected>Región Andina (Antioquia)</option>
<option value="caribe">Región Caribe</option>
<option value="pacifico">Región Pacífico</option>
<option value="orinoquia">Región Orinoquía</option>
</select>
</div>
</div>
</section>
<section class="main-display-section">
<div class="container">
<div class="month-card" id="month-card">
</div>
</div>
</section>
<section class="timeline-section">
<div class="container">
<h2>Navegación Anual</h2>
<div class="year-timeline" id="year-timeline">
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/calendario.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código del Calendario Apícola (calendario.html)
head
La cabecera de la página. Incluye el título específico "Calendario Apícola - MielPura" y enlaza la hoja de estilos dedicada para esta página, `calendario.css`.
header class="main-nav"
Se reutiliza la cabecera de navegación principal, idéntica a la de las otras páginas, para mantener una experiencia de usuario consistente.
main
El contenedor principal para el contenido único de la página del calendario.
section class="calendar-header"
La cabecera de la sección. Presenta el título de la herramienta y una breve descripción. Incluye el elemento clave de la página: el selector de regiones.
div class="region-selector"
Contiene el menú desplegable (`<select>`) que permite al usuario elegir una región de Colombia. La selección del usuario será leída por JavaScript para mostrar los datos de floración y tareas correspondientes a esa zona.
section class="main-display-section"
La sección principal donde se mostrará la información detallada del mes seleccionado.
div class="month-card"
Este es un contenedor vacío fundamental. Actúa como un marcador de posición donde JavaScript inyectará dinámicamente toda la información del mes actual o seleccionado, como las floraciones principales y las tareas recomendadas para el apicultor.
section class="timeline-section"
Sección dedicada a la navegación entre los meses del año.
div class="year-timeline"
Otro contenedor vacío crucial. JavaScript se encargará de generar y mostrar aquí una línea de tiempo con los doce meses del año, permitiendo al usuario hacer clic en cada uno para cargar su información en la `month-card`.
footer
Se reutiliza el pie de página global del sitio para mantener la coherencia en el diseño y la navegación.
script src="js/calendario.js"
Enlaza el archivo JavaScript que es el cerebro de esta página. Este script contiene toda la lógica para: 1. Cargar los datos del calendario (posiblemente desde un objeto JSON). 2. Generar la línea de tiempo de los meses. 3. Mostrar la información del mes por defecto. 4. Actualizar la `month-card` cuando el usuario cambia de mes o de región.calendario.css
A continuación, se presenta el código fuente del archivo calendario.css. Este archivo proporciona el estilo visual para la página interactiva del Calendario Apícola. Se encarga de formatear la cabecera, el selector de región y, lo más importante, la tarjeta de información del mes que se genera dinámicamente. También define la apariencia de la línea de tiempo anual y asegura que toda la herramienta sea completamente adaptable a dispositivos móviles y de escritorio:
MielPura: Código de Estilos del Calendario Apícola (calendario.css)
.calendar-header {
padding: 5rem 2rem;
background: linear-gradient(135deg, var(--color-pollen-light), var(--color-white));
text-align: center;
border-bottom: 1px solid var(--color-pollen);
position: relative;
}
.calendar-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://www.transparenttextures.com/patterns/honey-im-subtle.png') repeat;
opacity: 0.1;
}
.calendar-header h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
animation: fadeInDown 0.8s ease-out;
position: relative;
}
.calendar-header p {
font-size: 1.25rem;
color: var(--color-hive-light);
max-width: 700px;
margin: 0 auto 2rem auto;
animation: fadeInUp 0.8s ease-out 0.2s;
animation-fill-mode: both;
position: relative;
}
.region-selector {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-white);
padding: 10px 20px;
border-radius: 50px;
box-shadow: var(--shadow);
border: 2px solid var(--color-pollen);
transition: all 0.3s ease;
}
.region-selector:hover {
border-color: var(--color-honey);
}
.region-selector label {
font-weight: 600;
color: var(--color-hive-light);
display: flex;
align-items: center;
gap: 8px;
}
.region-selector select {
border: none;
background: transparent;
font-size: 1rem;
font-weight: 500;
padding: 5px;
outline: none;
color: var(--color-hive);
cursor: pointer;
}
.main-display-section {
padding: 3rem 2rem;
}
.month-card {
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow);
padding: 3rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
position: relative;
border: 1px solid var(--color-pollen-light);
opacity: 0;
animation: fadeInUp 0.7s ease-out forwards;
}
.month-card::before {
content: '\f073';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
color: var(--color-honey);
opacity: 0.2;
}
.month-card.fade-out {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.month-header {
grid-column: 1 / -1;
text-align: center;
border-bottom: 2px solid var(--color-pollen);
padding-bottom: 1.5rem;
margin-bottom: 1rem;
position: relative;
}
.month-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: var(--color-honey);
}
.month-header h2 {
font-size: 2.8rem;
color: var(--color-honey-dark);
}
.month-header .month-focus {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-hive-light);
}
.info-column h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.info-column h3 i {
color: var(--color-honey);
}
.info-list {
list-style: none;
}
.info-list li {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 1rem;
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.info-list li:hover {
transform: translateX(5px);
}
.info-list li i {
color: var(--color-hive-light);
width: 20px;
text-align: center;
margin-top: 4px;
}
@media (max-width: 992px) {
.month-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.calendar-header h1 { font-size: 2.5rem; }
.month-header h2 { font-size: 2.2rem; }
.info-column h3 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
.month-card { padding: 2rem; }
.region-selector { flex-direction: column; gap: 5px; }
}Explicación del código: MielPura: Código de Estilos del Calendario Apícola (calendario.css)
.calendar-header
Estiliza la cabecera de la página con un fondo de degradado, una textura sutil superpuesta y animaciones de entrada para el título y el párrafo, creando una bienvenida atractiva.
.region-selector
Formatea el contenedor del menú desplegable para seleccionar la región. Se le da apariencia de "píldora" con bordes redondeados, una sombra suave y un borde de color para que destaque como un elemento interactivo.
.region-selector select
Elimina los estilos por defecto del navegador para el elemento `select`, permitiendo una integración visual más limpia con el diseño personalizado del contenedor.
.main-display-section
Aplica un espaciado vertical a la sección que contendrá la tarjeta de información principal.
.month-card
Estiliza la tarjeta principal donde se mostrará la información del mes. Usa CSS Grid para un diseño de dos columnas, tiene bordes redondeados, sombra y una animación de entrada para aparecer suavemente.
.month-card::before
Añade un icono de calendario de Font Awesome como un gran elemento decorativo y semitransparente en la esquina superior derecha de la tarjeta, reforzando visualmente el propósito del componente.
.month-card.fade-out
Clase de utilidad, probablemente añadida y eliminada con JavaScript. Se usa para crear una transición de desvanecimiento suave cuando el usuario cambia de mes, antes de que se cargue el nuevo contenido.
.month-header
Define el encabezado dentro de la tarjeta del mes. `grid-column: 1 / -1` hace que este encabezado ocupe el ancho de ambas columnas de la cuadrícula.
.month-header::after
Crea la línea decorativa de color miel debajo del título del mes, manteniendo la consistencia del diseño.
.month-header h2, .month-focus
Estilizan el nombre del mes y el texto de "enfoque" o resumen de ese mes, con diferentes tamaños y grosores de fuente para crear una jerarquía visual clara.
.info-column h3
Da formato a los subtítulos dentro de la tarjeta, como "Tareas del Apicultor" y "Floraciones Principales", incluyendo un icono para mayor atractivo visual.
.info-list li
Estiliza cada ítem de las listas de información. Se utiliza Flexbox para alinear correctamente el icono con el texto y se añade un sutil efecto de desplazamiento al pasar el cursor para mejorar la interactividad.
@media (max-width: 992px)
En pantallas de tablet, la tarjeta del mes (`.month-card`) pasa de tener dos columnas a una sola, apilando verticalmente la información para una mejor lectura.
@media (max-width: 768px)
En tablets más pequeñas, se reduce el tamaño de la fuente de los títulos principales para evitar que ocupen demasiado espacio.
@media (max-width: 576px)
Para dispositivos móviles, se reduce el espaciado interno de la tarjeta del mes y el selector de región se apila verticalmente para adaptarse a las pantallas estrechas.por_mayor.html
A continuación, se presenta el código fuente del archivo por_mayor.html. Este archivo estructura la página de 'Alianzas por Mayor', diseñada para atraer distribuidores y socios comerciales. La página detalla los diferentes programas de alianza en tarjetas de precios, explica el proceso para convertirse en socio en una sección paso a paso, y culmina con un formulario de contacto para capturar prospectos interesados. La interactividad es manejada por su propio script de JavaScript:
MielPura: Código de la Página de Ventas por Mayor (por_mayor.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alianzas por Mayor - MielPura</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/por_mayor.css">
</head>
<body>
<div class="honeycomb-bg"></div>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="hero-wholesale">
<div class="container">
<h1>Conviértete en Distribuidor Oficial</h1>
<p class="subtitle">Únete a la red de aliados MielPura y crece con nosotros.</p>
<p>Ofrecemos un programa de alianzas diseñado para tiendas agrícolas, asociaciones y grandes apicultores que buscan calidad, respaldo y precios competitivos para llevar su negocio al siguiente nivel.</p>
<a href="#partner-programs" class="btn btn-primary">Ver Programas de Aliados</a>
</div>
</section>
<section class="partner-programs" id="partner-programs">
<div class="container">
<h2 class="section-title">Programas de Alianza</h2>
<p class="section-subtitle">Elige el nivel de alianza que mejor se adapte al volumen y las necesidades de tu negocio. Todos nuestros aliados reciben soporte prioritario.</p>
<div class="programs-grid">
<div class="tier-card">
<div class="tier-icon"><i class="fas fa-award"></i></div>
<h3>Aliado Bronce</h3>
<ul>
<li><i class="fas fa-check-circle"></i>Acceso a precios por volumen</li>
<li><i class="fas fa-check-circle"></i>Soporte técnico por email</li>
<li><i class="fas fa-check-circle"></i>Catálogo digital de productos</li>
<li><i class="fas fa-check-circle"></i>Ideal para compras puntuales</li>
</ul>
<a href="#" class="btn btn-select-plan" data-plan="Bronce">Seleccionar Plan</a>
</div>
<div class="tier-card highlighted">
<div class="tier-badge">Más Popular</div>
<div class="tier-icon"><i class="fas fa-medal"></i></div>
<h3>Aliado Plata</h3>
<ul>
<li><i class="fas fa-check-circle"></i><b>Mejores precios</b> por volumen</li>
<li><i class="fas fa-check-circle"></i>Soporte técnico <b>prioritario</b></li>
<li><i class="fas fa-check-circle"></i>Acceso anticipado a nuevos productos</li>
<li><i class="fas fa-check-circle"></i>Material de marketing para tu tienda</li>
</ul>
<a href="#" class="btn btn-select-plan" data-plan="Plata">Seleccionar Plan</a>
</div>
<div class="tier-card">
<div class="tier-icon"><i class="fas fa-trophy"></i></div>
<h3>Aliado Oro</h3>
<ul>
<li><i class="fas fa-check-circle"></i><b>Máximo descuento</b> posible</li>
<li><i class="fas fa-check-circle"></i><b>Asesor personal</b> dedicado</li>
<li><i class="fas fa-check-circle"></i>Capacitación técnica para tu equipo</li>
<li><i class="fas fa-check-circle"></i>Logística y despachos coordinados</li>
</ul>
<a href="#" class="btn btn-select-plan" data-plan="Oro">Seleccionar Plan</a>
</div>
</div>
</div>
</section>
<section class="journey-section">
<div class="container">
<h2 class="section-title">Nuestro Proceso de Alianza</h2>
<div class="journey-steps">
<div class="step">
<div class="step-number">1</div>
<h4>Contacto Inicial</h4>
<p>Nos envías tu solicitud a través del formulario.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h4>Análisis</h4>
<p>Un asesor evalúa tus necesidades y volumen de compra.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h4>Propuesta</h4>
<p>Te enviamos una cotización a medida con tu nivel de aliado.</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h4>¡Alianza!</h4>
<p>Coordinamos tu primer pedido y te damos la bienvenida.</p>
</div>
</div>
</div>
</section>
<section class="final-cta-section" id="contact-form-section">
<div class="container">
<h2 class="section-title">¿Listo para Crecer con MielPura?</h2>
<p class="section-subtitle">Déjanos tus datos y un asesor se comunicará contigo para iniciar el proceso. ¡Estamos emocionados de tenerte en nuestro equipo!</p>
<form class="wholesale-form" id="wholesale-form">
<div class="form-group">
<label for="nombre-empresa">Nombre de la Empresa o Asociación</label>
<input type="text" id="nombre-empresa" required>
</div>
<div class="form-group">
<label for="email-empresa">Correo Electrónico de Contacto</label>
<input type="email" id="email-empresa" required>
</div>
<div class="form-group">
<label for="plan-seleccionado">Plan de Interés</label>
<input type="text" id="plan-seleccionado" placeholder="Selecciona un plan arriba o escribe aquí" required>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; font-size: 1.1rem; padding: 15px;">Iniciar Alianza</button>
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/navigation.js" defer></script>
<script src="js/por_mayor.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código de la Página de Ventas por Mayor (por_mayor.html)
head
La cabecera de la página. Incluye un título específico para SEO, "Alianzas por Mayor - MielPura", y enlaza la hoja de estilos dedicada para esta página, `por_mayor.css`.
header class="main-nav"
Se reutiliza la cabecera de navegación principal, idéntica a la de las otras páginas, para mantener una experiencia de usuario consistente.
main
Contenedor principal para el contenido de la página de alianzas.
section class="hero-wholesale"
Sección de bienvenida diseñada específicamente para posibles socios comerciales. Comunica la propuesta de valor del programa de distribuidores y tiene un botón de llamada a la acción que lleva a los detalles de los programas.
section class="partner-programs"
Presenta los diferentes niveles de alianza (Bronce, Plata, Oro) en un formato de tabla de precios comparativa.
div class="programs-grid"
Contenedor que utiliza CSS Grid para organizar las tarjetas de los diferentes planes o niveles de alianza.
div class="tier-card"
Tarjeta individual para cada nivel de alianza. Muestra los beneficios de cada plan en una lista. La clase `highlighted` en la tarjeta "Plata" la destaca visualmente como la opción recomendada. El atributo `data-plan` en el botón será usado por JavaScript.
section class="journey-section"
Explica visualmente el proceso para convertirse en socio en una serie de pasos numerados, haciendo que el procedimiento sea fácil de entender para el usuario.
div class="step"
Cada uno de los pasos en la sección del proceso, con su número, título y una breve descripción.
section class="final-cta-section"
La sección final de la página, que contiene la llamada a la acción más importante: el formulario de contacto.
form class="wholesale-form"
Formulario de contacto diseñado para que los interesados dejen sus datos. Este es el principal mecanismo de captura de prospectos de la página.
script src="js/por_mayor.js"
Enlaza el archivo JavaScript específico para esta página. Este script probablemente se encarga de dos funciones clave: 1. Tomar el valor del `data-plan` del botón presionado y rellenar automáticamente el campo "Plan de Interés" en el formulario. 2. Manejar la validación y el envío de los datos del formulario.por_mayor.css
A continuación, se presenta el código fuente del archivo por_mayor.css. Este archivo contiene todos los estilos visuales para la página de 'Alianzas por Mayor'. Es responsable de dar formato a la cabecera, las tarjetas de comparación de los programas de alianza, la línea de tiempo del proceso y el formulario de contacto final. Utiliza técnicas como CSS Grid para la maquetación y pseudo-elementos para detalles gráficos, asegurando que la página sea clara, profesional y adaptable a cualquier dispositivo:
MielPura: Código de Estilos de Ventas por Mayor (por_mayor.css)
.hero-wholesale {
padding: 6rem 2rem;
background: var(--color-hive);
text-align: center;
color: var(--color-white);
}
.hero-wholesale h1 {
font-size: 3.2rem;
color: var(--color-white);
margin-bottom: 0.5rem;
}
.hero-wholesale .subtitle {
font-size: 1.3rem;
color: var(--color-pollen);
margin-bottom: 2rem;
font-weight: 500;
}
.hero-wholesale p {
max-width: 750px;
margin: 0 auto 2rem auto;
color: #ddd;
}
.partner-programs {
padding: 5rem 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: var(--color-hive-light);
max-width: 600px;
margin: 0 auto 3rem auto;
}
.programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: flex-start;
}
.tier-card {
background: var(--color-white);
border-radius: 15px;
box-shadow: var(--shadow);
padding: 2.5rem 2rem;
text-align: center;
border: 2px solid #eee;
transition: all 0.3s ease;
position: relative;
}
.tier-card .tier-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--color-honey);
color: var(--color-hive);
padding: 5px 20px;
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
}
.tier-card.highlighted {
transform: scale(1.05);
border-color: var(--color-honey);
box-shadow: var(--shadow-hover);
}
.tier-card .tier-icon {
font-size: 2.5rem;
color: var(--color-honey-dark);
margin-bottom: 1rem;
}
.tier-card h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.tier-card ul {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.tier-card ul li {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 10px;
}
.tier-card ul i {
color: var(--color-honey);
}
.tier-card .btn {
width: 100%;
background: var(--color-hive);
color: white;
border-color: var(--color-hive);
}
.tier-card.highlighted .btn {
background: var(--color-honey);
color: var(--color-hive);
border-color: var(--color-honey);
}
.journey-section {
padding: 5rem 0;
background: var(--color-pollen-light);
}
.journey-steps {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}
.journey-steps::before {
content: '';
position: absolute;
top: 35px;
left: 10%;
right: 10%;
height: 2px;
background: var(--color-pollen);
z-index: 0;
}
.step {
text-align: center;
width: 20%;
position: relative;
z-index: 1;
}
.step-number {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--color-white);
border: 3px solid var(--color-honey);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem auto;
font-size: 2rem;
font-weight: 700;
color: var(--color-honey-dark);
}
.step h4 {
font-size: 1.2rem;
}
.final-cta-section {
padding: 5rem 0;
text-align: center;
}
.final-cta-section form {
max-width: 700px;
margin: 2rem auto 0 auto;
text-align: left;
}
@media (max-width: 992px) {
.programs-grid {
grid-template-columns: 1fr;
}
.tier-card.highlighted {
transform: scale(1);
}
.tier-card {
margin-bottom: 2.5rem;
}
.journey-steps {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.journey-steps::before {
display: none;
}
.step {
width: 100%;
max-width: 300px;
}
}Explicación del código: MielPura: Código de Estilos de Ventas por Mayor (por_mayor.css)
.hero-wholesale
Define el estilo para la cabecera de esta página específica. Usa un color de fondo sólido y corporativo, y tipografía grande y clara para comunicar el propósito de la página a los posibles socios.
.section-title, .section-subtitle
Clases reutilizables para los títulos y subtítulos de las diferentes secciones de la página, asegurando consistencia en el tamaño de fuente, alineación y márgenes.
.programs-grid
Crea una cuadrícula de tres columnas para mostrar los diferentes planes de alianza uno al lado del otro, facilitando su comparación.
.tier-card
Estiliza cada una de las tarjetas de los planes (Bronce, Plata, Oro). Se les da un fondo, borde, sombra y espaciado para que luzcan como elementos definidos e individuales.
.tier-card .tier-badge
Estiliza la etiqueta "Más Popular". Se usa `position: absolute` para colocarla flotando sobre la parte superior de su tarjeta, haciéndola destacar.
.tier-card.highlighted
Aplica estilos adicionales a la tarjeta que tiene esta clase. `transform: scale(1.05)` la hace ligeramente más grande que las demás, y se le cambia el color del borde y la sombra para atraer la atención del usuario.
.tier-card ul
Da formato a la lista de beneficios dentro de cada tarjeta, eliminando los estilos de lista por defecto y alineando el texto a la izquierda para mayor legibilidad.
.tier-card .btn
Estiliza el botón de selección de plan dentro de cada tarjeta. La tarjeta destacada tiene un estilo de botón diferente para reforzar su importancia.
.journey-section
Define el estilo para la sección que muestra el "Proceso de Alianza".
.journey-steps
Usa Flexbox para distribuir los pasos del proceso de manera uniforme a lo ancho de la sección. `position: relative` es crucial para poder dibujar la línea de tiempo que los conecta.
.journey-steps::before
Crea la línea de tiempo horizontal que conecta visualmente los círculos de cada paso. Se dibuja usando un pseudo-elemento posicionado de forma absoluta detrás de los números.
.step
Estiliza cada paso individual en la línea de tiempo.
.step-number
Da formato al círculo que contiene el número de cada paso. Se centra el número dentro del círculo usando Flexbox y se le aplican colores y bordes para que destaque.
.final-cta-section
Estiliza la sección final de llamada a la acción, centrando el texto y dando un espaciado adecuado al formulario.
@media (max-width: 992px)
En pantallas de tablet, la cuadrícula de planes de 3 columnas pasa a ser de 1 sola columna. La línea de tiempo horizontal se convierte en una lista vertical de pasos para una mejor visualización, y la línea conectora se oculta.mi_perfil.html
A continuación, se presenta el código fuente del archivo mi_perfil.html. Este archivo estructura la página 'Mi Perfil', el panel de control del usuario. Utiliza un sistema de navegación por pestañas para organizar la información en secciones: Historial de Pedidos, Lista de Deseos, Datos Personales y Direcciones. Cada sección se muestra en un panel de contenido, y la funcionalidad de cambio entre pestañas es controlada por JavaScript:
MielPura: Código de la Página de Perfil de Usuario (mi_perfil.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Perfil - MielPura</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/mi_perfil.css">
</head>
<body>
<div class="honeycomb-bg"></div>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="profile-header">
<div class="container">
<h1>Hola de nuevo, Ana</h1>
<a href="#">Cerrar Sesión</a>
</div>
</section>
<div class="container profile-container">
<nav class="profile-tabs">
<button class="tab-btn active" data-tab="pedidos"><i class="fas fa-receipt"></i> Mis Pedidos</button>
<button class="tab-btn" data-tab="deseos"><i class="fas fa-heart"></i> Lista de Deseos</button>
<button class="tab-btn" data-tab="datos"><i class="fas fa-user-edit"></i> Mis Datos</button>
<button class="tab-btn" data-tab="direcciones"><i class="fas fa-map-marker-alt"></i> Direcciones</button>
</nav>
<div class="profile-content">
<div id="pedidos" class="tab-panel active">
<h2>Historial de Pedidos</h2>
<div class="order-card">
<div class="order-header">
<div><strong>Pedido #COL-2025-00124</strong><br><span>Fecha: 02 de Junio, 2025</span></div>
<div><strong>Total: $113.000</strong></div>
<div class="order-status">Entregado</div>
</div>
<div class="order-products">
<img src="img/Alimentador_Techo_Rápido.png" alt="Producto 1">
<img src="img/aumador.jpeg" alt="Producto 2">
<span>+ 1 otro artículo</span>
</div>
<div class="order-actions">
<a href="#" class="btn btn-secondary">Ver Detalles</a>
<a href="#" class="btn btn-primary">Volver a Comprar</a>
</div>
</div>
<div class="order-card">
<div class="order-header">
<div><strong>Pedido #COL-2025-00119</strong><br><span>Fecha: 15 de Mayo, 2025</span></div>
<div><strong>Total: $48.000</strong></div>
<div class="order-status">Entregado</div>
</div>
<div class="order-products">
<img src="img/Alimentador_Techo_Rápido.png" alt="Producto 1">
</div>
<div class="order-actions">
<a href="#" class="btn btn-secondary">Ver Detalles</a>
<a href="#" class="btn btn-primary">Volver a Comprar</a>
</div>
</div>
</div>
<div id="deseos" class="tab-panel">
<h2>Mi Lista de Deseos</h2>
<div class="wishlist-grid">
<div class="product-card">
<div class="product-image"><img src="img/Alimentador_Techo_Rápido.png" alt="Traje de apicultor"></div>
<div class="product-info"><h3>Traje Ventilado Profesional</h3><p class="product-price">$320.000</p><a href="#" class="btn-add-to-cart">Añadir al Carrito</a></div>
</div>
</div>
</div>
<div id="datos" class="tab-panel">
<h2>Mis Datos Personales</h2>
<form>
<div class="form-group">
<label for="nombre">Nombre Completo</label>
<input type="text" id="nombre" value="Ana María Restrepo">
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input type="email" id="email" value="ana.restrepo@email.com">
</div>
<div class="form-group">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" value="+57 321 123 4567">
</div>
<div class="form-group">
<label for="password">Cambiar Contraseña</label>
<input type="password" id="password" placeholder="Nueva contraseña">
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
<div id="direcciones" class="tab-panel">
<h2>Mis Direcciones</h2>
<div class="address-card">
<div>
<strong>Finca La Esperanza</strong><br>
Vereda El Guamal, Yarumal, Antioquia<br>
<small>Dirección principal</small>
</div>
<div>
<a href="#" class="btn btn-secondary">Editar</a>
</div>
</div>
<div class="address-card">
<div>
<strong>Casa Principal</strong><br>
Calle 10 #20-30, Medellín, Antioquia
</div>
<div>
<a href="#" class="btn btn-secondary">Editar</a>
</div>
</div>
<button class="btn btn-primary">Añadir Nueva Dirección</button>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/mi_perfil.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código de la Página de Perfil de Usuario (mi_perfil.html)
head
La cabecera de la página. Incluye el título "Mi Perfil - MielPura" y enlaza la hoja de estilos específica para esta sección, `mi_perfil.css`.
header class="main-nav"
Se reutiliza la cabecera de navegación principal para mantener una experiencia de usuario consistente en todo el sitio.
main
Contenedor principal para el contenido de la página de perfil.
section class="profile-header"
Una cabecera simple que saluda al usuario por su nombre y proporciona un enlace para "Cerrar Sesión".
div class="profile-container"
El contenedor principal que agrupa tanto la navegación por pestañas como el contenido de esas pestañas.
nav class="profile-tabs"
La barra de navegación por pestañas. Contiene botones para cada una de las secciones del perfil de usuario. Cada botón tiene un atributo `data-tab` (ej: `data-tab="pedidos"`) que lo vincula a un panel de contenido específico.
div class="profile-content"
El contenedor donde se alojan todos los paneles de contenido de las pestañas. Solo uno de estos paneles será visible a la vez.
div id="pedidos" class="tab-panel active"
El panel de contenido para la pestaña "Mis Pedidos". La clase `active` indica que este es el panel que se muestra por defecto al cargar la página. Contiene una lista de tarjetas de pedidos (`order-card`).
div class="order-card"
Tarjeta que resume un pedido anterior. Muestra el número de pedido, la fecha, el total, el estado y miniaturas de los productos comprados, junto con acciones como "Ver Detalles" o "Volver a Comprar".
div id="deseos" class="tab-panel"
Panel de contenido para la "Lista de Deseos". Muestra una cuadrícula de productos que el usuario ha guardado para futuras compras.
div id="datos" class="tab-panel"
Panel que contiene un formulario para que el usuario pueda ver y actualizar sus datos personales, como nombre, correo electrónico y contraseña.
div id="direcciones" class="tab-panel"
Panel para la gestión de direcciones de envío. Muestra una lista de las direcciones guardadas (`address-card`) y un botón para añadir nuevas.
footer
Se reutiliza el pie de página global del sitio.
script src="js/mi_perfil.js"
Enlaza el archivo JavaScript crucial para esta página. Este script contiene la lógica para manejar el sistema de pestañas: escucha los clics en los botones de `profile-tabs` y muestra el `tab-panel` correspondiente mientras oculta los demás.mi_perfil.css
A continuación, se presenta el código fuente del archivo mi_perfil.css. Este archivo contiene los estilos visuales para la página 'Mi Perfil'. Se enfoca en dar formato a la cabecera de la página, la estructura del contenedor principal y la cuadrícula de la lista de deseos. También incluye ajustes de responsividad para asegurar que el panel de usuario sea fácil de navegar en cualquier dispositivo, modificando la apariencia de las pestañas en pantallas pequeñas:
MielPura: Código de Estilos del Perfil de Usuario (mi_perfil.css)
.profile-header {
padding: 4rem 2rem;
background: linear-gradient(135deg, var(--color-pollen), var(--color-honey-dark));
text-align: center;
position: relative;
overflow: hidden;
}
.profile-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,0 L100,50 L50,100 L0,50 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
background-size: 100px;
opacity: 0.2;
}
.profile-header .container {
position: relative;
z-index: 2;
}
.profile-header h1 {
font-size: 3rem;
color: var(--color-hive);
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.profile-header a {
color: var(--color-hive-light);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
padding: 10px 20px;
background: var(--color-pollen-light);
border-radius: 50px;
}
.profile-header a:hover {
background: var(--color-honey);
color: var(--color-hive);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.profile-container {
padding: 4rem 0;
}
.wishlist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
@media (max-width: 768px) {
.profile-header {
padding: 3rem 1.5rem;
}
.profile-header h1 {
font-size: 2.2rem;
}
}
@media (max-width: 576px) {
.profile-header h1 {
font-size: 1.8rem;
}
.profile-tabs {
gap: 0;
}
.tab-btn {
flex-grow: 1;
font-size: 0.9rem;
padding: 12px 10px;
}
}Explicación del código: MielPura: Código de Estilos del Perfil de Usuario (mi_perfil.css)
.profile-header
Estiliza la cabecera de la página de perfil con un degradado de colores cálidos y una textura de rombos superpuesta, creando una bienvenida visualmente atractiva para el usuario.
.profile-header::before
Crea la capa de textura de rombos utilizando un SVG como fondo. La baja opacidad asegura que la textura sea sutil y no interfiera con la legibilidad.
.profile-header .container
Asegura que el contenido dentro de la cabecera (título y enlace) se posicione correctamente por encima de la capa de textura decorativa.
.profile-header h1
Define el estilo para el mensaje de bienvenida "Hola de nuevo, Ana", con un tamaño de fuente grande y una sombra de texto suave para darle profundidad.
.profile-header a
Estiliza el enlace "Cerrar Sesión" para que parezca un botón tipo "píldora", con fondo, bordes redondeados y un espaciado interno generoso para que sea fácil de presionar.
.profile-header a:hover
Añade un efecto de interactividad al botón "Cerrar Sesión". Al pasar el cursor, el fondo y el color del texto cambian, el botón se eleva ligeramente y aparece una sombra, dando una respuesta visual clara al usuario.
.profile-container
Aplica un espaciado vertical al contenedor principal del perfil, separando la cabecera del contenido de las pestañas.
.wishlist-grid
Crea una cuadrícula responsiva para los productos en la "Lista de Deseos", permitiendo que se organicen automáticamente en columnas según el espacio disponible.
@media (max-width: 768px)
Reglas para pantallas de tamaño tablet. Se reduce el espaciado y el tamaño de la fuente en la cabecera del perfil para que se ajuste mejor a pantallas más pequeñas.
@media (max-width: 576px)
Reglas para dispositivos móviles. Además de reducir aún más el tamaño del título, se modifica el comportamiento de los botones de las pestañas (`.tab-btn`). `flex-grow: 1` hace que cada botón se estire para ocupar todo el ancho disponible, asegurando que sean fáciles de tocar en pantallas estrechas.carrito.html
A continuación, se presenta el código fuente del archivo carrito.html. Este archivo estructura la página del 'Carrito de Compras', un paso crucial en el proceso de e-commerce. La página está dividida en dos columnas: una para la lista de productos agregados y otra para el resumen del pedido. Incluye funcionalidades para calcular el envío y aplicar cupones de descuento. Es una página altamente dinámica, donde casi todo el contenido, como los productos en el carrito y los cálculos de precios, es manejado por JavaScript:
MielPura: Código del Carrito de Compras (carrito.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrito de Compras - MielPura</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pages/carrito.css">
</head>
<body>
<header class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<div class="logo-icon">
<i class="fas fa-bee"></i>
</div>
<a href="inicio.html">MielPura</a>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item-shop">
<a href="tienda.htm"><i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down fa-xs"></i></a>
<div class="mega-menu">
<div class="mega-menu-column">
<h4><i class="fas fa-hard-hat"></i> Equipamiento</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Colmenas y Partes</a></li>
<li><a href="tienda.htm">Trajes y Protección</a></li>
<li><a href="tienda.htm">Herramientas del Apicultor</a></li>
<li><a href="tienda.htm">Ahumadores</a></li>
<li><a href="tienda.htm">Extractores de Miel</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-heartbeat"></i> Cuidado</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Sanidad y Tratamientos</a></li>
<li><a href="tienda.htm">Nutrición y Alimentación</a></li>
<li><a href="tienda.htm">Cera y Marcos</a></li>
<li><a href="tienda.htm">Reinas y Abejas</a></li>
<li><a href="tienda.htm">Control de Plagas</a></li>
</ul>
</div>
<div class="mega-menu-column">
<h4><i class="fas fa-wine-bottle"></i> Envases</h4>
<ul class="mega-menu-list">
<li><a href="tienda.htm">Envases de Vidrio</a></li>
<li><a href="tienda.htm">Tapas y Etiquetas</a></li>
<li><a href="tienda.htm">Equipos de Envasado</a></li>
<li><a href="tienda.htm">Material para Regalo</a></li>
</ul>
</div>
<div class="mega-menu-promo">
<h5>¿Eres Nuevo Apicultor?</h5>
<p>Tenemos todo lo que necesitas para empezar con el pie derecho.</p>
<a href="tienda.htm"><i class="fas fa-shopping-basket"></i> Ver Kit de Inicio</a>
</div>
</div>
</li>
<li><a href="guias.html"><i class="fas fa-book"></i> Guías</a></li>
<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li><a href="por_mayor.html"><i class="fas fa-boxes"></i> Por Mayor</a></li>
</ul>
<div class="search-container">
<form class="search-bar" action="/search">
<input type="text" placeholder="Buscar productos, ej: 'tratamiento varroa'..." name="q">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="nav-actions">
<a href="mi_perfil.html" class="desktop-only" aria-label="Mi Perfil"><i class="fas fa-user"></i></a>
<a href="carrito.html" class="desktop-only" aria-label="Favoritos"><i class="fas fa-heart"></i></a>
<a href="carrito.html" class="cart-icon" aria-label="Carrito de compras">
<i class="fas fa-shopping-cart"></i>
<span class="cart-badge">3</span>
</a>
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="mobile-menu" id="mobileMenu">
<div class="close-menu" id="closeMenu"><i class="fas fa-times"></i></div>
<ul class="mobile-nav">
<li class="mobile-nav-item"><a href="inicio.html" class="mobile-nav-link"><i class="fas fa-home"></i> Inicio</a></li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link" id="catalogToggle">
<i class="fas fa-store"></i> Tienda <i class="fas fa-chevron-down"></i>
</a>
<div class="mobile-dropdown" id="catalogDropdown">
<a href="tienda.html" class="mobile-nav-link">Ver Todo</a>
<a href="#" class="mobile-nav-link">Equipamiento</a>
<a href="#" class="mobile-nav-link">Cuidado y Sanidad</a>
<a href="#" class="mobile-nav-link">Envases y Empaques</a>
<a href="#" class="mobile-nav-link">Reinas y Abejas</a>
</div>
</li>
<li class="mobile-nav-item"><a href="#" class="mobile-nav-link"><i class="fas fa-book"></i> Guías</a></li>
<li class="mobile-nav-item"><a href="#" class="mobile-nav-link"><i class="fas fa-calendar-alt"></i> Calendario</a></li>
<li class="mobile-nav-item"><a href="#" class="mobile-nav-link"><i class="fas fa-boxes"></i> Por Mayor</a></li>
<li class="mobile-nav-item" style="border-top: 2px solid #eee; padding-top: 10px; margin-top: 10px;">
<a href="mi_perfil.html" class="mobile-nav-link"><i class="fas fa-user"></i> Mi Cuenta</a>
</li>
<li class="mobile-nav-item"><a href="#" class="mobile-nav-link"><i class="fas fa-heart"></i> Mis Favoritos</a></li>
<li class="mobile-nav-item"><a href="carrito.html" class="mobile-nav-link"><i class="fas fa-shopping-cart"></i> Carrito <span class="cart-badge">3</span></a></li>
</ul>
</div>
<div class="overlay" id="overlay"></div>
<main>
<section class="page-header">
<h1><i class="fas fa-shopping-cart"></i> Tu Carrito de Compras</h1>
</section>
<div class="container cart-layout" id="cart-container">
<div class="cart-items-list">
<h2><i class="fas fa-box-open"></i> Tus Productos</h2>
<div id="cart-items-wrapper">
</div>
<div class="cart-actions">
<a href="tienda.html" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Seguir Comprando</a>
<button class="btn btn-secondary" id="update-cart"><i class="fas fa-sync-alt"></i> Actualizar Carrito</button>
</div>
</div>
<aside class="order-summary-card">
<h2><i class="fas fa-receipt"></i> Resumen del Pedido</h2>
<div class="summary-row">
<span>Subtotal</span>
<span id="summary-subtotal">$0</span>
</div>
<div class="summary-row">
<span>Descuento</span>
<span id="summary-discount">$0</span>
</div>
<div class="summary-row">
<span>Envío</span>
<span id="summary-shipping">Calculado abajo</span>
</div>
<div class="summary-row summary-total">
<span>Total</span>
<span id="summary-total">$0</span>
</div>
<div class="shipping-calculator">
<h4><i class="fas fa-truck"></i> Estimar Envío</h4>
<div class="form-group">
<label for="departamento">Departamento</label>
<select id="departamento">
<option>Selecciona un departamento</option>
<option selected>Antioquia</option>
<option>Cundinamarca</option>
</select>
</div>
<div class="form-group">
<label for="ciudad">Ciudad</label>
<input type="text" id="ciudad" placeholder="Ej: Yarumal" value="Yarumal">
</div>
<button class="btn btn-secondary" id="calculate-shipping" style="width: 100%;">Calcular Envío</button>
</div>
<div class="discount-code">
<h4><i class="fas fa-tag"></i> Código de Descuento</h4>
<div class="form-group" style="display:flex; gap:10px;">
<input type="text" id="coupon" placeholder="Ingresa tu cupón">
<button class="btn btn-secondary" id="apply-coupon">Aplicar</button>
</div>
</div>
<button class="btn btn-checkout"><i class="fas fa-lock"></i> Proceder al Pago</button>
</aside>
</div>
<div id="empty-cart-container" class="container" style="display: none;">
<div class="empty-cart-message">
<h2>Tu carrito está vacío</h2>
<p>¡Explora nuestra tienda para encontrar lo que necesitas para tu colmena!</p>
<a href="tienda.html" class="btn btn-primary"><i class="fas fa-store"></i> Ir a la Tienda</a>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4><i class="fas fa-bee"></i> MielPura</h4>
<p>Apoyando a los apicultores de Colombia con equipos, insumos y conocimiento de la más alta calidad.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Navegación</h4>
<ul>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Guías y Recursos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Soporte</h4>
<ul>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Política de Envíos</a></li>
<li><a href="#">Política de Devoluciones</a></li>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Garantías</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contacto</h4>
<p><i class="fas fa-map-marker-alt"></i> Yarumal, Antioquia, Colombia</p>
<p><i class="fas fa-phone"></i> +57 321 123 4567</p>
<p><i class="fas fa-envelope"></i> <a href="mailto:contacto@mielpura.co">contacto@mielpura.co</a></p>
<p><i class="fas fa-clock"></i> Lunes a Viernes: 8am - 6pm</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 MielPura. Todos los derechos reservados. | Diseñado con <i class="fas fa-heart" style="color: #FFB600;"></i> para apicultores</p>
</div>
</footer>
<script src="js/carrito.js" defer></script>
</body>
</html>Explicación del código: MielPura: Código del Carrito de Compras (carrito.html)
head
La cabecera de la página. Incluye el título "Carrito de Compras - MielPura" y enlaza la hoja de estilos específica para esta sección, `carrito.css`.
header class="main-nav"
Se reutiliza la cabecera de navegación principal para mantener una experiencia de usuario consistente en todo el sitio.
main
El contenedor principal para el contenido de la página del carrito.
section class="page-header"
Una cabecera simple que solo contiene el título principal de la página, "Tu Carrito de Compras".
div class="cart-layout"
El contenedor principal que establece el diseño de dos columnas de la página del carrito: la lista de artículos a la izquierda y el resumen del pedido a la derecha.
div class="cart-items-list"
La columna principal que contendrá la lista de todos los productos que el usuario ha añadido al carrito.
div id="cart-items-wrapper"
Este es un contenedor vacío crucial. JavaScript se encargará de generar y mostrar aquí cada uno de los productos del carrito.
div class="cart-actions"
Contiene los botones de acción relacionados con la lista de productos, como "Seguir Comprando" y "Actualizar Carrito".
aside class="order-summary-card"
La barra lateral que muestra un resumen completo del pedido. Funciona como una tarjeta fija con toda la información de costos.
div class="summary-row"
Cada una de estas filas muestra una línea de información, como el Subtotal, Descuento, etc. Los `<span>` con `id` serán actualizados por JavaScript a medida que el carrito cambie.
div class="shipping-calculator"
Una pequeña herramienta dentro del resumen del pedido que permite al usuario estimar el costo de envío seleccionando su departamento y ciudad.
div class="discount-code"
Un campo de texto y un botón que permiten al usuario ingresar y aplicar un código de descuento al total de su compra.
button class="btn-checkout"
El botón principal de llamada a la acción en la página, que lleva al usuario al proceso de pago final.
div id="empty-cart-container"
Un contenedor que está oculto por defecto (`style="display: none;"`). JavaScript lo mostrará únicamente si el carrito de compras está vacío, ofreciendo un mensaje claro y un enlace para volver a la tienda.
script src="js/carrito.js"
Enlaza el archivo JavaScript más importante de esta página. Es el responsable de toda la lógica: renderizar los productos en el carrito, calcular y actualizar los totales, manejar los cupones, estimar el envío y mostrar el mensaje de carrito vacío.carrito.css
A continuación, se presenta el código fuente del archivo carrito.css. Este archivo se dedica a estilizar la página del Carrito de Compras. Define el diseño de dos columnas, da formato a la lista de productos, y estiliza la tarjeta de resumen del pedido, haciéndola 'pegajosa' (sticky) para que permanezca visible. Incluye estilos para elementos interactivos como el selector de cantidad y los botones, además de complejas media queries para reorganizar completamente el contenido en dispositivos móviles, asegurando una experiencia de usuario fluida en el proceso de pago:
MielPura: Código de Estilos del Carrito de Compras (carrito.css)
.page-header {
padding: 4rem 2rem;
text-align: center;
background-color: var(--color-white);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,0 L100,50 L50,100 L0,50 Z" fill="none" stroke="rgba(255,182,0,0.1)" stroke-width="1"/></svg>');
background-size: 100px;
opacity: 0.2;
pointer-events: none;
}
.page-header h1 {
font-size: 3rem;
position: relative;
z-index: 2;
}
.page-header h1 i {
color: var(--color-honey);
margin-right: 15px;
animation: pulse 2s infinite;
}
.cart-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2.5rem;
padding-top: 3rem;
padding-bottom: 5rem;
align-items: flex-start;
}
.cart-items-list {
background: var(--color-white);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.cart-items-list::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, var(--color-honey), var(--color-pollen));
}
.cart-items-list h2 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.cart-items-list h2 i {
color: var(--color-honey);
}
.cart-item-card {
display: grid;
grid-template-columns: 100px 1fr auto auto;
gap: 1.5rem;
align-items: center;
padding: 1.5rem 0;
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.cart-item-card:hover {
background: var(--color-pollen-light);
transform: translateX(5px);
}
.cart-item-card:last-child { border-bottom: none; }
.cart-item-image img {
width: 100%;
border-radius: 10px;
border: 1px solid #eee;
transition: transform 0.3s ease;
}
.cart-item-card:hover .cart-item-image img {
transform: scale(1.05);
}
.cart-item-details h3 {
font-size: 1.2rem;
margin: 0;
color: var(--color-hive);
}
.cart-item-details p {
color: var(--color-hive-light);
margin-top: 0.3rem;
}
.cart-item-quantity .quantity-selector {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.quantity-selector button {
background: var(--color-pollen-light);
border: none;
font-size: 1.2rem;
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease;
color: var(--color-hive);
}
.quantity-selector button:hover {
background: var(--color-honey);
color: white;
}
.quantity-selector input {
width: 40px;
text-align: center;
border: none;
font-size: 1.1rem;
outline: none;
background: white;
font-weight: 600;
}
.cart-item-total {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-honey);
min-width: 100px;
text-align: right;
}
.cart-item-remove button {
background: none;
border: none;
color: #aaa;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.cart-item-remove button:hover {
color: white;
background: #ff6b6b;
transform: rotate(15deg);
}
.order-summary-card {
background: var(--color-white);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
position: sticky;
top: 110px;
border-top: 5px solid var(--color-honey);
}
.order-summary-card h2 {
font-size: 1.8rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 10px;
}
.order-summary-card h2 i {
color: var(--color-honey);
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 1.1rem;
padding: 8px 0;
}
.summary-row:not(.summary-total) {
border-bottom: 1px dashed #eee;
}
.summary-total {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-hive);
border-top: 2px solid var(--color-honey);
padding-top: 1rem;
margin-top: 1rem;
}
.shipping-calculator, .discount-code {
margin-top: 2rem;
border-top: 1px solid #eee;
padding-top: 2rem;
}
.shipping-calculator h4, .discount-code h4 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
}
.shipping-calculator h4 i, .discount-code h4 i {
color: var(--color-honey);
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-hive);
}
.form-group select, .form-group input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group select:focus, .form-group input:focus {
border-color: var(--color-honey);
outline: none;
box-shadow: 0 0 0 3px var(--color-pollen-light);
}
.btn-checkout {
width: 100%;
margin-top: 2rem;
padding: 16px;
font-size: 1.2rem;
background: var(--color-hive);
position: relative;
overflow: hidden;
}
.btn-checkout:hover {
background: var(--color-honey);
color: var(--color-hive);
}
.btn-checkout i {
margin-right: 10px;
}
.btn-checkout::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255,255,255,0.2);
transform: rotate(30deg) translate(0, -50%);
transition: transform 0.6s;
}
.btn-checkout:hover::after {
transform: rotate(30deg) translate(0, 150%);
}
.empty-cart-message {
text-align: center;
padding: 4rem;
background: var(--color-white);
border-radius: 15px;
box-shadow: var(--shadow);
max-width: 600px;
margin: 2rem auto;
}
.empty-cart-message h2 {
color: var(--color-honey);
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.empty-cart-message p {
font-size: 1.1rem;
margin-bottom: 2rem;
color: var(--color-hive-light);
}
.empty-cart-message .btn {
padding: 15px 40px;
font-size: 1.1rem;
}
.cart-actions {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
.cart-actions .btn {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 992px) {
.cart-layout { grid-template-columns: 1fr; }
.order-summary-card { position: static; margin-top: 2rem; }
}
@media (max-width: 768px) {
.cart-item-card {
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto auto auto;
gap: 1rem;
}
.cart-item-image { grid-row: 1 / 5; }
.cart-item-remove { grid-column: 2; grid-row: 1; text-align: right; }
.cart-item-quantity { grid-column: 1 / 3; }
.cart-item-total { grid-column: 1 / 3; text-align: left; }
}
@media (max-width: 576px) {
.page-header h1 { font-size: 2.2rem; }
.cart-actions {
flex-direction: column;
gap: 15px;
}
.cart-actions .btn {
width: 100%;
justify-content: center;
}
}Explicación del código: MielPura: Código de Estilos del Carrito de Compras (carrito.css)
.page-header
Estiliza la cabecera de la página. Se le añade una textura sutil de rombos y una animación de pulso (`pulse`) al icono del carrito para darle vida.
.cart-layout
Crea la estructura principal de la página con dos columnas usando CSS Grid. La primera columna (2fr) es más ancha para la lista de productos, y la segunda (1fr) es más estrecha para el resumen del pedido. `align-items: flex-start` alinea ambas columnas en la parte superior.
.cart-items-list
Estiliza el contenedor principal de la lista de productos como una tarjeta con fondo blanco, sombra y un borde superior decorativo en degradado.
.cart-item-card
Define el diseño de cada producto individual en el carrito, usando CSS Grid para alinear la imagen, detalles, cantidad y total en columnas. Se le añade un sutil efecto de desplazamiento al pasar el cursor.
.cart-item-quantity .quantity-selector
Da formato al selector de cantidad como un grupo compacto de botones e input, con bordes redondeados y efectos `:hover` para indicar interactividad.
.cart-item-remove button
Estiliza el botón para eliminar un producto. Es un círculo simple que, al pasar el cursor, se vuelve rojo y rota ligeramente, un detalle de microinteracción que mejora la experiencia de usuario.
.order-summary-card
Estiliza la tarjeta de resumen del pedido. `position: sticky` y `top: 110px` son claves: hacen que la tarjeta se quede "pegada" en la parte superior de la pantalla mientras el usuario se desplaza por la lista de productos en pantallas grandes.
.summary-row
Define el estilo para cada línea del resumen (Subtotal, Envío, etc.), usando Flexbox para alinear el texto a ambos lados. La fila del total tiene un estilo diferente y más prominente.
.shipping-calculator, .discount-code
Estructura las secciones para calcular el envío y aplicar cupones dentro de la tarjeta de resumen, separándolas con bordes.
.form-group
Clase reutilizable para dar formato a los campos del formulario (etiqueta e input), asegurando un espaciado y alineación consistentes.
.btn-checkout::after
Crea un efecto de "brillo" o "destello" que se anima al pasar el cursor sobre el botón de pago. Se logra con un pseudo-elemento que se desplaza a través del botón.
.empty-cart-message
Define el estilo del mensaje que aparece cuando no hay productos en el carrito, centrándolo y dándole un diseño de tarjeta para que sea claro y atractivo.
.cart-actions
Contenedor para los botones "Seguir Comprando" y "Actualizar Carrito", usando Flexbox para posicionarlos en extremos opuestos.
@media (max-width: 992px)
En tablets, el diseño de dos columnas del carrito se convierte en una sola. La tarjeta de resumen del pedido deja de ser "pegajosa" (`position: static`) y se coloca debajo de la lista de productos.
@media (max-width: 768px)
En tablets más pequeñas, la tarjeta de cada producto (`.cart-item-card`) se reorganiza completamente usando `grid-template-rows`. Los elementos se apilan verticalmente en lugar de horizontalmente para adaptarse mejor al ancho reducido.
@media (max-width: 576px)
En móviles, los botones de acción del carrito se apilan verticalmente y ocupan todo el ancho para que sean fáciles de tocar.address-card.css
A continuación, se presenta el código fuente del archivo address-card.css. Este archivo contiene los estilos para un componente específico y reutilizable: la tarjeta de dirección (address-card). Se utiliza en la página 'Mi Perfil' para mostrar las direcciones guardadas del usuario. El código define la apariencia de la tarjeta, su diseño interno y los efectos interactivos al pasar el cursor sobre ella:
MielPura: Código del Componente Tarjeta de Dirección (address-card.css)
.address-card {
border: 1px dashed #ddd;
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
transition: all 0.3s ease;
}
.address-card:hover {
border-color: var(--color-honey);
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.address-card strong {
color: var(--color-hive);
display: block;
margin-bottom: 0.25rem;
}
.address-card small {
background-color: var(--color-pollen-light);
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
font-size: 0.8rem;
color: var(--color-hive-light);
}
.address-card .btn-secondary {
background: transparent;
border: none;
color: var(--color-hive-light);
}
.address-card .btn-secondary:hover {
background: var(--color-pollen-light);
}Explicación del código: MielPura: Código del Componente Tarjeta de Dirección (address-card.css)
.address-card
Define el estilo base de la tarjeta que muestra una dirección. Se le da un borde discontinuo para diferenciarla de otras tarjetas, espaciado interno y bordes redondeados. Se usa `display: flex` y `justify-content: space-between` para colocar el texto de la dirección a la izquierda y el botón de editar a la derecha.
.address-card:hover
Añade un efecto visual cuando el usuario pasa el cursor sobre la tarjeta. El borde cambia de color, la tarjeta se eleva ligeramente y aparece una sombra, indicando que es un elemento con el que se puede interactuar.
.address-card strong
Estiliza el título de la dirección (ej: "Finca La Esperanza"), dándole un color oscuro y un mayor peso visual. `display: block` asegura que ocupe su propia línea.
.address-card small
Da formato a la etiqueta "Dirección principal". La estiliza como una pequeña "píldora" con un color de fondo suave, bordes redondeados y texto más pequeño para que funcione como un identificador secundario.
.address-card .btn-secondary
Aplica un estilo específico al botón "Editar" dentro de esta tarjeta. Por defecto, no tiene fondo ni borde para que sea más sutil.
.address-card .btn-secondary:hover
Añade un fondo claro al botón "Editar" cuando el usuario pasa el cursor sobre él, proporcionando una respuesta visual de que es un elemento clickeable.banner.css
A continuación, se presenta el código fuente del archivo banner.css. Este archivo contiene los estilos para el componente de banner de oferta especial (.special-offer), utilizado en la página de la Tienda para destacar promociones. El código define un fondo con un degradado llamativo, elementos decorativos y estilos específicos para el texto y el botón de llamada a la acción, creando un bloque visualmente atractivo para captar la atención del cliente:
MielPura: Código del Componente Banner de Oferta (banner.css)
.special-offer {
background: linear-gradient(135deg, var(--color-honey), #FF8F00);
padding: 2.5rem;
border-radius: 15px;
color: white;
margin-bottom: 2.5rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
}
.special-offer::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 100px;
height: 100px;
background: rgba(255,255,255,0.15);
border-radius: 50%;
}
.special-offer h3 {
font-size: 1.8rem;
margin-bottom: 0.8rem;
color: white;
}
.special-offer p {
margin-bottom: 1.2rem;
max-width: 600px;
}
.special-offer .btn {
background: var(--color-hive);
color: white;
border: 2px solid white;
}
.special-offer .btn:hover {
background: white;
color: var(--color-hive);
}Explicación del código: MielPura: Código del Componente Banner de Oferta (banner.css)
.special-offer
Define el estilo del contenedor principal del banner. Usa un fondo de degradado vibrante para llamar la atención, espaciado interno generoso, bordes redondeados y una sombra para darle profundidad. `position: relative` es necesario para posicionar los elementos decorativos internos.
.special-offer::before
Crea un círculo semitransparente en la esquina superior derecha del banner usando un pseudo-elemento. Este es un detalle de diseño sutil que añade un toque de modernidad y evita que el fondo sea un color plano.
.special-offer h3
Estiliza el título del banner, asegurando que el color del texto sea blanco para contrastar con el fondo oscuro y que tenga un tamaño de fuente adecuado.
.special-offer p
Define el estilo del texto descriptivo del banner. Se limita su ancho máximo para que no ocupe todo el espacio en pantallas grandes, mejorando la legibilidad.
.special-offer .btn
Aplica un estilo único al botón dentro de este banner. Se le da un fondo oscuro y un borde blanco para que se diferencie de otros botones del sitio y resalte sobre el fondo del banner.
.special-offer .btn:hover
Define el efecto al pasar el cursor sobre el botón. Invierte los colores (fondo blanco, texto oscuro) para proporcionar una respuesta visual clara de que el elemento es interactivo.button.css
A continuación, se presenta el código fuente del archivo button.css. Este archivo es un módulo fundamental que define los estilos base para todos los botones del sitio. Establece una clase principal (.btn) con las propiedades comunes de apariencia y un efecto de hover interactivo. Luego, utiliza clases modificadoras como .btn-primary y .btn-secondary para crear diferentes variantes de color, permitiendo su reutilización en todo el proyecto. También incluye ajustes responsivos para contextos específicos:
MielPura: Código del Módulo de Botones (button.css)
.btn {
padding: 14px 32px;
text-decoration: none;
border-radius: 50px;
font-weight: 700;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: inline-block;
text-align: center;
border: none;
cursor: pointer;
font-size: 1.1rem;
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.btn-primary {
background-color: var(--color-honey);
color: var(--color-hive);
}
.btn-secondary {
background-color: transparent;
color: white;
border: 2px solid white;
margin-left: 15px;
}
.btn-secondary:hover {
background: white;
color: var(--color-hive);
}
@media (max-width: 768px) {
.hero-buttons .btn {
display: block;
margin-bottom: 15px;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons .btn-secondary {
margin-left: auto;
}
}Explicación del código: MielPura: Código del Módulo de Botones (button.css)
.btn
Esta es la clase base para todos los botones. Define las propiedades comunes como el espaciado interno (`padding`), la forma de píldora (`border-radius: 50px`), el grosor de la fuente y la transición suave para las animaciones.
.btn:hover
Define el efecto visual principal al pasar el cursor sobre cualquier botón. El botón se eleva ligeramente (`transform: translateY(-5px)`) y se le añade una sombra más pronunciada (`box-shadow`), dando una clara respuesta interactiva.
.btn-primary
Esta es la clase modificadora para el botón principal o de acción primaria. Define un color de fondo sólido (usando la variable `--color-honey`) y un color de texto que contrasta.
.btn-secondary
Clase modificadora para los botones secundarios. Se presenta como un botón "fantasma" o "ghost button", con un fondo transparente y un borde sólido. Es ideal para acciones menos importantes.
.btn-secondary:hover
Define el efecto específico para el botón secundario al pasar el cursor. El fondo se vuelve sólido y el texto cambia de color, invirtiendo su apariencia inicial.
@media (max-width: 768px)
Inicia un bloque de reglas que solo se aplican en pantallas de 768px de ancho o menos (tablets y móviles).
.hero-buttons .btn
Dentro de la media query, esta regla se aplica específicamente a los botones que están dentro de la sección "hero". `display: block` y `width: 100%` hacen que los botones ocupen todo el ancho disponible y se apilen verticalmente, lo que es mucho más práctico en pantallas estrechas.card.css
A continuación, se presenta el código fuente del archivo card.css. Este archivo es un módulo de componente que define todos los estilos para la tarjeta de producto (.product-card). Este es uno de los componentes más reutilizados en el sitio, apareciendo en la página de inicio, la tienda y la lista de deseos. El código controla la apariencia, los efectos interactivos de hover, y la disposición interna de todos sus elementos, como la imagen, el precio y el botón de 'Añadir al Carrito':
MielPura: Código del Componente Tarjeta de Producto (card.css)
.product-card {
background: var(--color-white);
border-radius: 15px;
overflow: hidden;
text-align: left;
box-shadow: var(--shadow);
transition: all 0.4s ease;
position: relative;
border: 1px solid #eee;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--color-honey);
color: var(--color-hive);
padding: 5px 15px;
border-radius: 30px;
font-weight: 700;
font-size: 0.9rem;
z-index: 2;
}
.product-image {
position: relative;
overflow: hidden;
height: 280px;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-info {
padding: 1.8rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.product-category {
font-size: 0.85rem;
color: var(--color-honey-dark);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.product-card h3 {
font-size: 1.4rem;
margin: 0.8rem 0;
line-height: 1.3;
flex-grow: 1;
}
.product-price {
font-size: 1.6rem;
font-weight: 700;
color: var(--color-honey);
margin-bottom: 1.5rem;
}
.btn-add-to-cart {
display: block;
width: 100%;
text-align: center;
background-color: var(--color-hive);
color: white;
padding: 12px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
margin-top: auto;
}
.btn-add-to-cart:hover {
background-color: var(--color-honey);
color: var(--color-hive);
}Explicación del código: MielPura: Código del Componente Tarjeta de Producto (card.css)
.product-card
Estiliza el contenedor principal de cada tarjeta de producto. Se usa `display: flex` y `flex-direction: column` para controlar el alineamiento vertical del contenido. `overflow: hidden` es importante para que los bordes redondeados afecten a la imagen.
.product-card:hover
Define el efecto al pasar el cursor sobre la tarjeta. Se eleva ligeramente con `transform: translateY(-10px)` y se aumenta la sombra para dar una sensación de profundidad e interactividad.
.product-badge
Estiliza las etiquetas como "NUEVO" u "OFERTA". Se usa `position: absolute` para colocar la insignia en la esquina superior derecha de la imagen, sobreponiéndose a ella.
.product-image
Define el contenedor de la imagen del producto, dándole una altura fija. `overflow: hidden` es crucial para que el efecto de zoom de la imagen no se salga de los límites del contenedor.
.product-image img
Asegura que la imagen del producto siempre llene el espacio de su contenedor sin deformarse (`object-fit: cover`). Se le añade una transición para que el efecto de zoom sea suave.
.product-card:hover .product-image img
Crea un sutil efecto de zoom en la imagen (`transform: scale(1.05)`) cuando el usuario pasa el cursor sobre la tarjeta completa.
.product-info
Estiliza la sección de texto de la tarjeta. `flex-grow: 1` y `display: flex` son claves aquí para que esta sección ocupe todo el espacio vertical disponible, lo que permite alinear el botón de compra en la parte inferior de manera consistente.
.product-category
Da formato al texto de la categoría del producto (ej: "Equipamiento"), haciéndolo pequeño y en mayúsculas para diferenciarlo del título.
.product-card h3
Estiliza el título del producto. `flex-grow: 1` es una propiedad fundamental que hace que el título se estire verticalmente, empujando el precio y el botón hacia abajo. Esto asegura que todas las tarjetas en una misma fila tengan la misma altura, independientemente de la longitud del título.
.product-price
Destaca el precio del producto con un tamaño de fuente grande y un color llamativo.
.btn-add-to-cart
Estiliza el botón "Añadir al Carrito". `margin-top: auto` es una propiedad de Flexbox que empuja el botón hacia la parte inferior de la tarjeta, logrando una alineación perfecta en todas las tarjetas.
.btn-add-to-cart:hover
Define el cambio de color del botón al pasar el cursor, invirtiendo los colores para una clara respuesta visual.featured-card.css
A continuación, se presenta el código fuente del archivo featured-card.css. Este archivo contiene los estilos para el componente de 'tarjeta de guía destacada' (.featured-guide-card), que se utiliza en la parte superior de la página de Guías para resaltar el artículo más importante. El código crea un diseño de dos columnas para la imagen y el texto, e incluye múltiples efectos interactivos como zoom en la imagen y animaciones al pasar el cursor, además de asegurar su correcta visualización en dispositivos móviles:
MielPura: Código del Componente Guía Destacada (featured-card.css)
.featured-guide-card {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 3rem;
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.featured-guide-card::before {
content: '\f6d3';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
color: var(--color-honey);
opacity: 0.2;
}
.featured-guide-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-5px);
}
.featured-guide-image img {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.featured-guide-card:hover .featured-guide-image img {
transform: scale(1.05);
}
.featured-guide-content {
padding: 3rem;
}
.featured-guide-content .guide-category-tag {
background-color: var(--color-honey);
color: var(--color-hive);
padding: 5px 15px;
border-radius: 30px;
font-weight: 700;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.featured-guide-card:hover .guide-category-tag {
transform: scale(1.1);
}
.featured-guide-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.featured-guide-content .guide-excerpt {
font-size: 1.1rem;
margin-bottom: 2rem;
color: var(--color-hive-light);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-guide-content .btn-primary {
background-color: var(--color-hive);
color: white;
}
.featured-guide-content .btn-primary:hover {
background-color: var(--color-honey);
color: var(--color-hive);
transform: translateY(-3px);
}
@media (max-width: 992px) {
.featured-guide-card {
grid-template-columns: 1fr;
}
.featured-guide-image img {
min-height: 300px;
}
}
@media (max-width: 768px) {
.featured-guide-content h2 { font-size: 2rem; }
}Explicación del código: MielPura: Código del Componente Guía Destacada (featured-card.css)
.featured-guide-card
Define el contenedor principal de la tarjeta. Utiliza CSS Grid para crear un diseño de dos columnas iguales (1fr 1fr), una para la imagen y otra para el texto.
.featured-guide-card::before
Añade un icono de libro de Font Awesome (`\f6d3`) como una marca de agua decorativa en la esquina superior derecha de la tarjeta, reforzando visualmente que se trata de una guía o artículo.
.featured-guide-card:hover
Aplica un efecto al pasar el cursor sobre la tarjeta completa, elevándola y aumentando su sombra para indicar que es un elemento interactivo.
.featured-guide-image img
Asegura que la imagen de la guía ocupe todo el espacio de su contenedor sin distorsionarse (`object-fit: cover`) y le asigna una altura mínima.
.featured-guide-card:hover .featured-guide-image img
Crea un efecto de zoom suave en la imagen cuando el usuario pasa el cursor sobre la tarjeta.
.featured-guide-content
Aplica un espaciado interno generoso a la columna que contiene el texto, para separarlo de los bordes de la tarjeta y de la imagen.
.featured-guide-content .guide-category-tag
Estiliza la etiqueta de la categoría (ej: "Primeros Pasos") como una "píldora" con fondo de color, para que destaque del resto del texto.
.featured-guide-card:hover .guide-category-tag
Añade una sutil animación de crecimiento a la etiqueta de categoría cuando se pasa el cursor sobre la tarjeta, contribuyendo a la sensación de interactividad.
.featured-guide-content .guide-excerpt
Da formato al extracto o resumen de la guía. La propiedad `-webkit-line-clamp: 3` limita el texto a un máximo de tres líneas, cortándolo con puntos suspensivos si es más largo.
.featured-guide-content .btn-primary
Estiliza el botón de "Leer Guía" con colores específicos para este componente, diferenciándolo de otros botones del sitio.
@media (max-width: 992px)
En pantallas de tablet, cambia el diseño de la tarjeta de dos columnas a una sola (`grid-template-columns: 1fr`), apilando la imagen sobre el texto para una mejor visualización.
@media (max-width: 768px)
En tablets más pequeñas, reduce el tamaño de la fuente del título principal de la guía para que se ajuste mejor al espacio disponible.filters.css
A continuación, se presenta el código fuente del archivo filters.css. Este archivo contiene los estilos para el componente de la barra lateral de filtros (.shop-sidebar) de la página de la Tienda. Se encarga de dar formato a los diferentes grupos de filtros, como las categorías y el rango de precios. Una parte fundamental de este código es la lógica de responsividad, que oculta la barra de filtros en móviles y la muestra a través de un botón con una animación de acordeón suave, mejorando la experiencia de usuario en pantallas pequeñas:
MielPura: Código del Módulo de Filtros de la Tienda (filters.css)
.shop-sidebar {
background: var(--color-white);
padding: 2rem;
border-radius: 15px;
align-self: flex-start;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.shop-sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,0 L100,50 L50,100 L0,50 Z" fill="none" stroke="rgba(255,182,0,0.1)" stroke-width="1"/></svg>');
background-size: 100px;
opacity: 0.2;
pointer-events: none;
}
.filter-group {
margin-bottom: 2.5rem;
position: relative;
z-index: 2;
}
.filter-group:last-child {
margin-bottom: 0;
}
.filter-group h4 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--color-pollen);
padding-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 10px;
}
.filter-group h4 i {
color: var(--color-honey);
}
.filter-group ul {
list-style: none;
}
.filter-group li {
margin-bottom: 1rem;
}
.filter-group label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
transition: color 0.3s ease;
}
.filter-group label:hover {
color: var(--color-honey);
}
.filter-group input[type="checkbox"] {
margin-right: 10px;
width: 18px;
height: 18px;
accent-color: var(--color-honey-dark);
transition: transform 0.3s ease;
}
.filter-group input[type="checkbox"]:checked {
transform: scale(1.2);
}
.price-range-slider {
width: 100%;
accent-color: var(--color-honey-dark);
margin-top: 10px;
}
.price-range-values {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
font-weight: 600;
color: var(--color-hive-light);
}
.filter-actions {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
margin-top: 1.5rem;
}
.btn-primary-filter {
background-color: var(--color-honey);
color: var(--color-hive);
font-weight: 700;
}
.btn-primary-filter:hover {
background-color: var(--color-honey-dark);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(224, 168, 0, 0.35);
}
.btn-secondary-filter {
background-color: var(--color-pollen-light);
color: var(--color-hive-light);
border: 2px solid var(--color-pollen);
font-weight: 600;
}
.btn-secondary-filter:hover {
background-color: white;
border-color: var(--color-honey-dark);
color: var(--color-hive);
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.filter-actions .btn {
font-size: 1rem;
padding: 12px 15px;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
}
.mobile-filter-toggle {
display: none;
width: 100%;
background: var(--color-hive);
color: white;
padding: 15px;
font-size: 1.2rem;
border: none;
border-radius: 10px;
cursor: pointer;
text-align: left;
margin-bottom: 1.5rem;
justify-content: space-between;
align-items: center;
}
.mobile-filter-toggle i:last-child {
transition: transform 0.3s ease;
}
@media (max-width: 992px) {
.mobile-filter-toggle {
display: flex;
}
.shop-sidebar {
max-height: 0;
padding: 0 2rem;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease;
margin-bottom: 0;
border: none;
box-shadow: none;
}
.shop-sidebar.open {
max-height: 1200px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--color-pollen-light);
box-shadow: var(--shadow);
}
.shop-sidebar.open + .shop-main {
margin-top: 0;
}
}Explicación del código: MielPura: Código del Módulo de Filtros de la Tienda (filters.css)
.shop-sidebar
Estiliza el contenedor principal de la barra de filtros. Se le da un fondo blanco, sombra y una textura de fondo sutil con el pseudo-elemento `::before`. `align-self: flex-start` asegura que se alinee en la parte superior de su contenedor de grid.
.filter-group
Define el espaciado para cada bloque de filtros (Categorías, Precio, Marcas), separándolos verticalmente.
.filter-group h4
Da formato a los títulos de cada grupo de filtros con un tamaño de fuente, un borde inferior decorativo y un icono.
.filter-group input[type="checkbox"]
Estiliza las casillas de verificación. `accent-color` permite cambiar el color del tic y del fondo de la casilla en navegadores modernos, y se le añade una pequeña animación de escala al marcarla.
.price-range-slider
Estiliza la barra deslizante para el filtro de rango de precios, aplicando un color de acento de la marca.
.price-range-values
Usa Flexbox con `justify-content: space-between` para posicionar los valores de precio mínimo y máximo en los extremos opuestos de la barra deslizante.
.filter-actions
Crea una cuadrícula de dos columnas para los botones "Aplicar" y "Limpiar", dando más espacio y prioridad al botón principal.
.btn-primary-filter, .btn-secondary-filter
Define los estilos específicos para los botones de acción de los filtros, dándoles colores y efectos de `hover` únicos que se diferencian de los botones estándar del sitio.
.mobile-filter-toggle
Estiliza el botón que aparece en dispositivos móviles para mostrar/ocultar los filtros. Por defecto está oculto (`display: none`).
@media (max-width: 992px)
Este es el bloque de código clave para la responsividad. Primero, hace visible el botón `.mobile-filter-toggle`. Luego, oculta la barra de filtros (`.shop-sidebar`) colapsando su altura a cero (`max-height: 0`) y quitando el padding.
.shop-sidebar.open
Esta clase, que se añade con JavaScript, es la que activa la animación de acordeón. Al aplicarla, la `max-height` aumenta a un valor grande, lo que, combinado con la propiedad `transition`, hace que la barra de filtros se despliegue suavemente en lugar de aparecer de golpe.form.css
A continuación, se presenta el código fuente del archivo form.css. Este archivo es un módulo de componente que define los estilos base para los grupos de formulario (.form-group) utilizados en todo el sitio, como en las páginas de 'Mi Perfil' y 'Ventas por Mayor'. Se encarga de estandarizar la apariencia de las etiquetas y los campos de texto, asegurando un diseño limpio, consistente y con una clara indicación visual cuando un campo está seleccionado:
MielPura: Código del Módulo de Formularios (form.css)
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-hive);
}
.form-group input {
width: 100%;
padding: 12px 20px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--color-honey);
box-shadow: 0 0 0 3px var(--color-pollen-light);
}Explicación del código: MielPura: Código del Módulo de Formularios (form.css)
.form-group
Es la clase contenedora para cada par de etiqueta y campo de entrada. Su única función es aplicar un margen inferior para crear un espaciado vertical uniforme entre los diferentes campos del formulario.
.form-group label
Estiliza la etiqueta de texto de cada campo. `display: block` hace que ocupe su propia línea, y se le da un grosor de fuente y un pequeño margen inferior para separarla visualmente del campo de entrada que le corresponde.
.form-group input
Define la apariencia de los campos de texto. `width: 100%` hace que ocupen todo el ancho de su contenedor, `padding` añade un espaciado interno para que el texto no toque los bordes, y `border-radius` redondea las esquinas.
.form-group input:focus
Define el estilo del campo de entrada cuando el usuario hace clic en él (cuando está "enfocado"). `outline: none` elimina el borde por defecto del navegador. En su lugar, se cambia el color del borde y se añade una sombra de caja (`box-shadow`) de color suave para dar una indicación visual clara y atractiva de qué campo se está editando.guide-card.css
A continuación, se presenta el código fuente del archivo guide-card.css. Este archivo contiene los estilos para el componente de 'tarjeta de guía' (.guide-card), utilizado en la página de Guías para mostrar cada artículo. El código no solo define la apariencia de la tarjeta y sus efectos de hover, sino que también incluye la lógica de animación para el filtrado de categorías. Utiliza clases como .visible y .hidden que son manejadas por JavaScript para mostrar y ocultar las tarjetas con una animación suave:
MielPura: Código del Componente Tarjeta de Guía (guide-card.css)
.guide-card {
background: var(--color-white);
border-radius: 15px;
box-shadow: var(--shadow);
overflow: hidden;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(20px);
}
.guide-card.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.guide-card.hidden {
display: none;
}
.guide-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.guide-card-image img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}
.guide-card:hover .guide-card-image img {
transform: scale(1.05);
}
.guide-card-content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
}
.guide-card-content::before {
content: '';
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 2px;
background: linear-gradient(to right, transparent, var(--color-honey), transparent);
}
.guide-card-content .guide-category-tag {
align-self: flex-start;
background-color: var(--color-pollen-light);
color: var(--color-hive-light);
font-weight: 600;
font-size: 0.8rem;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 1rem;
}
.guide-card-content h3 {
font-size: 1.4rem;
margin: 0.5rem 0 1rem 0;
}
.guide-card-content .guide-excerpt {
flex-grow: 1;
margin-bottom: 1.5rem;
color: var(--color-hive-light);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.guide-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--color-hive-light);
border-top: 1px solid var(--color-pollen-light);
padding-top: 1rem;
}
.guide-card-meta a {
color: var(--color-honey-dark);
text-decoration: none;
font-weight: 700;
transition: color 0.3s ease;
}
.guide-card-meta a:hover {
color: var(--color-honey);
}
@media (max-width: 576px) {
.guide-card-image img { height: 180px; }
}Explicación del código: MielPura: Código del Componente Tarjeta de Guía (guide-card.css)
.guide-card
Define el estilo base de cada tarjeta de guía. `opacity: 0` y `transform: translateY(20px)` hacen que las tarjetas estén inicialmente invisibles y ligeramente desplazadas hacia abajo, preparándolas para una animación de entrada.
.guide-card.visible
Clase que se añade con JavaScript para mostrar una tarjeta. Cambia la opacidad a 1 y la posición a la original (`translateY(0)`), lo que, junto con la propiedad `transition`, crea un efecto suave de aparición y deslizamiento hacia arriba.
.guide-card.hidden
Clase de utilidad, usada por la lógica de filtros de JavaScript, que oculta por completo las tarjetas que no pertenecen a la categoría seleccionada usando `display: none`.
.guide-card:hover
Aplica el efecto de elevación y sombra al pasar el cursor sobre la tarjeta, proporcionando una respuesta visual al usuario.
.guide-card-image img
Estiliza la imagen de la guía y le añade una transición para que el efecto de zoom al pasar el cursor sea suave.
.guide-card-content
Da formato a la sección de texto de la tarjeta, usando Flexbox para organizar su contenido verticalmente.
.guide-card-content::before
Crea una línea decorativa con un degradado sutil en la parte superior del contenido de texto, separándolo visualmente de la imagen.
.guide-card-content .guide-category-tag
Estiliza la etiqueta de la categoría como una "píldora" con un color de fondo distintivo.
.guide-card-content .guide-excerpt
Da formato al resumen de la guía. La propiedad `-webkit-line-clamp: 3` es clave para limitar el texto a un máximo de tres líneas, asegurando que todas las tarjetas tengan una altura consistente.
.guide-card-meta
Estiliza la sección inferior de la tarjeta que contiene los metadatos (autor y enlace). Utiliza Flexbox con `justify-content: space-between` para colocar el nombre del autor a la izquierda y el enlace "Leer más" a la derecha.
@media (max-width: 576px)
En pantallas de móviles, reduce la altura de la imagen de la tarjeta para que ocupe menos espacio vertical y el contenido sea más accesible.modal.css
A continuación, se presenta el código fuente del archivo modal.css. Este archivo contiene los estilos para el componente de ventana modal (.video-modal), que se utiliza en la página de Guías para reproducir los videotutoriales. El código crea una superposición de pantalla completa que está oculta por defecto y se activa con JavaScript, aplicando una animación de entrada. También se encarga de estilizar el contenedor del video y el botón de cierre, asegurando que el reproductor mantenga una proporción de 16:9:
MielPura: Código del Componente Ventana Modal (modal.css)
Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.
Comentarios y valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!