CREATIVO · Tailwind · HTML · Claude

Línea Íntima – Estudio de tatuajes y piercings con diseño web elegante

★★★★★4,6 2.855 descargas

Tema web estático para estudio de tatuajes y piercings, con diseño oscuro, tipografía Playfair Display e Inter, y transiciones suaves. Incluye hero, iconos de servicios y formulario de contacto, optimizado para SEO.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático para la marca ficticia "Línea Íntima" (estudio de tatuajes y piercings) usando HTML, Tailwind CSS desde CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: fondo negro #0a0a0a, texto principal blanco #f5f5f5, acento rojo oscuro #8b0000, acento gris claro #d3d3d3. Tipografía: headings con "Playfair Display" (Google Fonts) y cuerpo con "Inter". 

Estructura:
- Header (navbar) centrado, logo SVG ficticio a la izquierda, enlaces en dos columnas (Home, About / Services, Contact) que colapsan en menú hamburguesa en móvil.
- Sección Hero (#home): contenedor centrado, título H1 grande con efecto de trazo (stroke-text) que dice "Arte en tu piel", subtítulo párrafo, botón primario "Conecta ahora" que ancla a #contact.
- Sección de iconos (destacados): grid horizontal de 10 items, cada uno con icono simple (usar heroicons outline) y texto de servicio (p. ej. "Diseño personalizado", "Black & Gray", etc.).
- Sección About (#about): layout de dos columnas, izquierda texto con H2 "Transformamos tinta y metal en historias" y párrafo, derecha imagen de fondo (placeholder) con efecto overlay.
- Sección Services (#services): layout invertido, imagen a la izquierda (placeholder), derecha título H2 "Servicios personalizados para tu estilo", párrafo, botón "Explorar más".
- Sección de tarjetas de servicios adicionales: grid de 3 tarjetas, cada una con imagen pequeña, título H3, párrafo breve y enlace que ancla a #contact.
- Sección Contact (#contact): formulario simple (nombre, email, mensaje) y botón "Enviar", además de datos de contacto y enlaces sociales (iconos SVG).
- Footer: fondo negro, texto gris claro, enlaces de navegación y datos de copyright.

Requisitos técnicos: todas las animaciones de aparición deben usar transiciones CSS (opacity y translateY). El menú móvil debe abrirse con JavaScript que añade/quita la clase "hidden" al contenedor de enlaces. Asegúrate de que el HTML sea semántico (header, nav, main, section, footer). Incluye los enlaces a Tailwind CDN y a Google Fonts en el <head>. No incluir contenido real del sitio original; generar textos originales en español de España.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.510 caracteres · 30 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación central con logo y enlaces en dos columnas
1.2 Hero con título grande, texto descriptivo y botón de llamada a la acción
1.3 Cuadrícula de iconos resaltando servicios principales
1.4 Sección "Sobre nosotros" con texto y fondo ilustrado
1.5 Sección de servicios con imagen y descripción lateral
1.6 Área de tarjetas de servicios destacados con imágenes y textos breves
1.7 Bloque con imagen y texto invertido (imagen a la izquierda, texto a la derecha)
1.8 Pie de página simple con información de contacto y enlaces

ABOUT

2.1 Título y párrafo introductorio del estudio
2.2 Imagen de fondo con texto superpuesto

SERVICES

3.1 Imagen de cabecera del servicio
3.2 Título y descripción del servicio principal
3.3 Botón de enlace a contacto

SERVICES CARDS

4.1 Tarjeta "Minimal y Personalizado" con imagen y descripción
4.2 Tarjeta "Audaz y Significativo" con imagen y descripción
4.3 Tarjeta "Tatuaje en Pareja a Domicilio" con imagen y descripción

CONTACT

5.1 Formulario de contacto sencillo (nombre, email, mensaje) y botón enviar
5.2 Información de contacto y enlaces sociales

PROMPTS RELACIONADOS · CREATIVO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Línea Íntima
Sector: Estudio de tatuajes y piercings
Claim: Arte corporal que cuenta tu historia

Bloques de la home

1.1 Barra de navegación central con logo y enlaces en dos columnas
1.2 Hero con título grande, texto descriptivo y botón de llamada a la acción
1.3 Cuadrícula de iconos resaltando servicios principales
1.4 Sección "Sobre nosotros" con texto y fondo ilustrado
1.5 Sección de servicios con imagen y descripción lateral
1.6 Área de tarjetas de servicios destacados con imágenes y textos breves
1.7 Bloque con imagen y texto invertido (imagen a la izquierda, texto a la derecha)
1.8 Pie de página simple con información de contacto y enlaces

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Línea Íntima – Estudio de tatuajes y piercings con diseño web elegante

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

SERVICES CARDS

CONTACT

Otros prompts de la misma categoría

CalleArte

Línea Ágil

Línea Aurora

Línea Negra