NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Media Peridoto" (agencia digital) usando HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. El proyecto debe reproducir fielmente la estructura visual del template analizado, sin copiar textos ni imágenes originales. Usa los siguientes colores: fondo #FFFFFF, primario #0D3B66, secundario #FAF0CA, acento #F4D35E, texto principal #222222, texto secundario #555555. Tipografía: headings con 'Montserrat' (weight 700), cuerpo con 'Inter' (weight 400).
**Header**: barra fija, logo a la izquierda (placeholder SVG), menú central con enlaces Home, Sobre nosotros, Servicios, Proyectos, Blog y dropdown "Páginas" con enlaces genéricos (Shop, Producto, Blog post, Guía, Licencias, 404, Protegida). En la derecha botón "Contacto
4.320 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.320 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, botón de contacto y carrito
- 1.2 Hero principal con título destacado, descripción breve y botones CTA
- 1.3 Sección de Servicios en columnas con iconos y breves descripciones
- 1.4 Galería de Proyectos con tarjetas de imagen y hover
- 1.5 Testimonios en carrusel de citas
- 1.6 Últimos artículos del Blog en grid
- 1.7 CTA de suscripción al boletín
- 1.8 Footer con enlaces de navegación, redes sociales y datos de contacto
ABOUT
- 1.1 Header (reutilizado)
- 1.2 Hero con foto del equipo y texto institucional
- 1.3 Valores destacados en bloques
- 1.4 Equipo con fotos y breves biografías
- 1.5 CTA a proyectos
- 1.6 Footer
SERVICES
- 1.1 Header
- 1.2 Lista de servicios en tarjetas con icono y descripción
- 1.3 Proceso de trabajo en pasos numerados
- 1.4 Preguntas frecuentes en acordeón
- 1.5 CTA de contacto
- 1.6 Footer
PROJECTS
- 1.1 Header
- 1.2 Filtro de categorías
- 1.3 Galería de proyectos en masonry, cada tarjeta con hover y enlace a detalle
- 1.4 Testimonios destacados
- 1.5 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos en cards con imagen, título, extracto y fecha
- 1.3 Sidebar con categorías, últimos posts y newsletter
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto sencillo (nombre, email, mensaje) con validación
- 1.3 Información de contacto y mapa integrado
- 1.4 Footer
SHOP
- 1.1 Header con carrito
- 1.2 Grid de productos con imagen, nombre, precio y botón "Añadir"
- 1.3 Filtro por categoría y orden
- 1.4 Footer
PRODUCT DETAIL
- 1.1 Header
- 1.2 Galería de imágenes del producto
- 1.3 Información del producto (título, descripción, precio, selector de variantes)
- 1.4 Botón "Añadir al carrito"
- 1.5 Sección de productos relacionados
- 1.6 Footer
PROMPTS RELACIONADOS · DIGITAL AGENCY
