NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Estudio Digital Lira" (agencia digital) usando únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Emplea la siguiente paleta de colores: #0D0D0D (fondo principal), #1A1A1A (sectores), #E91E63 (acento rosa eléctrico), #FFFFFF (texto), #CCCCCC (texto secundario). Tipografía: Inter (cargar desde Google Fonts) para títulos y parrafos, peso 400‑700.
Estructura y contenido:
- **Header** fijo con logo (texto Estudio Digital Lira) a la izquierda, dirección "Los Ángeles, CA" y botón de menú hamburguesa a la derecha. Al hacer clic, se abre overlay de navegación con enlaces: Servicios, Proceso, Portafolio, Blog, Contacto. Incluye animación de fondo degradado.
- **Sección 1 – Hero slider** ocupa 100vh, fondo oscuro. Slider
4.807 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.807 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 Hero slider con tarjetas de proyecto y animaciones de texto
- 1.2 Bloque de Servicios (grid de iconos y descripciones)
- 1.3 Proceso (timeline horizontal con pasos numerados)
- 1.4 Portfolio (galería de imágenes con hover overlay)
- 1.5 Blog (lista de artículos con miniatura y extracto)
- 1.6 Contacto (formulario simple y datos de ubicación)
- 1.7 Footer con enlaces de navegación, redes sociales y copyright
SERVICIOS
- 2.1 Título y descripción introductoria
- 2.2 Grid de 3 columnas con icono, título y breve texto para cada servicio
- 2.3 Botón de llamada a acción
PROCESO
- 3.1 Título de sección
- 3.2 Línea de tiempo con 4 pasos numerados, cada uno con icono y descripción breve
- 3.3 Imagen ilustrativa al lado derecho
PORTAFOLIO
- 4.1 Título y filtro de categorías
- 4.2 Grid de 3 columnas con imágenes de proyecto, overlay con nombre y categoría
- 4.3 Botón ver más
BLOG
- 5.1 Título de sección
- 5.2 Lista de 3 artículos, cada uno con imagen, título, fecha y extracto
- 5.3 Enlace "Leer más" bajo cada artículo
CONTACTO
- 6.1 Título y texto introductorio
- 6.2 Formulario con campos: nombre, email, asunto, mensaje y botón enviar
- 6.3 Información de contacto: dirección, teléfono, email
- 6.4 Mapa incrustado (placeholder)
FOOTER
- 7.1 Logo y breve descripción
- 7.2 Enlaces de navegación rápidos
- 7.3 Iconos de redes sociales
- 7.4 Texto de copyright
PROMPTS RELACIONADOS · AGENCIA DIGITAL
