## Tarea
Crea un diseño de blog para artículos sobre animales, asegurando que la foto correspondiente al animal esté siempre visible mientras el usuario lee el artículo. Cuando el usuario comience a leer sobre otro animal, muestra la foto del siguiente animal.
Pasos:
1. Aplica la propiedad de posicionamiento `sticky` al elemento con el nombre de clase `illustration`.
2. Especifica la posición en la página donde el elemento debe volverse sticky.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImRlc2NyaXB0aW9uIj4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBLYW5nYXJvb3MgYXJlIG1hcnN1cGlhbHMgbmF0aXZlIHRvIEF1c3RyYWxpYSwga25vd24gZm9yIHRoZWlyIHBvd2VyZnVsCiAgICAgICAgICBoaW5kIGxlZ3MsIGxvbmcgdGFpbHMsIGFuZCBkaXN0aW5jdGl2ZSBwb3VjaGVzIGluIHdoaWNoIHRoZXkgY2FycnkKICAgICAgICAgIHRoZWlyIHlvdW5nLiBUaGV5IGFyZSB3ZWxsLWFkYXB0ZWQgdG8gbGlmZSBpbiB0aGUgaGFyc2ggQXVzdHJhbGlhbgogICAgICAgICAgb3V0YmFjaywgd2hlcmUgdGhleSB1c2UgdGhlaXIgbGVncyB0byB0cmF2ZWwgbG9uZyBkaXN0YW5jZXMgYW5kIGhvcAogICAgICAgICAgd2l0aCBpbmNyZWRpYmxlIHNwZWVkIGFuZCBhZ2lsaXR5LgogICAgICAgIDwvcD4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBLYW5nYXJvb3MgYXJlIHNvY2lhbCBhbmltYWxzLCBvZnRlbiBsaXZpbmcgaW4gZ3JvdXBzIGNhbGxlZCBtb2JzIG9yCiAgICAgICAgICB0cm9vcHMuIFRoZXkgY29tbXVuaWNhdGUgd2l0aCBlYWNoIG90aGVyIHVzaW5nIGEgdmFyaWV0eSBvZiBzb3VuZHMgYW5kCiAgICAgICAgICBib2R5IGxhbmd1YWdlLCBpbmNsdWRpbmcgZ3Jvd2xpbmcsIGdydW50aW5nLCBhbmQgdGh1bXBpbmcgdGhlaXIgZmVldC4KICAgICAgICA8L3A+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgVGhlcmUgYXJlIHNldmVyYWwgZGlmZmVyZW50IHNwZWNpZXMgb2Yga2FuZ2Fyb28sIHJhbmdpbmcgaW4gc2l6ZSBmcm9tCiAgICAgICAgICB0aGUgdGlueSBtdXNreSByYXQta2FuZ2Fyb28sIHdoaWNoIGlzIG9ubHkgYWJvdXQgdGhlIHNpemUgb2YgYSBtb3VzZSwKICAgICAgICAgIHRvIHRoZSByZWQga2FuZ2Fyb28sIHdoaWNoIGlzIHRoZSBsYXJnZXN0IG1hcnN1cGlhbCBpbiB0aGUgd29ybGQuCiAgICAgICAgPC9wPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICAgIFdoaWxlIGthbmdhcm9vcyBhcmUgZ2VuZXJhbGx5IGNvbnNpZGVyZWQgdG8gYmUgcGVhY2VmdWwgYW5pbWFscywgdGhleQogICAgICAgICAgY2FuIHBvc2UgYSBkYW5nZXIgdG8gaHVtYW5zIGFuZCBwZXRzIGlmIHRoZXkgZmVlbCB0aHJlYXRlbmVkIG9yCiAgICAgICAgICBjb3JuZXJlZC4gVGhleSBoYXZlIGJlZW4ga25vd24gdG8gYXR0YWNrIHBlb3BsZSBhbmQgZG9ncywgdXNpbmcgdGhlaXIKICAgICAgICAgIGhpbmQgbGVncyB0byBkZWxpdmVyIHBvd2VyZnVsIGtpY2tzLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InBob3RvIj4KICAgICAgICA8aW1nCiAgICAgICAgICBjbGFzcz0iaWxsdXN0cmF0aW9uIgogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9rYW5nYXJvby1jaGFsbGVuZ2UtZXhhbXBsZS12Mi5wbmciCiAgICAgICAgICBhbHQ9Imthbmdhcm9vIgogICAgICAgICAgd2lkdGg9IjEyOHB4IgogICAgICAgIC8+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8ZGl2IGNsYXNzPSJkZXNjcmlwdGlvbiI+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgUGFuZGFzIGFyZSBhbiBpY29uaWMgc3BlY2llcyBuYXRpdmUgdG8gQ2hpbmEsIGtub3duIGZvciB0aGVpcgogICAgICAgICAgZGlzdGluY3RpdmUgYmxhY2sgYW5kIHdoaXRlIGNvbG9yaW5nLCBsYXJnZSByb3VuZCBmYWNlcywgYW5kIGN1ZGRseQogICAgICAgICAgYXBwZWFyYW5jZS4KICAgICAgICA8L3A+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgUGFuZGFzIGFyZSBlbmRhbmdlcmVkLCB3aXRoIG9ubHkgYXJvdW5kIDEsODAwIGluZGl2aWR1YWxzIGxlZnQgaW4gdGhlCiAgICAgICAgICB3aWxkLiBUaGV5IGZhY2UgbnVtZXJvdXMgdGhyZWF0cywgaW5jbHVkaW5nIGhhYml0YXQgbG9zcyBkdWUgdG8gaHVtYW4KICAgICAgICAgIGRldmVsb3BtZW50LCBwb2FjaGluZywgYW5kIGEgbG93IHJlcHJvZHVjdGl2ZSByYXRlLgogICAgICAgIDwvcD4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBQYW5kYXMgYXJlIGEgY3VsdHVyYWwgc3ltYm9sIG9mIENoaW5hLCBhbmQgaGF2ZSBiZWVuIHJldmVyZWQgZm9yCiAgICAgICAgICBjZW50dXJpZXMuIFRoZXkgZmVhdHVyZSBwcm9taW5lbnRseSBpbiBDaGluZXNlIGFydCwgbGl0ZXJhdHVyZSwgYW5kCiAgICAgICAgICBmb2xrbG9yZSwgYW5kIGFyZSBjb25zaWRlcmVkIGEgbmF0aW9uYWwgdHJlYXN1cmUuCiAgICAgICAgPC9wPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICAgIFBhbmRhcyBoYXZlIHVuaXF1ZSBwaHlzaWNhbCBhbmQgYmVoYXZpb3JhbCBjaGFyYWN0ZXJpc3RpY3MgdGhhdCBtYWtlCiAgICAgICAgICB0aGVtIGZhc2NpbmF0aW5nIHRvIHN0dWR5LiBGb3IgZXhhbXBsZSwgdGhleSBoYXZlIGEgInRodW1iIiB0aGF0IGlzCiAgICAgICAgICBhY3R1YWxseSBhbiBleHRlbnNpb24gb2YgdGhlaXIgd3Jpc3QgYm9uZSwgd2hpY2ggdGhleSB1c2UgdG8gZ3Jhc3AKICAgICAgICAgIGJhbWJvbyBzdGFsa3MuCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0icGhvdG8iPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJpbGx1c3RyYXRpb24iCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hZHZhbmNlZCtjc3MrdGVjaG5pcXVlcy9wb3NpdGlvbmluZytzZWN0aW9uL3BhbmRhLWNoYWxsZW5nZS1leGFtcGxlLXYyLnBuZyIKICAgICAgICAgIGFsdD0icGFuZGEiCiAgICAgICAgICB3aWR0aD0iMTI4cHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYmVsb3cgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwouaWxsdXN0cmF0aW9uIHsKICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwp9Ci8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KClAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTVweDsKICBib3JkZXI6IDFweCBzb2xpZCAjMzIyMTMyOwogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jb250YWluZXI6bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLWJvdHRvbTogNDBweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMikgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IHJvdy1yZXZlcnNlOwp9CgouZGVzY3JpcHRpb24sCi5waG90byB7CiAgYm9yZGVyOiAxcHggc29saWQ7CiAgcGFkZGluZzogMTVweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMSkgLmRlc2NyaXB0aW9uIHsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLWxlZnQ6IDMwcHg7Cn0KCi50ZXh0IHsKICBsaW5lLWhlaWdodDogMzhweDsKICBmb250LXNpemU6IDE0cHg7Cn0KCi50ZXh0OjpmaXJzdC1sZXR0ZXIgewogIGZvbnQtd2VpZ2h0OiA5MDA7CiAgZm9udC1zaXplOiAxOHB4Owp9

