NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático con HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La marca ficticia es Spa Ónix (estudio de diseño y desarrollo). Usa la paleta: #0A0A0A (fondo negro), #FFFFFF (texto), #FF6F61 (accento coral), #F4F4F4 (gris claro), #212121 (gris oscuro). Tipografía: "Inter" para títulos y "Roboto" para cuerpo, ambas cargadas desde Google Fonts.
HEADER: barra fija superior con fondo negro semi‑transparente, logo SVG a la izquierda, menú horizontal centrado (Home, About, Projects, Services, Blog, Contact) en texto blanco, y un botón "Contact" a la derecha con fondo coral, borde redondeado y efecto hover de oscurecer.
HERO (home): sección a pantalla completa, fondo negro. Columna izquierda con: redes sociales en línea (Instagram, Twitter/X, Linkedin) en texto
4.155 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.155 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 Header con logo, menú y botón Contacto
- 1.2 Hero (texto intro, redes sociales, categorías, título, ubicación, foto)
- 1.3 Bloque "Sobre mí"
- 1.4 Sección de Portafolio (título, texto, grid de tarjetas)
- 1.5 Footer minimalista
ABOUT
- 1.1 Header con logo, menú y botón Contacto
- 1.2 Hero secundario con título y foto
- 1.3 Texto largo de presentación y timeline de experiencia
- 1.4 Footer
PROJECTS
- 1.1 Header con logo, menú y botón Contacto
- 1.2 Grid de proyectos (imagen, título, categorías, año)
- 1.3 Paginación o carga incremental
- 1.4 Footer
SERVICES
- 1.1 Header con logo, menú y botón Contacto
- 1.2 Lista de servicios con iconos y descripciones breves
- 1.3 CTA de contacto
- 1.4 Footer
BLOG
- 1.1 Header con logo, menú y botón Contacto
- 1.2 Lista de artículos con miniatura, título, extracto y fecha
- 1.3 Sidebar con categorías y últimos posts
- 1.4 Footer
CONTACT
- 1.1 Header con logo, menú y botón Contacto
- 1.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 1.3 Información de contacto y mapa
- 1.4 Footer
PROMPTS RELACIONADOS · BEAUTY / SPA
