<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:57:00+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "hr"
}
-->
# CSS Refaktoriranje Zadatak

## Cilj

Refaktorirati projekt terarija koristeći **Flexbox** ili **CSS Grid** za raspored. Ažurirajte HTML i CSS prema potrebi kako biste postigli moderan, responzivan dizajn. Ne trebate implementirati elemente koji se mogu povlačiti—fokusirajte se samo na raspored i stilizaciju.

## Upute

1. **Izradite novu verziju** aplikacije za terarij. Ažurirajte oznake i CSS kako biste koristili Flexbox ili CSS Grid za raspored.
2. **Osigurajte da su umjetnički elementi i ostali dijelovi na mjestu** kao u originalnoj verziji.
3. **Testirajte svoj dizajn** u najmanje dva različita preglednika (npr. Chrome, Firefox, Edge).
4. **Napravite snimke zaslona** svog terarija u svakom pregledniku kako biste pokazali kompatibilnost među preglednicima.
5. **Predajte** svoj ažurirani kod i snimke zaslona.

## Rubrika

| Kriterij   | Izvrsno                                                                  | Zadovoljavajuće                       | Potrebno poboljšanje                   |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Raspored   | Potpuno refaktoriran koristeći Flexbox ili CSS Grid; vizualno privlačan i responzivan | Djelomično refaktorirani elementi; djelomična upotreba Flexboxa ili Grida | Malo ili nimalo upotrebe Flexboxa ili Grida; raspored nepromijenjen |
| Kompatibilnost među preglednicima | Snimke zaslona osigurane za više preglednika; dosljedan izgled | Snimke zaslona za jedan preglednik; manje nedosljednosti | Nema snimki zaslona ili velike nedosljednosti |
| Kvaliteta koda | Čist, dobro organiziran HTML/CSS; jasni komentari                     | Djelomična organizacija; malo komentara | Neorganiziran kod; nedostatak komentara |

## Savjeti

- Pregledajte vodiče za [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) i [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Koristite alate za razvoj preglednika za testiranje responzivnosti.
- Komentirajte svoj kod radi jasnoće.

---

**Izjava o odricanju odgovornosti**:  
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja mogu proizaći iz korištenja ovog prijevoda.