HOTEL Y ALOJAMIENTO · Claude Design · HTML

Hotel Casa Verena — Prompt de diseño web para Claude AI

★★★★★4,6 1.469 descargas

Hotel boutique clásico con encanto histórico y servicios premium Habitaciones con vistas, silencio y tiempo para ti.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo en un único archivo HTML con Tailwind CSS por CDN y JavaScript vanilla para un hotel boutique ficticio llamado 'Hotel Casa Verena' (dominio hotelcasaverena.com, email hola@hotelcasaverena.com, año 2025). Sector: hotel boutique clásico con encanto histórico, gastronomía de autor y servicios premium. Claim: 'Habitaciones con vistas, silencio y tiempo para ti'. Todo el copy debe ser original en español de España, en tono editorial pausado, sin jerga marketinera, sin precios concretos.

ALCANCE: una sola página HTML que represente la HOME completa, navegable por anclas. Incluye también, debajo de la home y separadas con id propio, versiones resumidas de las páginas: habitaciones, detalle de habitación, experiencias, restaurante, sobre el hotel, blog y contacto. El menú principal enlaza a cada sección por id.

STACK: HTML5 + Tailwind CSS vía CDN (cdn.tailwindcss.com) + JS vanilla embebido. Nada de frameworks externos ni dependencias de build. Usa imágenes placeholder de Unsplash con URLs reales temáticas (hotel, habitación, restaurante, terraza, jardín, spa) con parámetros de tamaño.

PALETA (configúrala en tailwind.config inline):
- Fondo principal crema cálido: #F4EFE6
- Fondo alterno claro: #FBF8F2
- Texto principal tinta cálida: #1F1A14
- Texto secundario gris cálido: #6B6357
- Acento terracota: #B5572B
- Acento terracota oscuro hover: #8E4220
- Línea sutil: #E5DDD0
- Verde botánico para detalles: #4A5A3D

TIPOGRAFÍA: usa Google Fonts. Titulares con 'Cormorant Garamond' (serif elegante, pesos 400 y 600, con itálicas para acentos). Cuerpo y UI con 'Inter' (400, 500, 600). Eyebrow/overlines en Inter mayúsculas con letter-spacing amplio. Titulares hero muy grandes (clamp 56px a 120px), line-height ajustado, kerning cuidado.

HEADER: barra superior fina con iconos sociales a la izquierda (Facebook, YouTube, Twitter, Instagram con SVG inline simples), logo centrado en serif ('Casa Verena' con un pequeño glifo) y a la derecha icono de menú hamburguesa + botón 'Reservar' en terracota. Al hacer scroll se vuelve sticky con fondo crema sólido y sombra muy sutil. El click en hamburguesa abre un overlay fullscreen centrado con la navegación principal en serif grande: Inicio, Habitaciones, Experiencias, Restaurante, Sobre el hotel, Diario, Contacto. Incluye animación fade y blur de fondo.

