bcacan/table-grid-challange

Zadatak

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