## Завдання
Створити макет блогу для статей про тварин, забезпечивши постійну видимість відповідної фотографії тварини під час читання статті. Коли користувач починає читати про іншу тварину, показувати наступну фотографію тварини.
Кроки:
1. Застосувати позиціонування `sticky` до елемента з класом `illustration`.
2. Вказати позицію на сторінці, де елемент має стати "липким".

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

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYmVsb3cgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwouaWxsdXN0cmF0aW9uIHsKICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwp9Ci8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KClAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTVweDsKICBib3JkZXI6IDFweCBzb2xpZCAjMzIyMTMyOwogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jb250YWluZXI6bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLWJvdHRvbTogNDBweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMikgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IHJvdy1yZXZlcnNlOwp9CgouZGVzY3JpcHRpb24sCi5waG90byB7CiAgYm9yZGVyOiAxcHggc29saWQ7CiAgcGFkZGluZzogMTVweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMSkgLmRlc2NyaXB0aW9uIHsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLWxlZnQ6IDMwcHg7Cn0KCi50ZXh0IHsKICBsaW5lLWhlaWdodDogMzhweDsKICBmb250LXNpemU6IDE0cHg7Cn0KCi50ZXh0OjpmaXJzdC1sZXR0ZXIgewogIGZvbnQtd2VpZ2h0OiA5MDA7CiAgZm9udC1zaXplOiAxOHB4Owp9

1. Щоб ілюстрації тварин залишалися прикріпленими до верхньої частини вікна перегляду під час читання статті, застосуйте позиціонування `sticky` до елемента з класом `illustration`.
2. Встановіть властивість `top` у значення `0`, щоб елемент залишався прикріпленим до верхньої частини вікна перегляду.

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi5pbGx1c3RyYXRpb24gewogIHBvc2l0aW9uOiBzdGlja3k7CiAgdG9wOiAwcHg7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpQIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDE1cHg7CiAgYm9yZGVyOiAxcHggc29saWQgIzMyMjEzMjsKICBkaXNwbGF5OiBmbGV4Owp9CgouY29udGFpbmVyOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDQwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3ctcmV2ZXJzZTsKfQoKLmRlc2NyaXB0aW9uLAoucGhvdG8gewogIGJvcmRlcjogMXB4IHNvbGlkOwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDEpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgouY29udGFpbmVyOm50aC1jaGlsZCgyKSAuZGVzY3JpcHRpb24gewogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGV4dCB7CiAgbGluZS1oZWlnaHQ6IDM4cHg7CiAgZm9udC1zaXplOiAxNHB4Owp9CgoudGV4dDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXdlaWdodDogOTAwOwogIGZvbnQtc2l6ZTogMThweDsKfQ==

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з максимальною точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захопливі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни, що підлаштовуються під різні пристрої, та оптимізуйте робочий процес із препроцесорами CSS, такими як Sass.

Дослідження очікувань слухачів від цього курсу з розширеного стилювання HTML та CSS. Необхідні попередні знання перед початком курсу. Теми, які будуть розглянуті у курсі.

Позиціонування та керування елементами на вебсторінках. Огляд різних властивостей позиціонування, вивчення використання порядку накладання для контролю видимості елементів, що перекривають один одного, а також робота з переповненням вмісту.

Дослідження можливостей переходів та вивчення способів покращення взаємодії з користувачем. Ознайомлення з методами плавної та поступової анімації властивостей для забезпечення непомітних змін стану.

Дізнайтеся про властивість animation та її використання для створення динамічних і привабливих дизайнів. Ознайомтеся зі створенням складних анімацій за допомогою keyframes і керуванням анімацією.

Дослідження властивості transform, яка дозволяє змінювати вигляд і розташування елементів на вебсторінці. Вивчення масштабування, обертання, перекошування та переміщення елементів у двох- і тривимірному просторі. Комбінування кількох трансформацій для створення складніших ефектів.

Принципи та методи, що використовуються в адаптивному та респонсивному дизайні, спрямовані на забезпечення доступності та візуальної привабливості вебсайтів і застосунків на різних пристроях, розмірах екранів і орієнтаціях.

Дізнайтеся про препроцесори в CSS та їхню роль у написанні більш ефективного й підтримуваного коду. Ознайомтеся з використанням препроцесорів для спрощення робочого процесу та створення чистішого CSS-коду.

Виклик: Опанування Фіксованого Позиціонування зі Зсувом

Завдання

Awesome!

Виклик: Опанування Фіксованого Позиціонування зі Зсувом

Завдання