NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático para la marca ficticia **Alma Serena** (estudio de bienestar) usando **HTML con Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. El diseño debe reproducir los siguientes patrones visuales y estructurales extraídos del ejemplo:
- **Paleta de colores**: tonos suaves y neutros; principal #F5F5F5 (fondo), acento #A8D5BA (verdes pastel), texto principal #2C2C2C, botones #6C8E7F.
- **Tipografía**: `font-sans` de Google Fonts (Inter) para cuerpo, títulos con `font-serif` (Playfair Display).
- **Header**: barra fija con logo a la izquierda, menú hamburguesa que despliega un overlay vertical con enlaces (Home, About, Classes, Schedule, Pricing, Contact). A la derecha un botón destacado "Join us" con borde sólido.
- **Preloader**: pantalla gris claro con lo
4.091 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.091 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 Cabecera fija con logo y menú
- 1.2 Botón destacado "Join us"
- 1.3 Hero título dividido (rest / better) con animaciones
- 1.4 Descripción del hero y botón "Begin your journey"
- 1.5 Imagen de fondo de hero
- 1.6 Preloader y cursor personalizado (scripts opcionales)
ABOUT
- 1.1 Cabecera idéntica a Home
- 1.2 Banner con título y subtítulo
- 1.3 Texto descriptivo del estudio
- 1.4 Imagen o galería
- 1.5 Llamada a la acción
CLASSES
- 1.1 Cabecera idéntica
- 1.2 Lista de clases en grid con imágenes y breves descripciones
- 1.3 Botón "Ver más" para cada clase
- 1.4 Sección de testimonios opcional
SCHEDULE
- 1.1 Cabecera idéntica
- 1.2 Calendario o tabla de horarios de clases
- 1.3 Botón para reservar o inscribirse
PRICING
- 1.1 Cabecera idéntica
- 1.2 Tarjetas de precios con planes y beneficios
- 1.3 Botón de contratación
CONTACT
- 1.1 Cabecera idéntica
- 1.2 Formulario de contacto (nombre, email, mensaje)
- 1.3 Información de ubicación y mapa
- 1.4 Enlaces a redes sociales
FOOTER
- 1.1 Enlaces de navegación secundarios
- 1.2 Datos de contacto y suscripción al newsletter
- 1.3 Copyright y política de privacidad
PROMPTS RELACIONADOS · BELLEZA / SPA
