NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web ficticio para la marca Ático Creativo (aticocreativo.com). El proyecto debe estar contenido en un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla sin dependencias externas. Utiliza la siguiente paleta de colores: #0D0D0D (negro profundo), #1A1A1A (gris oscuro), #E5E5E5 (gris claro), #FF6F61 (coral vibrante) y #F4F4F4 (blanco hueso). Tipografía: encabezados con 'Montserrat' (importar de Google Fonts) y cuerpo con 'Inter'.
Estructura y bloques:
1. Navbar lateral fija a la izquierda (w-64, h-screen, bg-[#0D0D0D]) con logo SVG, enlaces numerados estilo "( _01 ) Homepage", "( _02 ) Projects"..., enlaces a mail y redes sociales (BE, DR, X) con separación por "/". Incluye botón de menú colapsable para móviles.
2. Hero principal ocupa el resto del viewpo
4.064 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.064 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 Barra de navegación lateral con logo, enlaces numerados y contactos
- 1.2 Hero multimedia con carrusel de videos e imágenes y texto introductorio
- 1.3 Área de presentación con breve descripción y enlaces a redes sociales
- 1.4 Galería de proyectos en formato grid con hover
- 1.5 Sección de blog con lista de artículos recientes
- 1.6 Footer con información de contacto y enlaces sociales
PROJECTS
- 2.1 Header reutilizado con navegación
- 2.2 Grid de tarjetas de proyecto con imágenes, título y descripción corta
- 2.3 Footer idéntico al de Home
ABOUT
- 3.1 Header reutilizado
- 3.2 Bloque de historia con texto y foto a la izquierda
- 3.3 Equipo: cards con foto, nombre y rol
- 3.4 Footer
BLOG
- 4.1 Header reutilizado
- 4.2 Lista de artículos en formato card con miniatura, título y extracto
- 4.3 Pagination simple
- 4.4 Footer
CONTACT
- 5.1 Header reutilizado
- 5.2 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.3 Información de contacto y mapa embebido
- 5.4 Footer
PROMPTS RELACIONADOS · PORTAFOLIO
