SALUD Y MEDICINA · Claude Design · HTML

Sonrisa Clara — Prompt de diseño web para Claude AI

★★★★★4,7 1.756 descargas

Clínica dental y servicios odontológicos Cuidamos tu salud bucal con profesionalidad.

↓ 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 **Sonrisa Clara** (clínica dental) usando **HTML estático**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. Emplea la siguiente paleta de colores: #0D1B15 (verde oscuro), #FFFFFF (blanco), #F5F5F5 (gris muy claro), #FF6600 (naranja accent), #333333 (texto principal). Tipografía: **Inter** para cuerpo y **Playfair Display** para encabezados (cargar vía Google Fonts). 

**Header**: barra transparente que se vuelve sólida al hacer scroll, logo a la izquierda (texto Sonrisa Clara), menú horizontal con enlaces: Inicio, Sobre nosotros, Servicios, Contacto; botón de llamada a la acción "Contactar" destacado en naranja. Incluye botón hamburguesa responsive que muestra el mismo menú en overlay.

**Sección 1 – Hero**: video de fondo en bucle (muted, autoplay) con poster estático. Sobre el video, título grande H1 "Cuidado dental de confianza", palabra "confianza" en naranja. Subtítulo en párrafo. Dos botones CTA: "Reservar cita" (primario naranja) y "Ver servicios" (secundario con borde naranja). A la derecha, fila de imágenes circulares de usuarios (4) y contador "10K+ Sonrisas felices".

**Sección 2 – Valores y partners**: diseño de dos columnas. Izquierda: icono SVG central (forma abstracta) y texto pequeño "Nuestros valores". Derecha: título H2 "En Sonrisa Clara nos enorgullecemos de ofrecer atención dental excepcional" y párrafo descriptivo. Debajo, carrusel estático de logotipos de partners (imágenes placeholder). 

**Sección 3 – Propuesta**: fondo blanco, título H2 "Tu sonrisa, nuestra prioridad", párrafo breve y botón CTA "Reservar cita".

**Footer**: fondo #0D1B15, texto claro, división en tres columnas: navegación principal, enlaces legales (Política de privacidad, Términos), y datos de contacto (dirección ficticia, email hola@sonrisaclara.com, teléfono). Incluye íconos de redes sociales en blanco.

**Interactividad**: 
- Scroll suave para enlaces del menú.
- Sticky header que cambia de color al hacer scroll > 80px.
- Botón hamburguesa abre/cierra overlay móvil.
- Animación fade‑in de bloques al entrar en viewport (IntersectionObserver).

**Requisitos técnicos**: 
- Todo el código debe estar en un único archivo HTML.
- Incluir enlaces a Tailwind CDN (`https://cdn.tailwindcss.com`) y a Google Fonts.
- Uso de clases Tailwind para márgenes, tipografía, colores y responsividad.
- No usar frameworks ni dependencias externas distintas de los CDNs indicados.
- Optimizar accesibilidad: atributos alt en imágenes, aria‑labels en menús y botones.
- Comentarios claros en el HTML para identificar cada bloque descrito.

---

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

CAPTURA COMPLETA · HOME

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Sonrisa Clara
Sector: Clínica dental y servicios odontológicos
Claim: Cuidamos tu salud bucal con profesionalidad

Bloques de la home

1.1 Header transparente con logo, menú de navegación y botón de contacto
2.1 Hero con video de fondo, título, subtítulo, dos botones CTA y barra de usuarios
3.1 Bloque de valores con icono y texto descriptivo, logos de partners
4.1 Sección de propuesta con título grande y botón de reserva
5.1 Footer con enlaces de navegación 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

Sonrisa Clara — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Otros prompts de la misma categoría

Lirio Sereno

Lumara Salud

Lumara Studio

Lumare Skin Studio