Trabajo realizado por: Juan Esteban Osorio

FLEXBOX

Ejercicio 1 — Centrado perfecto

Hola Flex

Estoy perfectamente centrado.

Trabajado por Juan Esteban Osorio

Ejercicio 2 — Navbar flexible

Código trabajado por Juan Esteban Osorio

Ejercicio 3 — Cards en filas con salto (wrap)

Tarjetas trabajadas por Juan Esteban Osorio

1
2
3
4
5
6

Ejercicio 4 — Layout con sidebar (Flex)

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

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

Header
Main
Footer

Ejercicio 8 — Grid fluido con auto-fit + minmax

Grid trabajado por Juan Esteban Osorio

1
2
3
4
5

Ejercicio 9 — Galería con relación de aspecto

Galería trabajada por Juan Esteban Osorio

Imagen 1 Imagen 2 Imagen 3 Imagen 4

Ejercicio 10 — Superposición (overlap) tipo hero

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
☰ Menú

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

Bonus

Título de la card

Este card usa container queries: cuando tiene más de 420px de ancho, cambia su layout a dos columnas.