RESTAURANTE Y COMIDA · Claude Design · HTML

AromaMilla — Prompt de diseño web para Claude AI

★★★★★4,8 2.113 descargas

Cafetería artesanal y venta de cafés especiales Cultura del café en cada taza.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático de una cafetería artesanal llamada AromaMilla usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. 

**Objetivo**: reproducir el diseño visual y la estructura de la página analizada sin copiar textos ni imágenes originales. Usa patrones de UI: barra de navegación sticky con logo a la izquierda, enlaces (Sobre nosotros, Sabores, Testimonios, Contacto) y un botón primario "Ordenar ahora" con efecto hover que cambia de fondo y muestra un ícono de flecha. 

**Paleta de colores** (extraída del original):
- #1A1A1A (casi negro) para fondos principales
- #F5E9D0 (crema suave) para secciones de texto
- #C59D5F (amarillo café) para acentos y botones
- #FFFFFF (blanco) para textos sobre fondos oscuros
- #7A5C3E (marrón profundo) para botones secundarios

**Tipografía**: Usa "Inter" para cuerpo y "Playfair Display" para títulos (cargados desde Google Fonts). 

**Estructura de la home**: 
1. **Header**: <header class="fixed w-full bg-[#1A1A1A] text-white flex items-center justify-between p-4 md:p-6"> con logo SVG placeholder, menú de anclaje y botón CTA con clases Tailwind para efecto de transición. 
2. **Hero**: sección a pantalla completa con video de fondo (autoplay, loop, muted) usando <video class="absolute inset-0 w-full h-full object-cover" ...>. Overlay semitransparente dark. Dentro, un contenedor centrado con: subtítulo animado, título grande «Coffee Life’s Beginning» donde la palabra "Coffee" está en color #C59D5F, imagen decorativa (SVG placeholder) y texto descriptivo. Botón principal estilizado con clases bg-[#C59D5F] hover:bg-[#7A5C3E] y círculo con ícono SVG. Botón de reproducción de video abre un modal lightbox simple con iframe de YouTube (placeholder). Añade ondas SVG en la parte inferior como separador. 
3. **About**: sección con fondo crema #F5E9D0. Grid de 5 tarjetas (flex wrap) que aparecen con efecto translateX y blur al hacer scroll. Cada tarjeta contiene una imagen placeholder, borde sutil y título en mayúsculas. A la derecha o debajo, bloque de texto con la misión, usando animaciones de fade‑in. 
4. **Products**: sección titulada «Sabores populares». Grid de tarjetas 3‑columna en desktop, 1‑columna en móvil. Cada tarjeta incluye video corto (loop sin sonido) o imagen, nombre del sabor y breve descripción. Efecto hover escala ligera y sombra. 
5. **Testimonials**: carrusel simple con JavaScript que recorre testimonios (texto + avatar). Fondo #1A1A1A, texto blanco y acentos #C59D5F. 
6. **Footer**: fondo negro, columnas con enlaces de navegación, iconos de redes sociales (SVG), y bloque de contacto con email, dirección y teléfono. Texto en #F5E9D0, enlaces en #C59D5F con hover underline. 

**Interactividad**: 
- Menú responsive: botón hamburger que muestra/oculta el menú en móvil con transición de altura. 
- Scroll‑reveal: usa IntersectionObserver para aplicar clases de opacidad y desplazamiento a los bloques (subtítulo, tarjetas, textos). 
- Botón CTA con animación de círculo giratorio al hover. 
- Lightbox de video simple: al hacer clic en botón "Ver vídeo" muestra un overlay negro con iframe centrado y botón de cerrar. 

**Requisitos técnicos**: 
- Incluir Tailwind CDN `<script src="https://cdn.tailwindcss.com"></script>` y configurarlo con los colores custom mediante `tailwind.config = {theme:{extend:{colors:{primary:'#C59D5F',secondary:'#7A5C3E',bgDark:'#1A1A1A',bgLight:'#F5E9D0'}}}};` al inicio del script. 
- Importar fuentes con `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">`. 
- Todo el código en un solo archivo HTML, con estilo inline de Tailwind y scripts al final del body. 
- Optimizar para SEO básico: meta charset, viewport, título «AromaMilla – Café artesanal», meta descripción y enlaces rel="preconnect" a Google Fonts. 

Entrega el código listo para copiar‑pegar, respetando las normas de no reproducir contenido literal del sitio original.

---

## 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>
```

4.321 caracteres · 51 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, enlaces a secciones y botón destacado
1.2 Hero con subtítulo, título resaltado, imagen decorativa, texto descriptivo, botón principal y botón de reproducción de vídeo, fondo de vídeo loop y ondas decorativas
1.3 Sección "Sobre nosotros" con tarjetas animadas de categorías de café y texto de misión con efectos de aparición
1.4 Sección "Sabores populares" con galería de tarjetas de productos, cada una con video corto o imagen estática
1.5 Sección de testimonios y llamada a la acción
1.6 Pie de página con enlaces, redes sociales e info de contacto

PRODUCTOS

2.1 Lista de productos destacados con tarjetas, imagen o video, nombre y breve descripción
2.2 Filtro de categorías (opcional) y botón de compra

SOBRE NOSOTROS

3.1 Historia de la marca con texto y fondo ilustrado
3.2 Equipo y valores

TESTIMONIOS

4.1 Carrusel de testimonios con foto, nombre y comentario

CONTACTO

5.1 Formulario simple de contacto y mapa embebido
5.2 Información de dirección, teléfono y correo

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: AromaMilla
Sector: Cafetería artesanal y venta de cafés especiales
Claim: Cultura del café en cada taza

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces a secciones y botón destacado
1.2 Hero con subtítulo, título resaltado, imagen decorativa, texto descriptivo, botón principal y botón de reproducción de vídeo, fondo de vídeo loop y ondas decorativas
1.3 Sección "Sobre nosotros" con tarjetas animadas de categorías de café y texto de misión con efectos de aparición
1.4 Sección "Sabores populares" con galería de tarjetas de productos, cada una con video corto o imagen estática
1.5 Sección de testimonios (placeholder) y llamada a la acción final
1.6 Pie de página con enlaces de navegación, redes sociales e información de contacto

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

AromaMilla — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

PRODUCTOS

SOBRE NOSOTROS

TESTIMONIOS

CONTACTO

Otros prompts de la misma categoría

Kiku Sabor

Línea Áurea

Ágora Verde

AgriPulse