Landing He usado Grid para el layout general (header, hero, features, cta, footer) y Flex dentro de cada bloque. El hero usa un grid de 12 columnas, las features un grid responsive con auto-fit, y Flex para alinear elementos como el header, botones y CTA. Se adapta a tablet y móvil con media queries.
Dashboard El layout principal usa Grid con áreas (sidebar, header, main, footer). Dentro, Flex organiza el contenido: la sidebar en columna, el header con buscador y botones, y las tarjetas KPI en grid flexible. Todo se vuelve una sola columna en móvil.
Portfolio El layout está hecho con Grid (header, gallery, contact, footer). La gallery usa grid con auto-fit y alturas variables para simular un masonry. Flex se aplica en el header, en cada tarjeta de proyecto y en la distribución interna del formulario y footer.
Notas de accesibilidad
Se cumplen los requisitos básicos de accesibilidad indicados en el brief:
Se usa lang="es" en todas las páginas.
Se aplican landmarks semánticos (header, nav, main, section, footer, aside, article).
Los enlaces y botones incluyen :focus-visible con borde de color --accent para navegación por teclado.
Colores con contraste AA y tipografía del sistema para legibilidad.
Se incluyen roles ARIA y descripciones (aria-label, aria-hidden, role="img") en elementos decorativos o navegables.
Las tablas del dashboard usan thead, tbody y th scope="col" para estructura semántica y lectura con lector de pantalla.
-
Landing
Desktop (1440×900)
Tablet (1024×768)
Mobile (375×812)
-
Dashboard
Desktop (1440×900)
Tablet (1024×768)
Mobile (375×812)
-
Portfolio
Desktop (1440×900)
Tablet (1024×768)
Mobile (375×812)
- HTML (estructura semántica con
header,nav,main,section,article,aside,footer) - CSS (variables, grid, flex, media queries)
- :focus-visible, roles ARIA y lang="es" para accesibilidad
landing/
├── index.html
└── styles.css dashboard/
├── index.html
└── styles.css
portfolio/
├── index.html
└── styles.css
README.md