COMERCIO ELECTRÓNICO · Tailwind CSS · Vanilla JS · HTML

Línea Áurea – Moda sostenible con diseño minimalista

★★★★★4,7 1.110 descargas

Tema web para la marca ficticia Línea Áurea que combina moda y estilo de vida con una estética minimalista y colores elegantes. Incluye header fijo, hero a pantalla completa, galería responsive y carrito lateral, todo con Tailwind CSS y JavaScript puro. Optimizado para SEO y accesibilidad.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "Línea Áurea" (moda y estilo de vida) usando solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. Reproduce fielmente la siguiente estructura y estilo sin copiar texto original:

- **Paleta de colores**: #1a1a1a (fondo principal), #f5f5f5 (texto claro), #e63946 (accent rojo), #ffffff (blanco), #757575 (gris secundario).
- **Tipografía**: Fuente "Inter", peso regular 400 y negrita 600, tamaños responsive (h1 3rem, h2 2rem, p 1rem).
- **Header**: barra fija con logo textual "Línea Áurea" a la izquierda, menú horizontal (Home, About, Shop, Blog) centrado, botón de carrito a la derecha con contador. En móviles colapsa a icono de hamburguesa que abre un panel lateral.
- **Cart sidebar**: panel deslizante desde la derecha, lista de productos con mini‑imagen, nombre, opciones, cantidad editable y botón eliminar; subtotal y botón "Continuar al checkout".
- **Hero**: sección full‑width con imagen de fondo (placeholder) y overlay oscuro, título grande "Descubre la elegancia minimalista" y botón CTA "Explorar colección" centrados.
- **Bloque de valores**: tres columnas con icono (placeholder SVG) y texto breve (Calidad, Sostenibilidad, Diseño).
- **Galería de productos**: grid responsive (1‑4 columnas) de tarjetas con imagen, nombre, precio y botón "Añadir al carrito"; efecto hover que eleva la tarjeta.
- **Testimonios/contadores**: sección con fondo gris claro, número animado (ej. 10+ años) y breve descripción.
- **Footer**: fondo negro, cuatro columnas: Navegación, Información, Newsletter (campo email + botón "Suscribirme"), Redes sociales (iconos SVG). Texto legal pequeño.
- **Páginas adicionales**: About, Shop, Blog, cada una con header y footer idénticos; contenido estructurado según la tabla.
- **Interactividad**: menú móvil, carrito abierto/cerrado, contador de items, animación de números, scroll suave.
- **Requisitos técnicos**: usar Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`), iniciar configuración de colores personalizados; cargar fuente Inter desde Google Fonts; todos los estilos en clases Tailwind, sin CSS externo. JS debe estar al final del body, sin librerías externas.
- **Accesibilidad**: usar atributos ARIA apropiados para menú, carrito y formularios.

Entrega el código listo para copiar‑pegar en un archivo index.html que reproduzca el diseño descrito, manteniendo la semántica correcta y respetando las buenas prácticas de HTML5.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.811 caracteres · 34 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo, menú de navegación y botón de carrito lateral
1.2 Hero de imagen a pantalla completa con título y botón CTA
1.3 Bloque de valores (3 columnas con icono y texto)
1.4 Galería de productos destacados (grid 4 columnas, hover)
1.5 Testimonios con contador de años de experiencia
1.6 Footer con enlaces, newsletter y redes

ABOUT US

2.1 Cabecera idéntica a la home
2.2 Imagen hero con texto descriptivo
2.3 Historia de la marca en dos columnas (texto + imagen)
2.4 Equipo en cards circulares
2.5 Footer común

SHOP

3.1 Cabecera idéntica
3.2 Filtros lateral izquierdo (categorías, talla, precio)
3.3 Grid de productos (tarjetas con foto, nombre, precio, botón "Añadir")
3.4 Paginación inferior
3.5 Footer común

BLOG

4.1 Cabecera idéntica
4.2 Lista de artículos en cards con imagen, título y excerpt
4.3 Barra lateral con categorías y últimos posts
4.4 Footer común

CART (sidebar)

5.1 Lista de items en el carrito con mini‑imagen, nombre, opciones y cantidad
5.2 Subtotal y botón de checkout
5.3 Botón para cerrar el sidebar

PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Línea Áurea
Sector: Moda y estilo de vida
Claim: Ideas que se visten

Bloques de la home

1.1 Cabecera con logo, menú de navegación y botón de carrito lateral
1.2 Hero de imagen a pantalla completa con título y botón de llamada a acción
1.3 Bloque de valores: iconos + texto breve en columnas
1.4 Galería de productos destacados en grid responsive
1.5 Testimonios / sección de confianza con contador animado
1.6 Footer con columnas de enlaces, suscripción y redes sociales

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Línea Áurea – Moda sostenible con diseño minimalista

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

SHOP

BLOG

CART (sidebar)

Otros prompts de la misma categoría

Línea Aurora

Lino & Cañamo

Lumenova

Lúmina Creations