Desafio: Dominar o Posicionamento Sticky
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:
- Aplique o posicionamento
stickyao elemento com o nome de classeillustration. - Especifique a posição na página onde o elemento deve se tornar sticky.
index.html
index.css
- 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
stickyao elemento com o nome de classeillustration. - Defina a propriedade
topcomo0para especificar que o elemento deve permanecer fixo no topo da janela de visualização.
index.html
index.css
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show me how to add the CSS for the sticky positioning?
What should the HTML structure look like for the animal articles and illustrations?
How do I switch the illustration when the user starts reading about another animal?
Awesome!
Completion rate improved to 2.04
Desafio: Dominar o Posicionamento Sticky
Deslize para mostrar o menu
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:
- Aplique o posicionamento
stickyao elemento com o nome de classeillustration. - Especifique a posição na página onde o elemento deve se tornar sticky.
index.html
index.css
- 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
stickyao elemento com o nome de classeillustration. - Defina a propriedade
topcomo0para especificar que o elemento deve permanecer fixo no topo da janela de visualização.
index.html
index.css
Obrigado pelo seu feedback!