BIENES RAÍCES · Claude Design · HTML

Cementia Proyectos — Prompt de diseño web para Claude AI

★★★★★4,9 4.225 descargas

Empresa de construcción y desarrollo inmobiliario Transformamos ideas en estructuras duraderas.

↓ 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 **Cementia Proyectos** (cementiaproyectos.com) usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe replicar la estructura y estilo del sitio analizado, pero con contenido original en español (España) y sin copiar textos. 

**Alcance**
- Página principal (HOME) con las siguientes secciones numeradas:
  1. Navbar fija: logo (SVG placeholder), enlaces Home, Sobre Nosotros, Servicios, Proyectos, Contacto y botón destacado "Hablemos".
  2. Hero: video de fondo (placeholder MP4), overlay oscuro, etiqueta con frase corta, título grande, párrafo descriptivo y botón "Solicita tu presupuesto".
  3. Carrusel horizontal de logos de partners (repetir 5 logos SVG placeholders, movimiento continuo).
  4. Sobre Nosotros: título "Sobre Nosotros", subtítulo, párrafo original, y cuadrícula de 4 métricas (años de experiencia, proyectos completados, satisfacción cliente, tasa de éxito).
  5. Servicios: encabezado "Nuestros Servicios", subtítulo, cuadrícula de 6 tarjetas. Cada tarjeta muestra número, título, breve descripción y una imagen de archivo local (placeholder). 
  6. Valores (sección vacía preparada para futuro contenido).
  7. Footer: columnas con contacto, enlaces rápidos y redes sociales (iconos SVG placeholders).

**Estilo**
- Paleta de colores: 
  - #0A1F44 (azul marino fondo), 
  - #1E3A8A (azul intenso), 
  - #F59E0B (naranja accent), 
  - #F3F4F6 (gris claro background), 
  - #111827 (texto oscuro), 
  - #FFFFFF (blanco).
- Tipografía: "Inter", sans-serif para todo el cuerpo; headings con peso 700, tamaños responsive usando Tailwind (text-4xl, text-2xl, etc.).
- Botones: estilo filled con fondo #1E3A8A, texto blanco, hover #0A1F44; botones outline con borde #F59E0B.
- Animaciones: fade‑in al cargar secciones, transición suave en hover de enlaces y botones.
- Responsividad: layout de columnas col‑12 en móvil, col‑6 en tablet y col‑4/3 en escritorio según la sección.

**Requisitos técnicos**
- Incluir `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">` en `<head>`.
- Incluir `<script>` al final del body para controlar el carrusel y el video play/pause.
- Usar data attributes para animaciones (ej. `data-aos`).
- Mantener código limpio, semántico y accesible (roles, aria-labels).
- No usar imágenes reales: usar `https://via.placeholder.com/400x300` para fotos y `https://via.placeholder.com/150x50` para logos.
- Todas las URLs y textos deben ser ficticios y originales.

Entrega el archivo completo 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.943 caracteres · 51 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo y enlaces principales
1.2 Hero con video de fondo, titular central y llamada a acción
1.3 Carrusel de logos de partners
1.4 Bloque "Sobre nosotros" con encabezado, texto y métricas
1.5 Sección de servicios con tarjetas enumeradas
1.6 Área de valores (placeholder)
1.7 Pie de página

ABOUT

2.1 Imagen de portada y título
2.2 Historia de la empresa y equipo
2.3 Valores y filosofía

PROJECTS

3.1 Galería filtrable de proyectos
3.2 Tarjetas de proyecto con imágenes y descripción breve

CONTACT

4.1 Formulario de contacto sencillo
4.2 Mapa interactivo de ubicación
4.3 Información de teléfono y correo

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Cementia Proyectos
Sector: Empresa de construcción y desarrollo inmobiliario
Claim: Transformamos ideas en estructuras duraderas

Bloques de la home

1.1 Barra de navegación fija con logo y enlaces principales
1.2 Hero con video de fondo, titular central y llamada a acción
1.3 Carrusel de logos de partners
1.4 Bloque "Sobre nosotros" con encabezado, texto descriptivo y tarjetas de métricas
1.5 Sección de servicios con título, subtítulo y tarjetas enumeradas con imagen y descripción
1.6 Área de valores (no incluida en el fragmento, se reserva para futuras ampliaciones)
1.7 Pie de página con información de contacto y enlaces rápidos

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

Cementia Proyectos — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

PROJECTS

CONTACT

Otros prompts de la misma categoría

Aurora Inversión

Cumbre Capital

Lumara Salud

Aliviar Hogar