NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "VivaNutri" (consultoría de nutrición sostenible) usando solo HTML, Tailwind CDN y JavaScript vanilla en un único archivo. Mantén la siguiente paleta de colores: #0A7F7F (verde azulado principal), #0F4C4C (oscuro), #E5F5F5 (blanco grisáceo), #F2A65A (acento naranja), #FFFFFF (blanco). Usa tipografía "Inter" para títulos y "Roboto" para cuerpo, cargándolas desde Google Fonts.
Estructura y requisitos:
- Header fijo con logo a la izquierda, menú hamburguesa colapsable a la derecha, y un dropdown rápido con iconos de WhatsApp, teléfono y email. Incluye barra de contacto con dirección, teléfono y enlaces a FB, IG, LI y X.
- Hero sección: video de fondo en bucle (muted, autoplay), overlay degradado, título grande "Nutrición" con estilo resalta
3.436 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.436 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Encabezado con logo, menú hamburguesa y accesos rápidos
- 1.2 Hero con video de fondo, título grande y llamada a la acción
- 1.3 Sobre nosotros con foto y breve presentación
- 1.4 Servicios destacados en tarjetas con iconos
- 1.5 Testimonios en carrusel
- 1.6 Formulario de suscripción / contacto
- 1.7 Pie de página con dirección, teléfono, email y redes sociales
ABOUT US
- 2.1 Encabezado reutilizado
- 2.2 Imagen principal y misión
- 2.3 Equipo en tarjetas con foto y descripción
- 2.4 Valores en bloques con iconos
- 2.5 CTA a agenda de consulta
- 2.6 Pie de página
SERVICES
- 3.1 Listado de servicios en rejilla
- 3.2 Cada tarjeta con icono, título y breve texto
- 3.3 Botón para detalle del servicio
- 3.4 Sección de beneficios con numeración
- 3.5 Testimonial destacado
- 3.6 Pie de página
BLOG
- 4.1 Lista de artículos en cuadrícula
- 4.2 Cada tarjeta con imagen, título, resumen y autor
- 4.3 Sidebar con categorías y newsletter
- 4.4 Pie de página
CONTACT US
- 5.1 Formulario de contacto con campos nombre, email, mensaje
- 5.2 Mapa estático de ubicación
- 5.3 Información de contacto rápida
- 5.4 Redes sociales
- 5.5 Pie de página
PROMPTS RELACIONADOS · EDUCACIÓN
