<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:32:03+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "pt"
}
-->
# Tarefa de Refatoração de CSS

## Objetivo

Refatorar o projeto do terrário para utilizar **Flexbox** ou **CSS Grid** na disposição dos elementos. Atualize o HTML e o CSS conforme necessário para alcançar um design moderno e responsivo. Não é necessário implementar elementos arrastáveis—foco apenas na disposição e no estilo.

## Instruções

1. **Crie uma nova versão** da aplicação do terrário. Atualize o HTML e o CSS para utilizar Flexbox ou CSS Grid na disposição dos elementos.
2. **Certifique-se de que a arte e os elementos estão no lugar** como na versão original.
3. **Teste o seu design** em pelo menos dois navegadores diferentes (ex.: Chrome, Firefox, Edge).
4. **Tire capturas de ecrã** do seu terrário em cada navegador para demonstrar a compatibilidade entre navegadores.
5. **Submeta** o seu código atualizado e as capturas de ecrã.

## Critérios de Avaliação

| Critério       | Exemplar                                                                 | Adequado                              | Necessita Melhorias                    |
|----------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Disposição     | Totalmente refatorado utilizando Flexbox ou CSS Grid; visualmente apelativo e responsivo | Alguns elementos refatorados; uso parcial de Flexbox ou Grid | Pouco ou nenhum uso de Flexbox ou Grid; disposição inalterada |
| Compatibilidade | Capturas de ecrã fornecidas para múltiplos navegadores; aparência consistente | Capturas de ecrã para um navegador; pequenas inconsistências | Sem capturas de ecrã ou grandes inconsistências |
| Qualidade do Código | HTML/CSS limpo e bem organizado; comentários claros                 | Alguma organização; poucos comentários | Código desorganizado; sem comentários |

## Dicas

- Revise os guias de [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) e [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Utilize as ferramentas de desenvolvimento dos navegadores para testar a responsividade.
- Comente o seu código para maior clareza.

---

**Aviso Legal**:  
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.