Skrifa skal CSS til að láta gefið HTML líta út eins og gefin fyrirmynd (fyrirmynd.png).
Ekki er leyfilegt að breyta HTML skjali nema til þess að tengja CSS við það, þ.e.a.s. ekki má breyta því sem er innan <body>.
Grunnstærð leturs skal vera 18px og aðeins skal nota em einingar fyrir stærðir fyrir utan:
- Skilgreiningu á grunnstærð
- Þykkt á
border
Útlit þarf aðeins að vera rétt í a.m.k. 800px breiðum Chrome vafra.
h1 fyrirsögn skal aðeins hafa margin að neðan og skal það vera 36px. Leturstærð fyrirsagnar skal vera 36px. Fyrir neðan fyrirsögn skal vera 1px breið línu með litinn #999.
h2 fyrirsagnir skulu ekki hafa neitt margin. Leturstærð fyrirsagna skal vera 30px. Litur fyrirsagna skal vera #999.
Ekki skal birta h2 fyrirsögn undir .card-section.
h3 fyrirsagnir skulu ekki hafa neitt margin. Leturstærð fyrirsagna skal vera 18px.
Takkar skulu hafa 5px border. Efri og hægri partur skulu hafa litinn #999 en neðri og vinstri #666.
Letur stærð takka skal vera 18px.
Þegar hoverað er yfir takka skal breidd stækka úr 5px í 10px litir skiptast, þ.e.a.s., efri og hægri partur skulu hafa litinn #666 en neðri og vinstri #999.
Fyrsta textablokk:
- Letur stærð
18px - Margin vinstra megin
0px - Fyrsta lína skal vera með bakgrunnslit
#ccc - Fyrsti stafur skal vera
36px
Önnur textablokk:
- Letur stærð
16px - Margin vinstra megin
50px - Fyrsta lína skal vera með bakgrunnslit
#ddd - Fyrsti stafur skal vera
36px
Þriðja textablokk:
- Letur stærð
14px - Margin vinstra megin
100px - Fyrsta lína skal vera með bakgrunnslit
#eee - Fyrsti stafur skal vera
36px
Kort (eða „cards“) eru oft notuð í hönnun á vefnum. Þau aðskilja efni á einhvern hátt og eru oft birt saman í listum.
Fyrir okkar kort gildir:
- Innan
.cardselement eiga kort að raðast inline, þ.e.a.s. vera hlið við hlið - Breidd og hæð þeirra eiga að vera
180px - Margin og padding eiga að vera
9pxá allar hliðar 1pxsvart border á að vera utanum þau- Oddatölu kort hafa
#fffbakgrunn og#333litaðann texta - Jafntölu kort hafa
#333bakgrunn og#ffftexta
Fyrir .cards element gildir:
- Þegar mús fer yfir element eiga bakgrunnar og litir korta að víxlast, sjá
hover.gif - Má mest verða
666pxbreitt - Miðja á element á síðu
- Takki innan elements skal hafa
36pxmargin að ofan og neðan - Bæta skal við texta eftir takka sem segir „Ekki meira efni“, með
18pxmargin að ofan og neðan,1pxborder með#c00lit, og18pxpadding að ofan
Aðeins er leyfilegt að nota eftirfarandi yfirlýsingar í CSS:
background-colorborderogborder-topo.fl.colorcontentdisplayfont-sizeheightmarginogmargin-topo.fl.max-widthpaddingogpadding-topo.fl.width
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 og gilt CSS tengt við HTML
- 20% – Aðeins leyfileg eigindi notuð og
emnotað fyrir stærðir - 20% – Útlit á fyrirsögnum og tökkum rétt
- 20% – Útlit á texta rétt
- 20% – Útlit á kortum rétt
Verkefni sett fyrir í fyrirlestri mánudaginn 10. september 2018.
Skila skal undir „Verkefni og hlutaprófa“ á Uglu í seinasta lagi fyrir lok dags þriðjudaginn 18. september 2018.
Skilaboð skulu innihalda slóð á verkefni ásamt zip skjali með lausn sem heitir ``verkefni3-.zip, t.d. verkefni3-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.2
| Útgáfa | Lýsing |
|---|---|
| 0.1 | Fyrsta útgáfa |
| 0.2 | Laga fyrirmynd.png, sýndi vitlaust bil fyrir neðan „Ekki meira efni“ |