## Tarefa
Crie um layout de blog para artigos sobre animais, garantindo que a foto correspondente do animal esteja sempre visível enquanto o usuário lê o artigo. Quando o usuário começar a ler sobre outro animal, exiba a foto do próximo animal.
Etapas:
1. Aplique o posicionamento `sticky` ao elemento com o nome de classe `illustration`.
2. Especifique a posição na página onde o elemento deve se tornar sticky.

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

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYmVsb3cgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwouaWxsdXN0cmF0aW9uIHsKICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwp9Ci8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KClAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTVweDsKICBib3JkZXI6IDFweCBzb2xpZCAjMzIyMTMyOwogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jb250YWluZXI6bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLWJvdHRvbTogNDBweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMikgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IHJvdy1yZXZlcnNlOwp9CgouZGVzY3JpcHRpb24sCi5waG90byB7CiAgYm9yZGVyOiAxcHggc29saWQ7CiAgcGFkZGluZzogMTVweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMSkgLmRlc2NyaXB0aW9uIHsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLWxlZnQ6IDMwcHg7Cn0KCi50ZXh0IHsKICBsaW5lLWhlaWdodDogMzhweDsKICBmb250LXNpemU6IDE0cHg7Cn0KCi50ZXh0OjpmaXJzdC1sZXR0ZXIgewogIGZvbnQtd2VpZ2h0OiA5MDA7CiAgZm9udC1zaXplOiAxOHB4Owp9

1. Para fazer com que as ilustrações de animais fiquem fixas no topo da janela de visualização enquanto o usuário lê o artigo, aplique o posicionamento `sticky` ao elemento com o nome de classe `illustration`.
2. Defina a propriedade `top` como `0` para especificar que o elemento deve permanecer fixo no topo da janela de visualização.

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi5pbGx1c3RyYXRpb24gewogIHBvc2l0aW9uOiBzdGlja3k7CiAgdG9wOiAwcHg7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpQIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDE1cHg7CiAgYm9yZGVyOiAxcHggc29saWQgIzMyMjEzMjsKICBkaXNwbGF5OiBmbGV4Owp9CgouY29udGFpbmVyOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDQwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3ctcmV2ZXJzZTsKfQoKLmRlc2NyaXB0aW9uLAoucGhvdG8gewogIGJvcmRlcjogMXB4IHNvbGlkOwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDEpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgouY29udGFpbmVyOm50aC1jaGlsZCgyKSAuZGVzY3JpcHRpb24gewogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGV4dCB7CiAgbGluZS1oZWlnaHQ6IDM4cHg7CiAgZm9udC1zaXplOiAxNHB4Owp9CgoudGV4dDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXdlaWdodDogOTAwOwogIGZvbnQtc2l6ZTogMThweDsKfQ==

Aprimore suas habilidades de estilização dominando técnicas avançadas de CSS para design web moderno. Posicione e gerencie elementos com precisão utilizando estratégias avançadas de posicionamento. Crie transições suaves e animações envolventes para aprimorar a experiência do usuário. Transforme e manipule elementos para efeitos visuais dinâmicos. Desenvolva designs responsivos que se adaptam a diferentes dispositivos e aprenda a otimizar seu fluxo de trabalho com pré-processadores CSS como Sass.

Descubra o que os alunos podem esperar deste curso avançado de estilização com HTML e CSS. Quais conhecimentos prévios são necessários antes de iniciar o curso? Quais tópicos serão abordados?

Posicione e gerencie elementos nas páginas da web. Aprenda sobre as diferentes propriedades de posicionamento, descubra como usar a ordem de empilhamento para controlar a visibilidade de elementos que se sobrepõem e, por fim, lide com o transbordamento de conteúdo.

Pesquise o poder das transições e aprenda como aprimorar a experiência do usuário. Descubra como animar propriedades de forma suave e gradual, criando transições de estado contínuas.

Aprenda sobre a propriedade animation e como ela pode ser utilizada para criar designs dinâmicos e envolventes. Descubra como criar animações complexas utilizando keyframes e como controlar a animação.

Explore a propriedade de transformação, que permite modificar a aparência e a posição dos elementos em uma página web. Aprenda a dimensionar, rotacionar, inclinar e transladar elementos em duas e três dimensões. Combine múltiplas transformações para criar efeitos mais complexos.

Os princípios e técnicas utilizados no design adaptativo/responsivo visam tornar sites e aplicações acessíveis e visualmente atraentes em diferentes dispositivos, tamanhos de tela e orientações.

Aprenda sobre pré-processadores em CSS e como eles podem ajudar a escrever um código mais eficiente e de fácil manutenção. Compreenda como utilizar pré-processadores para simplificar o fluxo de trabalho e gerar um código CSS mais limpo.

Desafio: Dominar o Posicionamento Sticky

Tarefa

Awesome!

Desafio: Dominar o Posicionamento Sticky

Tarefa