RESTAURANTE Y COMIDA · Claude Design · HTML

Vértice Nocturno — Prompt de diseño web para Claude AI

★★★★★4,6 4.113 descargas

Bar de copas y lounge de ambiente urbano Espacio íntimo para conversaciones con sabor.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia Vértice Nocturno, un bar lounge urbano. Usa solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un archivo único. Mantén la siguiente estructura y estilos:

**Paleta de colores**: #0D0D0D (fondo negro), #E0E0E0 (texto claro), #B71C1C (rojo acento), #212121 (gris oscuro). 
**Tipografía**: 'Inter' para cuerpo y títulos, peso 400‑700, tamaños fluidos (clamp). 

**Header**: barra fija, fondo semi‑transparente negro, logo "Vértice Nocturno" a la izquierda, menú hamburguesa a la derecha que despliega una lista vertical con enlaces a #home, #about, #menu, #lounge. Animación suave de apertura/cierre.

**Sección Hero (#home)**: contenedor full‑height con imagen de fondo (placeholder) centrada, efecto parallax al hacer scroll. Título animado letra por letra ("Vértice Nocturno") usando JS y clases de opacidad/transform. Dos botones primarios con borde rojo y texto blanco, efecto hover de expansión de líneas verticales y horizontales como en el original.

**Sección About (#about)**: título grande "Sobre Nosotros", subtítulo descriptivo, galería de 4 imágenes en collage (grid 2x2, bordes redondeados). Texto explicativo a la derecha con párrafos y botón secundario con mismo estilo que los botones del hero.

**Sección Menú (#menu)**: encabezado "Carta de Cócteles". Lista de tarjetas en grid responsivo (2‑col en tablet, 4‑col en desktop). Cada tarjeta muestra imagen de cóctel, nombre (h3) y breve descripción. Botón "Ver más" opcional. Usa clases Tailwind para sombra suave y hover escala.

**Sección Lounge (#lounge)**: encabezado "Lounge". Grid de 3 ítems, cada uno con imagen grande, overlay de texto centrado (p.ej., "Barra de latón", "Rincones de terciopelo", "Iluminación tenue"). Hover reduce opacidad de la imagen y resalta texto.

**Footer**: fondo negro, texto gris claro con enlaces a redes sociales (iconos SVG), dirección ficticia y correo contacto.

**Interactividad**: 
- Menú hamburguesa toggle (JS). 
- Animación de título hero (JS). 
- Smooth scroll para enlaces de ancla. 
- Hover effects en botones y tarjetas.

**Requisitos técnicos**:
- Incluye `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">`.
- Tailwind CDN: `<script src="https://cdn.tailwindcss.com"></script>` con configuración de colores personalizada.
- Todo el CSS debe estar en clases Tailwind, sin estilos personalizados externos.
- JS debe estar al final del body, sin dependencias externas.
- Usa atributos `data-*` si necesitas marcar elementos para animaciones.
- Optimiza imágenes con atributos `loading="lazy"` y `srcset` placeholder.
- Asegura que la página sea 100% responsive y accesible (alt en imágenes, roles apropiados).

Entregar el código completo listo para copiar‑pegar en un archivo `index.html`.

---

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

3.162 caracteres · 50 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo y navegación hamburguesa
1.2 Hero con imagen de fondo, título animado y botones primarios
1.3 About con título, subtítulo, collage de fotos y texto descriptivo + botón
1.4 Menú con tarjetas de cócteles (imagen, nombre, descripción)
1.5 Lounge con grid de imágenes y captions

MENÚ

1.1 Lista de cócteles como tarjetas individuales (reutiliza bloque de Menú de Home)

ABOUT

1.1 Bloque de texto y collage de imágenes (reutiliza bloque About de Home)

LOUNGE

1.1 Grid de ítems visuales con título breve (reutiliza bloque Lounge de Home)

PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Vértice Nocturno
Sector: Bar de copas y lounge de ambiente urbano
Claim: Espacio íntimo para conversaciones con sabor

Bloques de la home

1.1 Header con logo y navegación hamburguesa
1.2 Hero con imagen de fondo, título animado letra por letra y dos botones primarios
1.3 About con título, subtítulo, galería de 4 imágenes tipo collage y texto descriptivo + botón
1.4 Menú con lista de cócteles en tarjetas, imagen, nombre y descripción
1.5 Lounge con grid de 3 ítems, cada uno con imagen y texto breve

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

Vértice Nocturno — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

MENÚ

ABOUT

LOUNGE

Otros prompts de la misma categoría

Kiku Sabor

Línea Áurea

Ágora Verde

AgriPulse