NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Codelia Tech" (agencia digital de desarrollo de software) usando HTML estático, Tailwind CSS a través del CDN y JavaScript vanilla en un único archivo. Replicar fielmente la estructura y estilo del sitio original analizado, sin copiar textos ni imágenes. Necesario:
- Paleta de colores: #0D0D0D (negro profundo), #FFFFFF (blanco), #1A73E8 (azul acento), #F5F5F5 (gris claro), #FF5722 (naranja detalle).
- Tipografía: "Inter", sans-serif para cuerpo; "Space Grotesk" para títulos.
- Header: logo textual "Codelia Tech" con animación de letra, menú colapsable móvil, enlaces Home, About, Services, Blog, Contact y botón "Learn More".
- Hero: sección a pantalla completa con video de fondo automático, overlay oscuro, título grande "Hola, soy Codelia
3.525 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.525 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 y botón "Learn More"
- 1.2 Hero con título principal, subtítulo, botón y video de fondo
- 1.3 Sección negra "About Me" con texto descriptivo y barra de experiencia
- 1.4 Bloque de información adicional con imagen y métricas
- 1.5 Sección "Services" con título y lista de cards animadas (Frontend, Backend, Databases, …)
- 1.6 Footer con enlaces a páginas principales y datos de contacto
ABOUT US
- 2.1 Header reutilizado
- 2.2 Hero interior con encabezado y descripción
- 2.3 Historia y valores en bloques de texto e imágenes
- 2.4 Equipo con tarjetas de miembros
- 2.5 Footer común
SERVICES
- 3.1 Header reutilizado
- 3.2 Lista detallada de servicios con iconos animados
- 3.3 Casos de estudio en grid
- 3.4 CTA final
- 3.5 Footer común
BLOG
- 4.1 Header reutilizado
- 4.2 Grid de artículos con imágenes, títulos y extractos
- 4.3 Sidebar con categorías y suscripción
- 4.4 Footer común
CONTACT
- 5.1 Header reutilizado
- 5.2 Formulario de contacto con campos nombre, email, mensaje
- 5.3 Mapa incrustado
- 5.4 Información de contacto
- 5.5 Footer común
PROMPTS RELACIONADOS · DIGITAL AGENCY
