Tienda KONSTRUCT – Landing de práctica

Landing page estática desarrollada como proyecto de aprendizaje frontend, enfocada en la maquetación de un catálogo de tienda.
El sitio simula una sección de productos de un e-commerce e incluye navegación, filtros laterales y un grid de productos.

El objetivo principal del proyecto fue practicar diseño responsive con CSS puro, la organización visual de secciones comerciales y el uso de tipografías e iconos vía CDN, sin frameworks ni JavaScript.

Objetivo del proyecto

• Practicar maquetación responsive sin frameworks.
• Organizar visualmente un catálogo de tienda (filtros, destacados y listado).
• Aplicar buenas prácticas de estructura HTML y separación de estilos.
• Utilizar recursos externos (iconos y tipografías) mediante CDN.

Características

• Header con navegación principal y menú hamburguesa en dispositivos móviles.
• Hero con título de sección y breadcrumb simulado (HOME / PRODUCTS).
• Sidebar lateral con:
  • Buscador visual
  • Filtro de precio estático
  • Categorías
  • Productos destacados con precios rebajados
• Grid de 9 productos con:
  • Badges de oferta
  • Precios
  • Valoraciones con estrellas
  • Paginación de ejemplo
• Footer con:
  • Descripción de la marca
  • Información de contacto
  • Formulario simple de mensaje
• Diseño responsive mediante media queries:
  • Ajuste de columnas
  • Comportamiento del menú
  • Tamaño de tarjetas y secciones

Stack

• HTML5
• CSS3
• Font Awesome (CDN) para iconos

Scripts

• El proyecto no requiere dependencias ni proceso de build.
• Puede ejecutarse directamente en el navegador.

Formas de ejecución:

• Abrir index.html directamente.
• Usar un servidor local (por ejemplo, Live Server).

Estructura del proyecto

/ index.html # Maquetado completo: header, breadcrumb, filtros, productos y footer style.css # Estilos base, grid de productos, componentes y footer style-media.css # Media queries para tablets y móviles img/ # Recursos gráficos y productos

Cómo probar el proyecto

1. Clonar o descargar el repositorio.
2. Abrir el archivo index.html en el navegador.
3. Ajustar el ancho de la ventana para comprobar el comportamiento responsive.

Notas de aprendizaje

• Práctica de maquetación de e-commerce usando solo HTML y CSS.
• Uso de Flexbox y Grid para distribuir filtros, tarjetas y footer.
• Separación de estilos base y media queries para mejorar la legibilidad.
• Implementación de iconos y tipografía externa mediante CDN.
• Enfoque en estructura visual y experiencia responsive sin JavaScript.