FOOTER: fondo tinta cálida (#1F1A14) con texto crema. Cuatro columnas: 1) logo + breve descripción + redes; 2) Hotel (Habitaciones, Experiencias, Restaurante, Spa); 3) Información (Sobre nosotros, Diario, Cómo llegar, Política de privacidad); 4) Newsletter con input de email y botón 'Suscribirme'. Línea inferior con © 2025 Hotel Casa Verena y selector de idioma ficticio ES/EN.

HOME — bloques en este orden exacto:

1.1 HERO: pantalla completa (min-h-screen). Imagen de fondo de fachada de hotel clásico con overlay oscuro al 25%. Overline pequeño 'Hotel boutique · desde 1928'. Titular serif a dos líneas en blanco crema, muy grande: 'Un refugio clásico / para tiempos lentos'. Subtítulo a una columna estrecha. Dos botones: 'Reservar estancia' (terracota relleno) y 'Descubrir el hotel' (outline crema). Indicador de scroll abajo animado.

1.2 BARRA DE RESERVAS: tarjeta flotante que solapa el final del hero, fondo crema con sombra suave, cuatro campos con labels finas en mayúsculas (Llegada, Salida, Huéspedes, Habitación) y botón terracota 'Comprobar disponibilidad'. En móvil se apila en vertical.

1.3 BIENVENIDA: dos columnas. Izquierda overline 'Nuestra casa' y titular serif grande 'Una historia escrita en piedra, madera y luz natural'. Derecha párrafo editorial de 4-5 líneas sobre la filosofía del hotel + enlace subrayado 'Leer nuestra historia →'.

1.4 SELLOS: fila horizontal con 5-6 menciones ficticias (guías de viaje, asociaciones de hoteles con encanto) representadas como texto en serif fino monocromo con líneas separadoras verticales.

1.5 HABITACIONES SLIDER: titular de sección 'Habitaciones' + enlace 'Ver todas'. Slider horizontal (implementado con scroll-snap y flechas JS) con 5 tarjetas grandes: imagen vertical, nombre serif ('Suite Mirador', 'Habitación Jardín', 'Doble Clásica', 'Suite Biblioteca', 'Habitación Patio'), pequeña descripción y enlace 'Ver habitación →'.

1.6 EXPERIENCIAS: grid de 3 columnas con imágenes verticales grandes. Tarjetas: 'Spa y aguas termales', 'Cenas a la luz de las velas', 'Rutas por el valle'. Cada tarjeta con etiqueta en overline, título serif y línea breve.

1.7 RESTAURANTE: dos columnas. Izquierda imagen grande de plato/restaurante. Derecha overline 'Restaurante Verena', titular serif 'Cocina de raíz, mantel de lino', párrafo editorial y lista con guiones de servicios (desayuno de autor, menú degustación, carta de vinos, terraza estival). Botón outline 'Reservar mesa'.

1.8 MARQUEE: tira horizontal a ancho completo con texto serif grande en movimiento continuo (animación CSS infinita): 'lujo silencioso · terraza con vistas · biblioteca · jardín botánico · spa · gastronomía de autor · ' repetido. Fondo terracota con texto crema.

1.9 CONTADORES: cuatro bloques en fila con números grandes serif animados al entrar en viewport (usa IntersectionObserver): '97 años de historia', '42 habitaciones', '12 premios internacionales', '8.400 huéspedes al año'. Bajo cada número un texto fino en mayúsculas.

1.10 TESTIMONIOS: fondo crema alterno. Slider de 3 testimonios con comilla serif gigante decorativa, cita editorial de 3 líneas, nombre del huésped y origen ('Marta L., Bilbao'). Puntos de paginación abajo.

1.11 UBICACIÓN: dos columnas. Izquierda 'mapa' estilizado (puede ser un bloque CSS con líneas suaves simulando un mapa o una imagen de mapa monocromo). Derecha datos: dirección ficticia, teléfono, email, cómo llegar (coche, tren, aeropuerto) en lista.

1.12 CTA FINAL: sección a ancho completo con imagen de fondo de habitación con luz cálida, overlay oscuro. Titular serif centrado 'Tu próxima estancia / empieza aquí' y botón terracota grande 'Reservar ahora'.

1.13 FOOTER (descrito arriba).

PÁGINAS INTERNAS (después de la home, cada una con su id y un padding generoso, accesibles desde el menú):

#habitaciones: hero corto, filtros por tipo (chips), grid de 6 habitaciones, comparativa de servicios en tabla elegante.

#detalle-habitacion: galería mosaico de 5 imágenes, cabecera con nombre y datos, descripción editorial, servicios en 3 columnas con iconos SVG, caja lateral sticky de reserva.

#experiencias: hero, grid masonry de 6 experiencias, experiencia destacada del mes en bloque grande.

#restaurante: hero con imagen del chef ficticio 'Inés Carbajal', filosofía, tabs de carta (Desayuno / Almuerzo / Cena) con listado de platos ficticios sin precios, galería de 4 platos.

#sobre-el-hotel: hero con año 1928, timeline horizontal con 5 hitos, grid de equipo (4 personas ficticias con foto, nombre y cargo), valores en 4 iconos.

#diario: grid de 6 artículos con categoría, fecha y titular serif.

#contacto: dos columnas con datos + formulario (nombre, email, teléfono, mensaje, botón terracota), bloque FAQ con 5 preguntas desplegables (acordeón JS).

REQUISITOS TÉCNICOS:
- Diseño totalmente responsive (mobile-first, breakpoints sm/md/lg/xl).
- Animaciones sutiles al hacer scroll con IntersectionObserver: fade-up para titulares y bloques.
- Cursor personalizado opcional en desktop (un círculo pequeño que sigue al ratón con mix-blend-mode difference) — implementación ligera.
- Smooth scroll nativo (scroll-behavior: smooth) y anclas funcionales desde el menú.
- Acordeón de FAQ, slider de habitaciones y testimonios funcionando con JS vanilla.
- Marquee con animación CSS infinita.
- Contadores animados al entrar en viewport.
- Accesibilidad: alt en imágenes, aria-labels en botones de iconos, contraste correcto.
- Sin errores en consola. Código limpio, comentado por secciones.
- Favicon mediante emoji SVG (🏛) inline en el head.

Entrega un único archivo .html funcional listo para abrir en navegador.

7.965 caracteres · 79 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero a pantalla completa con imagen y titular serif
1.2 Barra de reservas con fechas y huéspedes
1.3 Bloque de bienvenida editorial a dos columnas
1.4 Tira de sellos y reconocimientos
1.5 Slider de habitaciones destacadas
1.6 Grid de experiencias (3 columnas)
1.7 Bloque del restaurante
1.8 Marquee de palabras clave
1.9 Contadores animados
1.10 Testimonios de huéspedes
1.11 Mapa y datos de contacto
1.12 CTA final de reserva
1.13 Footer extenso con newsletter

HABITACIONES

2.1 Hero secundario con titular 'Nuestras habitaciones' y breadcrumb
2.2 Filtros por tipo (individual, doble, suite, familiar)
2.3 Listado en grid de habitaciones con imagen, nombre, metros y servicios
2.4 Bloque comparativa de servicios incluidos por categoría
2.5 CTA a reserva
2.6 Footer

DETALLE DE HABITACIÓN

3.1 Galería de imágenes grande en mosaico
3.2 Cabecera con nombre, metros, capacidad y precio orientativo
3.3 Descripción larga editorial
3.4 Listado de servicios incluidos en columnas
3.5 Bloque de planos / distribución
3.6 Caja lateral sticky de reserva
3.7 Habitaciones relacionadas
3.8 Footer

EXPERIENCIAS

4.1 Hero con título 'Experiencias Verena'
4.2 Grid masonry de experiencias
4.3 Bloque destacado de la experiencia del mes
4.4 Bloque de paquetes combinados
4.5 Footer

RESTAURANTE

5.1 Hero con imagen del chef y titular serif
5.2 Bloque de filosofía gastronómica
5.3 Carta destacada en tabs (desayuno, almuerzo, cena)
5.4 Galería de platos
5.5 Bloque de reservas de mesa
5.6 Footer

SOBRE EL HOTEL

6.1 Hero histórico con año de fundación
6.2 Timeline horizontal de hitos
6.3 Bloque del equipo en grid
6.4 Bloque de valores en iconos
6.5 Galería de la casa
6.6 Footer

BLOG

7.1 Hero con título 'Diario del hotel'
7.2 Post destacado horizontal grande
7.3 Grid de artículos con categoría y fecha
7.4 Paginación
7.5 Footer

CONTACTO

8.1 Hero corto con título 'Contacto'
8.2 Bloque dos columnas: datos del hotel + formulario
8.3 Mapa estilizado a ancho completo
8.4 Bloque FAQ desplegable
8.5 Footer

PROMPTS RELACIONADOS · HOTEL Y ALOJAMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Hotel Casa Verena
Sector: Hotel boutique clásico con encanto histórico y servicios premium
Claim: Habitaciones con vistas, silencio y tiempo para ti

Bloques de la home

1.1 Hero a pantalla completa con imagen de fachada del hotel, overline pequeño, titular serif gigante a dos líneas y subtítulo bajo
1.2 Barra flotante de reservas con campos llegada / salida / huéspedes / habitación y botón de comprobar disponibilidad
1.3 Bloque introductorio de bienvenida en dos columnas: titular serif a la izquierda + párrafo editorial y enlace a la historia del hotel a la derecha
1.4 Tira de logos / sellos de reconocimientos y guías de viaje (estilo minimalista monocromo)
1.5 Galería de habitaciones tipo slider horizontal con tarjetas grandes (imagen, nombre, breve descripción y enlace 'ver habitación')
1.6 Sección 'Experiencias' en grid de 3 columnas con imágenes verticales y etiquetas (spa, gastronomía, rutas)
1.7 Bloque del restaurante con imagen grande a la izquierda y texto + lista de servicios a la derecha
1.8 Marquee horizontal con palabras clave del hotel (lujo silencioso, terraza, biblioteca, jardín)
1.9 Contadores animados (años de historia, habitaciones, premios, huéspedes al año)
1.10 Testimonios en formato cita editorial con avatar y nombre del huésped, slider de 3 testimonios
1.11 Bloque doble: mapa estilizado de ubicación + datos de contacto y cómo llegar
1.12 CTA final a pantalla ancha sobre imagen oscurecida con titular serif y botón de reservar
1.13 Footer extenso con columnas (sobre el hotel, habitaciones, experiencias, contacto), redes sociales, newsletter y línea legal

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