NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Formación Atlas** (agrotecnología) usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Reproduce fielmente la estructura y estilo del sitio analizado:
- **Preloader** centrado, texto en dos líneas con animación de desplazamiento y forma decorativa SVG detrás.
- **Header** negro con logo que cambia entre versión clara y oscura, barra de navegación fija, menú hamburguesa que despliega un dropdown multicolumna con enlaces a Home, About, Services, Blog, Pricing, 404, Privacy, Style Guide, Licencias y Changelog. Incluye iconos de redes sociales en la parte inferior del dropdown.
- **Paleta de colores**: #0A0A0A (negro), #FFFFFF (blanco), #4CAF50 (verde brillante), #8BC34A (verde claro), #F5F5F5 (gris muy claro).
- **
3.836 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.836 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 Preloader con animación de texto y forma decorativa
- 1.2 Barra de navegación fija, logo claro/oscuro, menú hamburguesa y dropdown multicolumna
- 1.3 Hero principal con título grande, subtítulo y llamada a la acción
- 1.4 Sección de servicios en tarjetas con iconos y descripción breve
- 1.5 Bloque "Sobre nosotros" con imagen y texto alineado
- 1.6 Últimas entradas del blog en grid de tarjetas
- 1.7 Footer con información de contacto, enlaces rápidos y botones de redes sociales
ABOUT
- 2.1 Sub‑hero con imagen de fondo y texto descriptivo
- 2.2 Valores y misión en columnas con iconos
- 2.3 Equipo en tarjetas con foto y breve biografía
- 2.4 CTA de contacto
SERVICES
- 3.1 Lista de servicios en tarjetas con icono y descripción
- 3.2 Sección de casos de estudio con imágenes y texto
- 3.3 CTA para solicitar demo
BLOG
- 4.1 Grid de artículos con imagen, categoría y extracto
- 4.2 Paginación simple
PRICING
- 5.1 Tabla comparativa de planes con características y botón de selección
- 5.2 FAQ colapsable
CONTACT
- 6.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 6.2 Mapa incrustado y datos de contacto
- 6.3 Enlaces a redes sociales
PROMPTS RELACIONADOS · EDUCATION
