NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático en un único archivo HTML que reproduzca el diseño de una cafetería premium ficticia llamada Mesa Alba. Usa Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). La paleta de colores: fondo principal #1a1a1a, overlay negro con opacidad 60% (#00000099), acentos cálidos #d2691e y texto blanco #ffffff, gris suave para textos secundarios #c4c4c4. Tipografía: headings en 'Playfair Display' (serif), body en 'Inter' (sans‑serif).
**Header**: barra fija con logo SVG placeholder, enlaces horizontales (Inicio, Sobre Nosotros, Café, Menú, Galería, FAQ, Testimonios, Contacto, Blog) y botón de búsqueda que abre un overlay con input y botón. Incluye mega‑menú bajo "Todas las páginas" con dos columnas de enlaces (Home, About, Menu, Product Details, Coffee/Roastery, Galle
4.029 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.029 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Barra de navegación fija con logo, enlaces y mega‑menú
- 1.2 Hero con imagen de fondo, overlay y enlaces a categorías de café
- 1.3 Bloque de presentación con título, descripción y botón principal
- 1.4 Lista de enlaces rápidos a categorías dentro del hero (Decaf, Filter, Espresso, Cold Brew, Single Origin, Signature Blends)
- 1.5 Barra de búsqueda emergente con campo y botón
- 1.6 Footer con información de contacto, enlaces legales y redes sociales
ABOUT US
- 2.1 Cabecera interior con título de página
- 2.2 Texto descriptivo de la marca y su historia
- 2.3 Imagen ilustrativa
- 2.4 Equipo y valores
COFFEE
- 3.1 Cabecera interior con título "Café"
- 3.2 Grid de tarjetas de producto con imagen, nombre, descripción breve y botón "Ver detalle"
- 3.3 Filtro por tipo de café
MENU
- 4.1 Lista de bebidas y alimentos disponibles
- 4.2 Detalle de cada ítem con foto y descripción
GALLERY
- 5.1 Galería de imágenes estilo masonry
- 5.2 Lightbox para visualización ampliada
FAQ
- 6.1 Preguntas frecuentes en formato acordeón
TESTIMONIALS
- 7.1 Carrusel de testimonios de clientes con foto y texto
CONTACT US
- 8.1 Formulario de contacto (nombre, email, mensaje)
- 8.2 Mapa de ubicación y horarios
BLOG
- 9.1 Lista de artículos con imagen destacada, título, extracto y fecha
- 9.2 Paginación
BLOG POST
- 10.1 Artículo completo con título, imagen, contenido y sección de comentarios
PROMPTS RELACIONADOS · RESTAURANT AND FOOD
