Hola Flex
Estoy perfectamente centrado.
Trabajado por Juan Esteban Osorio
Contenido
Texto largo con mucho contenido para mostrar el comportamiento fluido del área principal junto al sidebar fijo en la izquierda.
Trabajado por Juan Esteban Osorio
Trabajo realizado por: Juan Esteban Osorio
FLEXBOX
Ejercicio 1 — Centrado perfecto
Ejercicio 2 — Navbar flexible
Código trabajado por Juan Esteban Osorio
grupoiOta
Ejercicio 3 — Cards en filas con salto (wrap)
Tarjetas trabajadas por Juan Esteban Osorio
Ejercicio 4 — Layout con sidebar (Flex)
Ejercicio 5 — Pricing con alineación por baseline
Trabajado por Juan Esteban Osorio
$
49
/mes
$
199
/año
GRID
Ejercicio 6 — Tres columnas fijas
Columnas trabajadas por Juan Esteban Osorio
A
B
C
Ejercicio 7 — Layout clásico con áreas
Capas manejadas por Juan Esteban Osorio
Ejercicio 8 — Grid fluido con auto-fit + minmax
Grid trabajado por Juan Esteban Osorio
Ejercicio 9 — Galería con relación de aspecto
Galería trabajada por Juan Esteban Osorio
Ejercicio 10 — Superposición (overlap) tipo hero
Innovación con propósito
Superposición trabajada por Juan Esteban Osorio
RESPONSIVE
Ejercicio 11 — Mobile-first: apilar columnas
Responsive trabajado por Juan Esteban Osorio
A
B
C
Ejercicio 12 — Navbar colapsable (sin JS)
Barra trabajada por Juan Esteban Osorio
grupoiOta
Ejercicio 13 — Tipografía fluida con clamp()
React, allá voy
Soy Juan Esteban Osorio y programo para empezar en React
Texto de ejemplo para ver tamaño relativo.
Ejercicio 14 — Formulario responsive
Formulario trabajado por Juan Esteban Osorio
BONUS — Container queries + Dark mode
Bonus — Card con Container Query
Título de la card
Este card usa container queries: cuando tiene más de 420px de ancho, cambia su layout a dos columnas.