Na temelju dva dostavljena grafička predloška na kojima se nalazi prikaz proizvoda (knjiga) u "list" i "grid" načinu, potrebno je izraditi odgovarajući HTML i CSS kod.
-
Prikaz oba načina (grid i list) treba realizirati koristeći identičan HTML.
-
Klik na gumb u gornjem desnom kutu (grid/list ikona) uz pomoć javascripte treba promijeniti css klasu kojom se određuje odabrani stil prikaza, a nalazi se na div elementu unutar kojeg se prikazuju knjige.
-
stranica mora biti responzivna (adaptacija dizajna prilikom skaliranja stranice na manje veličine zaslona je vaš izbor)
-
preporučeno je korištenje HTML5 i CSS3 tehnologija (npr. flexbox i sl.)
-
ukoliko želite možete koristiti SASS/SCSS skriptni jezik
-
ne preporuča se korištenje gotovih front-end frameworka (npr. Bootstrap)
-
stranica mora biti pravilno prikazana u modernim browserima (testiranje rješenja će biti u Chromeu)
-
Realizacija padajućeg izbornika je opcionalna, za reguliranje otvaranja/zatvaranja se može koristiti javasript
-
ikone su iz Material Designa (https://material.io/icons/), a može se koristiti i drugi iconset, po vlastitom izboru
-
korišteni font je Roboto https://fonts.google.com/specimen/Roboto
-
veličine korištenih fontova su:
- naslov stranice 21px
- naslov knjige 14px
- quote 12px
- autor 11px
- broj likeova 12px
- itemi u dropdown izborniku 13px
- napomena u dropdownu 9px