LEGAL / ABOGADOS · Claude Design · HTML

Lexia Abogados — Prompt de diseño web para Claude AI

★★★★★4,6 3.798 descargas

Despacho de abogados especializado en derecho corporativo y familiar Asesoramos con experiencia y cercanía.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa para la marca ficticia **Lexia Abogados** (despacho jurídico) usando **HTML** estático con **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. Reproduce fielmente la estructura y estilos del sitio analizado, pero con contenido nuevo y sin copiar texto original.

**Alcance**
- Header fijo con logo (svg placeholder), menú principal con enlaces a Home, About, Services, Team, Blog, Contact y botón "Contacto". Menús desplegables con sub‑items, animación de apertura suave.
- Hero section: fondo blanco, título grande (font "Inter", weight 800, text-4xl md:text-5xl, color #0F172A), subtítulo gris #4B5563, dos botones primary (azul #2563EB) y secondary (blanco con borde azul). A la izquierda una imagen del despacho inclinada -15°, a la derecha otra imagen +15° (usar placeholders). Añade animación de aparición con `opacity` y `translateY` al cargar.
- Marquee: carrusel continuo horizontal de logotipos de clientes ficticios (8 imágenes placeholder), velocidad constante, sin controles, usando CSS `animation` keyframes.
- Footer: fondo #1E293B, columnas con enlaces (Home, About, Services, Team, Blog, Contact), sección de redes sociales (iconos SVG), formulario simple de suscripción y datos de contacto (email, teléfono). Texto en blanco, enlaces con hover #2563EB.

**Paleta de colores**
- #0F172A (azul noche) – texto principal
- #2563EB (azul primario) – botones y enlaces
- #4B5563 (gris medio) – subtítulos y cuerpo
- #F3F4F6 (gris claro) – fondos de secciones
- #1E293B (azul muy oscuro) – footer

**Tipografía**
- Fuente principal: `Inter`, peso 400‑800, tamaños responsivos con Tailwind `text-base`, `text-lg`, `text-2xl` etc.

**Componentes interactivos**
- Menú móvil (icono hamburger) que muestra overlay con enlaces.
- Botones con efecto ripple ligero (JS).
- Scroll suave para anclajes.
- Carousel marquee sin JS (solo CSS). 

**Requisitos técnicos**
- HTML5 semántico (`<header>`, `<nav>`, `<section>`, `<footer>`).
- Incluir `<meta charset="utf-8">`, viewport y título.
- Cargar Tailwind vía CDN `<script src="https://cdn.tailwindcss.com"></script>` y configurar colores personalizados con `tailwind.config = {theme:{extend:{colors:{night:'#0F172A',primary:'#2563EB',grayMid:'#4B5563',light:'#F3F4F6',darkFooter:'#1E293B'}}}};`.
- Todo el CSS adicional (animaciones, keyframes) dentro de `<style>` en el mismo archivo.
- JS al final del `<body>` para toggle de menú móvil y efecto ripple.
- Optimizar imágenes con atributos `loading="lazy"` y `srcset` placeholders.
- Asegurar accesibilidad: `aria-label`s, contraste de colores y foco visible.

Entrega el código completo listo para abrir en el navegador y ver la página replicada con la marca Lexia Abogados.

---

## 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>
```

3.057 caracteres · 51 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Encabezado con barra de navegación fija, logo, menú principal y botón de contacto
1.2 Hero con título, descripción, botones de llamada a la acción y dos imágenes inclinadas cruzadas
1.3 Sección Marquee con fila continua de logotipos de clientes ficticios
1.4 Footer con enlaces de navegación, redes sociales y datos de contacto

ABOUT

1.1 Encabezado común
1.2 Bloque de presentación del despacho con foto y texto descriptivo
1.3 Valores y misión en columnas
1.4 CTA a contacto

SERVICES

1.1 Encabezado común
1.2 Lista de servicios en tarjetas con ícono, título y breve descripción
1.3 Sección de casos de éxito como grid de imágenes
1.4 CTA a solicitud de consulta

TEAM

1.1 Encabezado común
2.1 Grid de perfiles de abogados con foto, nombre, cargo y enlace a detalle
2.2 CTA a ver todo el equipo

BLOG

1.1 Encabezado común
2.1 Lista de entradas recientes en formato tarjeta
2.2 Sidebar con categorías y newsletter

CONTACT

1.1 Encabezado común
2.1 Formulario de contacto con campos nombre, email, asunto y mensaje
2.2 Mapa incrustado y datos de oficina

FOOTER

1.1 Bloque de enlaces rápidos, redes sociales y suscripción al boletín
1.2 Copyright y política de privacidad

PROMPTS RELACIONADOS · LEGAL / ABOGADOS

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lexia Abogados
Sector: Despacho de abogados especializado en derecho corporativo y familiar
Claim: Asesoramos con experiencia y cercanía

Bloques de la home

1.1 Encabezado con barra de navegación fija, logo, menú principal y botón de contacto
1.2 Hero con título, descripción, botones de llamada a la acción y dos imágenes inclinadas cruzadas
1.3 Sección Marquee con fila continua de logotipos de clientes ficticios
1.4 Footer con enlaces de navegación, redes sociales y datos de contacto

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