Útfæra skal síðu með fyrsta hluta sögunnar The Legend of Sleepy Hollow.
Gefið er HTML skjal með öllum texta ásamt CSS skrá sem resettar margin og padding á öllum elementum ásamt því að setja box-sizing: border-box; á öll element.
Sækja þarf tvær leturgerðir á Google Font og tengja við verkefni:
IM Fell DW Pica, regularMerriweather, regular, regular italic og bold 700
Gefin er fyrirmynd sem sýnir fyrsta part af verkefni, part í miðju og neðsta part:
Bæta þarf við viðeigandi elementum í HTML til að geta stílað skv. forskrift, leitast skal við að nota merkingafræðileg element (t.d. <header> og <footer>). Ekki er leyfilegt að setja myndir inn með <img>.
Allar myndir skulu fylla út í alla breidd á viewport, sama hver hún er, sjá skjáskot þar sem búið er að zooma í 50% stærð:
Aðeins er leyfilegt að setja myndir inn með CSS.
Leturstærðir skulu skilgreindar með em eða rem, leyfilegt er að nota aðrar einingar á öðrum stærðum en notast skal við hlutfallslegar stærðir nema góð ástæða til annars.
Grunn leturstærð í fyrirmynd er 28px.
Meginmál notar Merriweather. Fyrirsagnir nota IM Fell DW Pica.
Svartur litur er #333, hvítur litur er #ddd.
Fyrirmynd notar eftirfarandi bil:
28pxfyrir minni bil56pxfyrir stærri bil28pxpadding er notað til að texti leggist ekki utan í viewport í minni stærðum, sjá mynd að neðan
Fyrirsagnir sem liggja ofan á myndum skulu hafa protection á bakvið sig sem fara yfir alla myndina. Þetta protection skal vera 80% gegnsætt og alveg hvítt á litinn.
Þar sem texti er allur í hástöfum á ekki að breyta texta í HTML skjali heldur nota CSS.
Fyllir út í allan skjá (allt viewport) bæði á breidd og hæð. Setur fasta mynd (img/trees.jpg) sem fyllir út í allt element. Bil að ofan er 20% af hæð viewport. Notar minni bil á milli fyrstu og annarar fyrirsagnar en á milli annarar fyrirsagnar og texta er bil sem byggir á einhvern hátt á breidd eða hæð viewport, sama á við um leturstærðir. Þessar stærðir þurfa ekki þarf að vera nákvæmlega eins og í sýnilausn en í henni er hegðun eftirfarandi:
Hámarksbreidd á texta í haus er 1120px.
Hámarksbreidd meginmáls er 1400px og skal það vera miðjusett.
Texti í tilvísun er skáletraður en vitnun ekki.
Texti meginmáls er í grunnstærð með línuhæð 2.
Fyrsti stafur í fyrstu málsgrein á eftir mynd skal stækkaður upp í að fara yfir þrjú línubil og vera feitletraður.
Í gefnu HTML eru á fjórum stöðum <hr> sem brýtur upp texta. Þau skal stíla til þannig að þau fylli upp í 60% af hæð viewports og alla breidd þess með fastar myndir sem fylla upp í allt element. Myndir eru í röð:
img/tree-fog.jpgimg/castle.jpgimg/hands.jpgimg/moon.jpg
Fótur hefur hvítan bakgrunn með svörtum texta. Hámarksbreidd efnis er 1400px. Stíla skal til þau element sem eru í gefnu HTML eftir fyrirmynd, ekki ætti að breyta HTML.
Aðeins er leyfilegt að nota eftirfarandi yfirlýsingar í CSS:
background-*borderbottombox-sizingcolorfloatfont-*heightleftline-heightlist-stylemargin-*max-heightmax-widthpadding-*positionrighttext-*topwidthz-index
Leyfilegt er að nota alla selectora.
CSS skal vera án villna og viðvarana þegar keyrt í gegnum https://jigsaw.w3.org/css-validator/
- 20% – Snyrtilega uppsett, merkingarfræðilegt og gilt HTML
- 20% – Snyrtilega uppsett, gilt CSS sem aðeins notar leyfileg eigindi
- 30% – Haus og fótur útfærðir eftir forskrift
- 30% – Meginmál útfært eftir forskrift
Verkefni sett fyrir í fyrirlestri mánudaginn 17. september 2018.
Skila skal undir „Verkefni og hlutaprófa“ á Uglu í seinasta lagi fyrir lok dags þriðjudaginn 25. september 2018.
Skilaboð skulu innihalda slóð á verkefni ásamt zip skjali með lausn sem heitir verkefni4-<notendanafn>.zip, t.d. verkefni4-osk.zip.
Sett verða fyrir tíu minni verkefni þar sem átta bestu gilda 3,5% hvert, samtals 28% af lokaeinkunn.
Sett verða fyrir tvö hópverkefni þar sem hvort um sig gildir 11%, samtals 22% af lokaeinkunn.
Útgáfa 0.1