TECNOLOGÍA · Claude Design · HTML

GuardiaFuerte — Prompt de diseño web para Claude AI

★★★★★4,6 958 descargas

Servicios de seguridad y vigilancia integral Protección continua y confianza en cada intervención.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "GuardiaFuerte" (guardiafuerte.com) siguiendo el modelo visual del HTML proporcionado. Utiliza solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. 

**Paleta de colores**: #0C0C0C (fondo principal), #1E1E1E (secciones), #F3DF04 (acentos amarillos), #FFFFFF (texto), #CCCCCC (texto secundario). 
**Tipografía**: *Inter* para encabezados y cuerpo, cargar desde Google Fonts. 

**Header**: barra fija superior, logo a la izquierda, menú principal con enlaces Home, Sobre Nosotros, Servicios (mega‑dropdown con dos columnas), Blog, Contacto y botón CTA de emergencia con ícono telefónico y número "123(256)2526". Menú responsive con botón hamburguesa. 

**Home – Hero**: contenedor split 2‑col. Izquierda: título grande "Su aliado confiable en seguridad", subtítulo descriptivo, botón primario "Solicitar presupuesto" con icono de flecha. Derecha: video de fondo auto‑play, loop, muted, con overlay de play que abre lightbox. Añadir animaciones de entrada tipo translateX desde la izquierda. 

**Bloque Marquee**: carrusel continuo horizontal con tres ítems, cada uno muestra texto grande y un icono SVG (triángulo). Texto: "Garantía de Seguridad", "Reducción de Riesgos", "Respuesta 24/7". Uso de Tailwind animation‑marquee (keyframes personalizados). 

**Sección Servicios** (placeholder): grid 3‑col, tarjetas con icono, título y breve descripción, botón "Más info". 

**Testimonios**: carrusel simple con citas y foto circular, fondo gris claro. 

**Footer**: fondo #1E1E1E, logo, enlaces rápidos (Home, Sobre Nosotros, Servicios, Blog, Contacto), iconos de redes sociales (SVG), datos de contacto (teléfono, email), copyright. 

**Páginas adicionales**: About Us, Services, Blog, Contact Us, Request a Quote – reutilizar header y footer, crear contenido estructural basado en el mismo esquema de tipografía y colores. Cada página debe incluir al menos una sección principal y un CTA final. 

**Requisitos técnicos**: 
- Incluir Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`) y configuración para colores personalizados. 
- Incluir Google Font Inter (`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">`). 
- JavaScript para: menú responsive, mega‑dropdown, marquee infinito, carrusel de testimonios y lightbox de video. 
- Todo el HTML semántico (header, nav, main, section, footer). 
- Optimizar accesibilidad: atributos alt, aria‑labels, contraste adecuado. 
- Comentarios claros en el código indicando cada bloque.

Entrega el archivo único con todo el código listo para abrir en el navegador.

---

## 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.990 caracteres · 45 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · TECNOLOGÍA

Otros prompts de la misma categoría

Ficha de marca

Nombre: GuardiaFuerte
Sector: Servicios de seguridad y vigilancia integral
Claim: Protección continua y confianza en cada intervención

Bloques de la home

1.1 Cabecera fija con logo, menú principal, dropdown de páginas y botón de contacto urgente.
2.1 Sección Hero con título destacado, subtítulo, botón de llamada a la acción y video de fondo con overlay.
3.1 Bloque Marquee con tres ítems animados de servicios clave.
4.1 (Placeholder) Sección Servicios destacados.
5.1 (Placeholder) Testimonios de clientes.
6.1 Pie de página con enlaces institucionales 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

GuardiaFuerte — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Lectorio

Lumenova Apps

Lumenova Labs

LumenSpark