AUTOMOCIÓN · Claude Design · HTML

Cargomex Solutions — Prompt de diseño web para Claude AI

★★★★★4,6 3.711 descargas

Servicios de transporte y logística integral Conectamos tu carga con precisión y confianza.

↓ 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 **Cargomex Solutions** (dominio cargomex.com) con el siguiente alcance y stack:
- **Stack**: HTML estático en un solo archivo, Tailwind CSS vía CDN, JavaScript vanilla (sin dependencias externas). Todo el código debe estar contenido en un único archivo index.html.
- **Paleta de colores**: fondo principal #FFFFFF, texto principal #1A1A1A, gris suave #F5F5F5, acento naranja #FF6B00, bordes y sombras en #E0E0E0.
- **Tipografía**: Fuente principal "Inter" (Google Fonts) para títulos y cuerpo, peso 400‑600, tamaños responsivos con clamp().
- **Header**: barra de navegación fija, logo en SVG (texto "Cargomex" en color naranja), menú principal con enlaces Home, About, Services, Blog, Contact y un mega‑menu bajo "Pages" que despliega bloques de enlaces (About One/Two, Service One/Two, Pricing One/Two, Blog One/Two). En la derecha, texto "HABLE CON UN EXPERTO" y teléfono (888) 123 4567. Botón hamburguesa para móvil.
- **Preloader**: pantalla centrada con animación de escala y rotación de la palabra "Cargomex" desglosada en letras, usando CSS keyframes.
- **Home**:
  1. Hero full‑width con fondo de imagen ligera, etiqueta superior con línea decorativa, texto "Welcome to Cargomex" y título grande "Soluciones de Transporte y Logística". Botón primario "Explorar ahora" que ancla a la sección de servicios.
  2. Sección de presentación: contenedor centralizado con breve copy y botón secundario.
  3. Grid de tres tarjetas de servicios (Transporte terrestre, Almacenaje, Distribución) con íconos SVG, título y descripción corta.
  4. Área de ventajas: 4 columnas con número, ícono y texto (Fiabilidad, Cobertura, Tecnología, Atención 24/7).
  5. Testimonios: carrusel simple de 3 slides, cada uno con foto circular, nombre, posición y quote.
  6. CTA secundaria: bloque con fondo naranja, texto blanco "¿Listo para comenzar?" y botón "Solicita una cotización".
- **Footer**: fondo gris #F5F5F5, columnas: Información (Sobre Cargomex, Misión), Enlaces rápidos (Servicios, Blog, Contacto), Social (iconos SVG para LinkedIn, Twitter, Facebook) y datos de contacto (dirección ficticia, email hola@cargomex.com, teléfono). Incluye copyright 2026.
- **Responsividad**: mobile‑first, menú colapsable, grid que pasa de 3‑col a 2‑col y luego a 1‑col.
- **Interactividad**: transiciones suaves en hover de enlaces, botón de scroll‑to‑top, carrusel de testimonios automático con pausa al hover.
- **Accesibilidad**: atributos alt en imágenes, roles ARIA para navegación y botones.
- **SEO básico**: meta title, description, viewport, esquema JSON‑LD minimal para Organization.
Genera el código HTML completo siguiendo estas indicaciones, respetando la estructura de bloques numerados en la descripción. No incluir texto ni imágenes del sitio original; todo el copy debe ser original en español (España) y sin menciones a precios. No usar frameworks externos más allá de Tailwind CDN.

---

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

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Preloader animado con marca
1.2 Barra de navegación fija con logo, mega‑menu y CTA de teléfono
1.3 Hero principal con título, subtítulo y botón de llamada a la acción
1.4 Sección de presentación breve con etiqueta destacada
1.5 Bloque de servicios en grid de tres columnas
1.6 Área de ventajas con íconos numerados
1.7 Testimonios en carrusel sencillo
1.8 Llamada a la acción secundaria con fondo contrastante
1.9 Footer con enlaces institucionales, redes sociales y datos de contacto

ABOUT

2.1 Imagen de cabecera con título descriptivo
2.2 Texto sobre la historia y misión
2.3 Valores en tarjetas con iconos

SERVICES

3.1 Lista de servicios con ilustraciones y breves descripciones
3.2 Sección de proceso paso a paso
3.3 Botón de cotización rápida

TESTIMONIALS

4.1 Carrusel de testimonios con fotos y ratings
4.2 Logotipos de clientes destacados

BLOG

5.1 Grid de artículos con imágenes, título y fecha
5.2 Sidebar con categorías y búsqueda

CONTACT

6.1 Formulario de contacto con campos nombre, email, mensaje
6.2 Mapa incrustado y datos de oficina
6.3 CTA de llamada telefónica

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: Cargomex Solutions
Sector: Servicios de transporte y logística integral
Claim: Conectamos tu carga con precisión y confianza

Bloques de la home

1.1 Preloader animado con marca
1.2 Barra de navegación fija con logo, mega‑menu y CTA de teléfono
1.3 Hero principal con título, subtítulo y botón de llamada a la acción
1.4 Sección de presentación breve con etiqueta destacada
1.5 Bloque de servicios en grid de tres columnas
1.6 Área de ventajas con íconos numerados
1.7 Testimonios en carrusel sencillo
1.8 Llamada a la acción secundaria con fondo contrastante
1.9 Footer con enlaces institucionales, 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