HOTEL Y ALOJAMIENTO · Claude Design · HTML

LunaHost — Prompt de diseño web para Claude AI

★★★★★4,7 4.319 descargas

Plantilla web para hoteles, resorts y alojamientos vacacionales Diseña tu sitio de hospedaje sin complicaciones.

↓ 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 que reproduzca el diseño y la estructura de una landing page para una plantilla de reservas hoteleras, usando la marca ficticia **LunaHost**. El proyecto debe estar contenido en un único archivo HTML que incluya Tailwind CSS vía CDN (`https://cdn.tailwindcss.com`) y JavaScript vanilla para las interacciones (menú hamburguesa, carrusel de imágenes, lightbox de vídeo y scroll suave a anclas). Utiliza la siguiente paleta de colores: Primario #0D3B66, Secundario #FAF0CA, Acento #F4D35E, Texto #222222, Fondo #FFFFFF. Tipografía principal: "Inter", sans‑serif, y headings con "Playfair Display" (cargar desde Google Fonts). 

**Estructura requerida**:
1. **Header** (fixed, bg‑white, sombra ligera) con logo SVG ficticio, navegación horizontal (Demo, Features, Figma File, Usability) y botón CTA "Buy Now" (estilo degradado de primario a acento). En móvil, colapsar en hamburguesa que despliegue el menú.
2. **Hero**: contenedor de ancho máximo 1240px, con dos columnas. Izquierda: título grande "Crea un sitio de reservas elegante y moderno", párrafo descriptivo, botón CTA "Explore Demo" (same gradient) y enlace lightbox que abre un vídeo embebido (YouTube placeholder). Derecha: carrusel horizontal automático de 6 imágenes de hoteles (placeholders "https://picsum.photos/seed/1/500/300" etc.) con transición suave y controles de navegación.
3. **Sección Core Features**: fondo ligeramente gris (#FAF0CA), centrado, con subtítulo "Core Features", heading "Descubre las características clave" y una grid de 4 tarjetas (2 columnas en móvil, 4 en desktop). Cada tarjeta muestra un número grande (por ejemplo "17+"), título ("Total Pages" etc.) y texto descriptivo. Utilizar animación de entrada al hacer scroll (opacity + translateY).
4. **Bloque Figma File**: sección con fondo blanco, título "Archivo Figma incluido", texto explicativo y botón "Solicitar archivo" que abre el cliente de correo a `mailto:hola@lunahost.com?subject=Solicitud%20Figma`.
5. **Footer**: fondo primario, texto blanco, columnas con enlaces de navegación, redes sociales (iconos SVG simples) y datos de contacto (email, teléfono ficticio). Añadir copyright "© 2026 LunaHost".

**Requisitos técnicos**:
- Todo el CSS debe generarse con clases Tailwind; evita CSS personalizado salvo para animaciones clave (puedes usar `@keyframes` dentro de una etiqueta `<style>` mínima).
- El menú hamburguesa y el carrusel deben controlarse con JavaScript puro (no dependencias externas). El carrusel debe avanzar automáticamente cada 3 s y permitir avanzar/retroceder manualmente.
- El lightbox de vídeo debe mostrarse como overlay semi‑transparente con el iframe centrado.
- Asegura accesibilidad: atributos `alt` en imágenes, `aria-label` en botones, foco visible.
- Añade meta viewport, título, descripción y favicon genérico.
- El archivo debe ser auto‑contenible y listo para abrirse en cualquier navegador sin servidor.

Entrega el código HTML completo listo para copiar‑pegar.

---

## 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.319 caracteres · 35 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú y botón CTA.
2.1 Hero con título, descripción, botones CTA, video lightbox y carrusel de imágenes.
3.1 Sección de características principales con 4 tarjetas numeradas.
4.1 Bloque de solicitud de archivo Figma con formulario de email.
5.1 Footer con enlaces y datos de contacto.

DEMO (ancla #demo)

1.1 Mini‑hero que muestra una demostración interactiva del sitio.

FEATURES (ancla #Features)

1.1 Encabezado de sección con subtítulo "Core Features".
1.2 Rejilla de 4 tarjetas: Total Pages, Total Sections, Total Components, Figma File Included.

USABILITY (ancla #usability)

1.1 Texto descriptivo sobre la usabilidad y rendimiento del template.

CONTACT (ancla #contact)

1.1 Formulario de contacto sencillo con campos nombre, email y mensaje.

FOOTER

1.1 Conjunto de enlaces de navegación, iconos sociales y datos de contacto.

PROMPTS RELACIONADOS · HOTEL Y ALOJAMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: LunaHost
Sector: Plantilla web para hoteles, resorts y alojamientos vacacionales
Claim: Diseña tu sitio de hospedaje sin complicaciones

Bloques de la home

1.1 Cabecera fija con logo, menú responsivo y botón "Buy Now".
2.1 Hero principal con título, subtítulo, botones CTA y vídeo lightbox, acompañado de una galería de imágenes en carrusel.
3.1 Sección "Core Features" con subtítulo, encabezado y rejilla de tarjetas que muestra números y descripciones.
4.1 Bloque para solicitar el archivo Figma con texto explicativo y botón de email.
5.1 Footer con enlaces de navegación y datos 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