Webbplatsen om Småland har nu utvecklats lite mer med den teknik som tagits upp i föreläsning F4 och laboration L4.
HTML- och CSS-kod
Det har lagts in några fler bilder i bildkollagen på varje sida, så det är några fler img-taggar i dem. I övrigt är HTML-koden exakt densamma som i föregående version (lab L3).
I CSS-koden är bildkollaget uppbyggt med grid i regeln för .collage för att få önskad uppdelning i rutor för bilderna. Det valda rutmönstret förutsätter också att bildernas storlek är i de proportioner som används i rutmönstret.
Sidornas layout är också uppbyggd med grid i regeln för body-elementet. Det görs först en layout i början av koden för en stor fönsterbredd. Sedan finns det media queries i slutet av koden, där det görs förändringar av layoten för smalare fönsterbredd. Ta fram Följsamt designläge och förändra bredden, så du ser hur layouten förändras.
Viss förändring av navigeringslänkarnas stil görs, men detta kommer sedan förbättras efter nästa laboration. Så de små förändringar som nu görs är mest för att anpassa till förändringarna i layouten och visa navigeringen som en kolumn eller en rad.
Se i övrigt kommentarer i CSS-koden.