NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático para la marca ficticia "Branding Atlas" (agencia digital) usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. El proyecto debe reproducir la estructura y el estilo del sitio analizado sin copiar texto ni imágenes originales.
**Alcance**
- Header fijado con logo SVG simple (usar forma abstracta similar), menú de navegación con 4 enlaces numerados (Home, About, Projects, Contact) y botón de carrito que abre un modal vacío.
- Hero de pantalla completa con fondo degradado oscuro a gris, título grande (Fuente: Inter, 4rem, peso bold, color #FFFFFF), subtítulo (1.5rem, #F5F5F5) y botón primario (bg #E63946, hover #D52836).
- Sección Servicios: tres tarjetas horizontales, iconos SVG lineales, título en #111111, descripción en #555555, fondo #FFFF
4.048 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.048 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 Encabezado fijado con logo SVG, menú numerado y botón de carrito
- 1.2 Hero con título grande, subtítulo y llamado a la acción
- 1.3 Servicios en tarjetas horizontales con iconos y descripción breve
- 1.4 Proyectos destacados en rejilla con imágenes y overlay
- 1.5 Sobre nosotros con texto y foto del equipo
- 1.6 Formulario de contacto simple
- 1.7 Pie de página con enlaces de navegación, suscripción al boletín y datos de contacto
ABOUT
- 2.1 Encabezado interno con breadcrumb
- 2.2 Historia y valores en bloque de texto con imágenes acompañantes
- 2.3 Equipo en tarjetas con foto, nombre y rol
- 2.4 Testimonios en carrusel
- 2.5 Llamado a la acción a proyectos
PROJECTS
- 3.1 Filtro de categorías en barra lateral
- 3.2 Galería de proyectos en cuadrícula con hover overlay
- 3.3 Detalle de proyecto modal con descripción, imágenes y botón de contacto
CONTACT
- 4.1 Encabezado con mapa estático
- 4.2 Formulario de contacto (nombre, email, mensaje, botón)
- 4.3 Información de contacto directa (teléfono, email, dirección)
- 4.4 Enlaces a redes sociales
FOOTER
- 5.1 Navegación secundaria
- 5.2 Suscripción al newsletter
- 5.3 Aviso legal y derechos de autor
PROMPTS RELACIONADOS · AGENCIA DIGITAL