1. Para que las ilustraciones de animales permanezcan fijas en la parte superior de la ventana mientras el usuario lee el artículo, aplicar la posición `sticky` al elemento con el nombre de clase `illustration`.
2. Establecer la propiedad `top` en `0` para indicar que el elemento debe permanecer adherido a la parte superior de la ventana.

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi5pbGx1c3RyYXRpb24gewogIHBvc2l0aW9uOiBzdGlja3k7CiAgdG9wOiAwcHg7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpQIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDE1cHg7CiAgYm9yZGVyOiAxcHggc29saWQgIzMyMjEzMjsKICBkaXNwbGF5OiBmbGV4Owp9CgouY29udGFpbmVyOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDQwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3ctcmV2ZXJzZTsKfQoKLmRlc2NyaXB0aW9uLAoucGhvdG8gewogIGJvcmRlcjogMXB4IHNvbGlkOwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDEpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgouY29udGFpbmVyOm50aC1jaGlsZCgyKSAuZGVzY3JpcHRpb24gewogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGV4dCB7CiAgbGluZS1oZWlnaHQ6IDM4cHg7CiAgZm9udC1zaXplOiAxNHB4Owp9CgoudGV4dDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXdlaWdodDogOTAwOwogIGZvbnQtc2l6ZTogMThweDsKfQ==

