NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web completa para la marca ficticia **Aula Cobalto** (industria y soluciones de ingeniería) usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Replicar exactamente la arquitectura visual del sitio analizado:
- **Paleta de colores**: tonos gris oscuro (#1A1A1A), gris medio (#4A4A4A), azul acero (#0A74DA), acento blanco (#FFFFFF).
- **Tipografía**: Inter (sans‑serif) para títulos y Open Sans para cuerpo, tamaños responsivos (h1 48px, h2 36px, p 16px).
- **Header**: barra fija con logo a la izquierda, menú mega‑dropdown con tres niveles (Home, About, Pages) y botón "Inicia tu proyecto" con efecto hover.
- **Hero**: video loop a pantalla completa, overlay semi‑transparente, título grande, subtítulo y botón CTA idéntico al del header.
- **Bloques**:
3.598 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.598 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, navegación mega‑menu y botón destacado
- 1.2 Hero video a pantalla completa con overlay y botón principal
- 1.3 Sección de valores con iconos y texto breve
- 1.4 Cuadrícula de servicios con mini‑descripciones
- 1.5 Testimonios en carrusel sencillo
- 1.6 Llamada a la acción con botón grande
- 1.7 Footer con información de contacto, enlaces rápidos y redes sociales
ABOUT
- 2.1 Sub‑hero con título y párrafo introductorio
- 2.2 Historia de la empresa en dos columnas
- 2.3 Misión, visión y valores en tarjetas
- 2.4 Equipo destacado con fotos y cargos
- 2.5 CTA para contactar
SERVICES
- 3.1 Lista de servicios en tarjetas con icono y descripción corta
- 3.2 Sección de casos de éxito con imágenes
- 3.3 Formulario breve de solicitud de presupuesto
BLOG
- 4.1 Grid de artículos con imagen, título y resumen
- 4.2 Sidebar con categorías y últimos posts
CONTACT
- 5.1 Formulario de contacto completo
- 5.2 Mapa incrustado
- 5.3 Información de oficina y teléfono
FAQ
- 6.1 Preguntas frecuentes en acordeón
- 6.2 Botón de soporte rápido
PROMPTS RELACIONADOS · EDUCATION
