NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático de una tienda de tatuajes ficticia llamada TintaViva usando HTML, Tailwind CDN y JavaScript vanilla en un único archivo. Emplea la paleta: #0a0a0a (fondo negro), #ffffff (texto), #d84315 (rojo intenso), #f5f5f5 (gris claro) y #212121 (gris oscuro). Tipografía: "Montserrat" para títulos (weight 700) y "Open Sans" para cuerpo (weight 400).
Estructura:
- <header class="bg-black text-white fixed w-full z-50"> con logo izquierdo, barra de navegación central (ABOUT, SERVICES, WORKS, BLOGS, PRICING, CONTACT) y icono de carrito a la derecha que muestra número de ítems.
- Menú móvil que se abre como overlay con botón CLOSE.
- <section id="hero" class="h-screen bg-cover bg-center flex items-center justify-center" style="background-image:url('https://via.placeholder.com/1
3.706 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.706 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 Barra superior con logo y botón de carrito
- 1.2 Menú principal desplegable con enlaces a secciones clave
- 1.3 Hero con imagen de fondo, título y llamada a acción
- 1.4 Sección de servicios destacados en tarjetas
- 1.5 Galería de trabajos con filtro por estilo
- 1.6 Contador de proyectos, clientes y años de experiencia
- 1.7 Testimonios en carrusel
- 1.8 Preguntas frecuentes en acordeón
- 1.9 CTA para reservar cita
- 1.10 Footer con datos de localización, redes y enlaces legales
ABOUT
- 2.1 Cabecera idéntica a la home
- 2.2 Texto descriptivo del estudio y su historia
- 2.3 Equipo en tarjetas con foto y breve bio
- 2.4 Valores y certificaciones
SERVICES
- 3.1 Listado de servicios con iconos y descripciones
- 3.2 Precios indicativos (texto genérico sin cifras)
- 3.3 Botón de reserva por cada servicio
WORKS
- 4.1 Galería de trabajos ampliada con filtro por tipo
- 4.2 Lightbox para ver detalles de cada tatuaje
BLOGS
- 5.1 Lista de artículos con miniaturas y extractos
- 5.2 Sidebar con categorías y suscripción
PRICING
- 6.1 Tabla comparativa de paquetes
- 6.2 Botones de acción para contratar
CONTACT
- 7.1 Formulario de contacto sencillo
- 7.2 Mapa incrustado y datos de ubicación
- 7.3 Horario de atención y botón de reserva
PROMPTS RELACIONADOS · EDUCACIÓN
