NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una agencia digital llamado "Estudio Digital Ónix" (estudiodigitalonix.com) usando HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La paleta de colores: fondo #FFFFFF, texto principal #111111, acentos #000000 y gris suave #F5F5F5. Tipografía: Inter (Google Fonts) para todo el texto, tamaño base 16px, títulos en peso 700.
Estructura:
- Header fijo con logo a la izquierda (placeholder), menú horizontal (Home, About, Work, Blog, Contact) y enlaces sociales (Instagram, Facebook, Twitter, LinkedIn, Dribbble) a la derecha. Menú con subrayado animado al pasar el cursor.
- Hero ocupando la pantalla completa, con título grande "Estudio Digital Ónix", subtítulo "Ideas claras, códigos limpios" y una animación Lottie (cargar desde URL pública) centrada b
3.808 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.808 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ú principal y enlaces sociales
- 2.1 Hero con título, subtítulo y animación
- 3.1 Sección Home: grid de tres tarjetas con imagen y nombre
- 4.1 Sección Work: grid de tres tarjetas con imagen y nombre
- 5.1 Sección Blog: grid de tres tarjetas con imagen y nombre
- 6.1 Sección Pages: grid de cuatro tarjetas con imagen y nombre
- 7.1 Footer: sitemap, contacto, newsletter y copyright
ABOUT
- 1.1 Header (reutiliza del home)
- 2.1 Hero con título "Sobre nosotros" y texto descriptivo
- 3.1 Bloque de valores y equipo en columnas
- 4.1 Footer (reutiliza del home)
WORK
- 1.1 Header
- 2.1 Hero con título "Nuestro trabajo"
- 3.1 Galería de proyectos en grid con filtrado
- 4.1 Footer
BLOG
- 1.1 Header
- 2.1 Hero con título "Noticias y artículos"
- 3.1 Lista de entradas con imagen, título y extracto
- 4.1 Footer
CONTACT
- 1.1 Header
- 2.1 Hero con título "Contáctanos"
- 3.1 Formulario de contacto (nombre, email, mensaje)
- 4.1 Información de ubicación y teléfono
- 5.1 Footer
PROMPTS RELACIONADOS · DIGITAL AGENCY
