BIENES RAÍCES · Claude Design · HTML

AlmaPet — Prompt de diseño web para Claude AI

★★★★★4,7 748 descargas

Refugio y adopción de animales domésticos Conectamos mascotas con hogares que las cuidan.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia AlmaPet (almapet.com) siguiendo el estilo visual y la estructura de la web analizada. Utiliza únicamente HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Paleta de colores: #F5F5F5 (fondo), #2C3E50 (texto principal y encabezados), #27AE60 (botones primarios), #E74C3C (botones secundarios), #BDC3C7 (bordes y elementos secundarios). Tipografía: Inter (Google Font) para todo el contenido, usando font‑weight 400 para párrafos y 600 para encabezados.

Estructura:
- <header> con barra de navegación fija: logo texto "AlmaPet" (svg simple), enlaces "Inicio", "Sobre nosotros", "Adoptar", "Blog", "Contacto" y botón destacado "Donar" (color primario). Menú colapsable para mobile con icono hamburguesa.
- <section class="hero"> con imagen de fondo completa (placeholder), overlay oscuro, título grande "AlmaPet", subtítulo opcional y botón "Adoptar" (primario). Imagen hero centrada y responsiva.
- <section class="intro"> contenedor de dos columnas: izquierda video autoplay muted loop de fondo con botón overlay de reproducción, derecha título h2 "Cuidamos y conectamos animales" y párrafo breve + botones "Sobre el refugio" (primario) y "Ver mascotas" (secundario).
- <section class="gallery"> con título h2 "Encuentra a tu mejor amigo" y botón "Ver todos". Grid responsive 3‑col (mobile 1) de tarjetas de mascotas: imagen, nombre, ID, chips informativos (especie, género, edad) y botones "Adoptar" (primario) y "Más info" (secundario). Utiliza datos de ejemplo.
- <footer> con tres columnas: navegación rápida (links), información de contacto (email, teléfono, dirección) y sección de redes sociales (iconos SVG para Facebook, X, Instagram, LinkedIn). Debajo, banners horizontales con llamados a "Donar ahora" y "Ser voluntario" con botones primarios.

Requisitos técnicos:
- Incluir <meta charset="utf-8">, viewport responsive y título.
- Importar Tailwind CDN: <script src="https://cdn.tailwindcss.com"></script> y configurar colores custom en tailwind.config via script.
- Importar Inter: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">.
- Implementar interactividad del menú móvil y del botón de reproducción del video con vanilla JS (añadir/quit class "hidden").
- Todas las imágenes deben usar URLs placeholder (https://via.placeholder.com/…) y los SVG de iconos deben estar embebidos.
- Código limpio, indentado y auto‑contenedor, listo para copiar‑pegar y 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.866 caracteres · 33 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con título centrado y fondo de imagen completa
1.2 Bloque introductorio video de fondo, texto overlay y botones primario/secondary
1.3 Grid doble con imágenes decorativas y texto descriptivo
1.4 Sección "Encuentra a tu mejor amigo" con título, botón y grid de tarjetas de mascotas
1.5 Footer con menú, iconos sociales y banners de donación y voluntariado

ABOUT

2.1 Cabecera con título y párrafo explicativo
2.2 Imagen o video de la historia del refugio
2.3 Estadísticas en chips (animales atendidos, años de experiencia, etc.)

ADOPT

3.1 Lista filtrable de mascotas con tarjetas similares a la home
3.2 Botones de acción "Adoptar" y "Más información"

BLOG

4.1 Grid de artículos con imágenes, títulos y extractos
4.2 Paginación simple

CONTACT

5.1 Formulario de contacto (nombre, email, mensaje)
5.2 Mapa incrustado y datos de ubicación

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: AlmaPet
Sector: Refugio y adopción de animales domésticos
Claim: Conectamos mascotas con hogares que las cuidan

Bloques de la home

1.1 Hero con título y foto principal
1.2 Video introductorio y texto con botones "Sobre nosotros" y "Adoptar"
1.3 Galería de mascotas destacadas con tarjetas y chips informativos
1.4 Sección destacada "Encuentra a tu mejor amigo" con botón a listado completo
1.5 Footer con enlaces de navegación, redes sociales y formularios de donación/voluntariado

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

AlmaPet — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

ADOPT

BLOG

CONTACT

Otros prompts de la misma categoría

Aurora Inversión

Cumbre Capital

Lumara Salud

Aliviar Hogar