NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático para la marca ficticia **Formación Rubí** (agencia multidisciplinar de diseño y desarrollo digital) usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. El proyecto debe reproducir el layout y los patrones visuales del sitio analizado, sin copiar texto ni imágenes originales. Utiliza los siguientes requisitos:
**Paleta de colores** (extraída del original):
- Fondo principal: #0A0A0A (casi negro)
- Texto principal: #FFFFFF
- Acento principal: #FF6B6B (rojo coral)
- Acénto secundario: #4A90E2 (azul brillante)
- Gris neutro: #F4F4F4
**Tipografía**: fuente principal `Inter` (peso 400‑700) para textos y `Playfair Display` para títulos destacados.
**Estructura**:
1. **Header** – barra superior con logo a la izquierda, botón de menú ham
4.705 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.705 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, botón de menú y enlace "Get started"
- 2.1 Hero izquierda: iconos sociales y texto "Based In Los Angeles"
- 2.2 Hero centro: tipografía rotada "Lúmina" y "Creativa", collage de imágenes rotadas
- 2.3 Hero derecha: etiquetas de servicios en movimiento y flecha de scroll
- 3.1 Bloque Servicios: título "Servicios", subtítulo, imagen descriptiva y texto introductorio
- 3.2 Contadores animados con cifras incrementales
- 4.1 Footer (enlaces de navegación, redes y datos de contacto)
ABOUT
- 1.1 Header reutilizado
- 2.1 Bloque de presentación con foto y texto descriptivo
- 3.1 Valores y metodología en tarjetas
- 4.1 Footer común
SERVICES
- 1.1 Header reutilizado
- 2.1 Lista de servicios en tarjetas con iconos
- 3.1 Sección de casos de estudio destacados
- 4.1 Footer común
PROJECTS
- 1.1 Header reutilizado
- 2.1 Galería tipo grid de proyectos con filtrado
- 3.1 Detalle del proyecto seleccionado con imágenes y descripción
- 4.1 Footer común
CONTACT
- 1.1 Header reutilizado
- 2.1 Formulario de contacto sencillo (nombre, email, mensaje)
- 3.1 Mapa incrustado y datos de ubicación
- 4.1 Footer común
PROMPTS RELACIONADOS · EDUCATION