Mejora tus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posiciona y gestiona elementos con precisión utilizando estrategias avanzadas de posicionamiento. Crea transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforma y manipula elementos para lograr efectos visuales dinámicos. Construye diseños responsivos que se adapten a diferentes dispositivos y aprende a optimizar tu flujo de trabajo con preprocesadores CSS como Sass.

Investigue qué pueden esperar los estudiantes de este curso avanzado de estilos en HTML y CSS. ¿Qué conocimientos previos se requieren antes de comenzar el curso? ¿Qué temas se abordarán en el mismo?

Posicionamiento y gestión de elementos en páginas web. Estudio de las diferentes propiedades de posicionamiento, uso del orden de apilamiento para controlar la visibilidad de elementos superpuestos y manejo del desbordamiento de contenido.

Investigue el potencial de las transiciones y aprenda cómo mejorar la experiencia del usuario. Descubra cómo animar propiedades de manera suave y gradual, creando transiciones de estado sin interrupciones.

Aprenda sobre la propiedad animation y cómo puede utilizarse para crear diseños dinámicos y atractivos. Descubra cómo crear animaciones complejas utilizando keyframes y cómo controlar la animación.

Explora la propiedad de transformación, que permite modificar la apariencia y posición de los elementos en una página web. Aprende a escalar, rotar, sesgar y trasladar elementos en dos y tres dimensiones. Combina múltiples transformaciones para crear efectos más complejos.

Los principios y técnicas utilizados en el diseño adaptativo/responsivo buscan que los sitios web y aplicaciones sean accesibles y visualmente atractivos en diferentes dispositivos, tamaños de pantalla y orientaciones.

Aprende sobre los preprocesadores en CSS y cómo pueden ayudar a escribir un código más eficiente y mantenible. Comprende cómo utilizar preprocesadores para simplificar el flujo de trabajo y generar un código CSS más limpio.

Desafío: Dominar la Posición Sticky

Tarea

Awesome!

Desafío: Dominar la Posición Sticky

Tarea