NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Media Helio siguiendo el estilo del template analizado. Utiliza HTML5 + Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo. Paleta de colores: primario #0D3B66, secundario #FAF0CA, acento #F4D35E, texto oscuro #1B1B1B, fondo #FFFFFF. Tipografía: headings con "Poppins" (font-weight 600), cuerpo con "Inter" (font-weight 400).
Estructura y componentes:
- Header fijado, logo a la izquierda, menú horizontal (Home, About, Project, Pages > Services, Contact, Blog), botón primario "SEE MY WORK" con efecto hover, ícono hamburguesa para móvil que abre un overlay con numeración de enlaces (1. Home, 2. About, ...).
- Hero sección: contenedor split 2 columnas. Izquierda texto "Hello there, I’m" + heading grande con nombre ficticio "Aurora Val
3.925 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.925 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 principal (Home, About, Project, Pages > Services, botón "SEE MY WORK") y menú móvil
- 1.2 Hero: saludo "Hello there, I’m", nombre ficticio en heading grande, copy descriptivo, botón "LET’S TALK", texto grande de fondo "Digital portfolio"
- 1.3 Global line decorative (tres líneas paralelas)
- 1.4 Icono plus central
- 1.5 Video section: encabezados rotativos (UI DESIGNER, PRODUCT DESIGNER, BRAND DESIGNER) y video looping de fondo
- 1.6 Global line decorative segunda vez
- 1.7 About section: título grande, párrafo descriptivo, botón "LEARN ABOUT MORE"
- 1.8 Footer (no incluido en el fragmento pero implícito en plantilla): enlaces de navegación, redes sociales, datos de contacto
ABOUT
- 2.1 Header reutilizado
- 2.2 Bloque de presentación con foto y texto amplio sobre la agencia
- 2.3 Galería de trabajos o testimonios (no detallado en el HTML)
- 2.4 Llamada a la acción para contactar
PROJECT
- 3.1 Header
- 3.2 Grid de proyectos con imágenes y hover animado
- 3.3 Detalle de proyecto con vídeo o imágenes y descripción
SERVICES
- 4.1 Header
- 4.2 Lista de servicios con iconos y descripciones breves
- 4.3 CTA para solicitar presupuesto
CONTACT
- 5.1 Header
- 5.2 Formulario de contacto simple (nombre, email, mensaje)
- 5.3 Mapa o información de ubicación
BLOG
- 6.1 Header
- 6.2 Lista de artículos con imágenes destacadas y extractos
- 6.3 Paginación o carga infinita
PRIVACY & POLICY
- 7.1 Header
- 7.2 Texto legal estático
404
- 8.1 Header
- 8.2 Mensaje de error y botón volver al inicio
PROMPTS RELACIONADOS · AGENCIA DIGITAL
