NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando HTML, Tailwind CSS CDN y JavaScript vanilla (un solo archivo) que reproduzca el diseño visual y la estructura de un estudio creativo llamado Estética Ónix.
- Marca: Estética Ónix, claim "Diseño que ilumina ideas".
- Paleta de colores: #0A0A0A (negro profundo), #FFFFFF (blanco), #F5A623 (ámbar vibrante), #E2E8F0 (gris claro). Usa el ámbar para botones y acentos.
- Tipografía: "Inter" para títulos y cuerpo, carga desde Google Fonts.
- Header: barra superior fija, logo SVG ficticio a la izquierda, menú horizontal con enlaces Home, About, Projects, Services, Blog, Contact. En móvil colapsa a ícono hamburguesa que abre un overlay con los enlaces y un botón destacado "Contact".
- Hero: sección a pantalla completa con fondo de video auto‑reproducido, bucle y sin
3.771 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.771 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 y menú responsivo
- 1.2 Hero: saludo, nombre, video de fondo, foto, descripción y contadores
- 1.3 Sección Projects: título y grid de tarjetas de proyectos
- 1.4 Footer: navegación secundaria, redes sociales, información legal
ABOUT
- 2.1 Header reutilizado
- 2.2 Bloque de presentación personal con foto grande y texto descriptivo
- 2.3 Timeline de experiencia profesional
- 2.4 Footer
PROJECTS
- 3.1 Header reutilizado
- 3.2 Galería filtrable de proyectos (cards con hover y enlace)
- 3.3 Paginación simple
- 3.4 Footer
SERVICES
- 4.1 Header reutilizado
- 4.2 Listado de servicios con iconos y descripciones
- 4.3 Testimonios en carousel
- 4.4 Footer
BLOG
- 5.1 Header reutilizado
- 5.2 Lista de artículos con imagen destacada, título y extracto
- 5.3 Sidebar con categorías y tags
- 5.4 Footer
CONTACT
- 6.1 Header reutilizado
- 6.2 Formulario de contacto (nombre, email, mensaje) con validación JS
- 6.3 Información de contacto y mapa incrustado
- 6.4 Footer
PROMPTS RELACIONADOS · BEAUTY / SPA
