Harjoitus 10 - Joulukuusi

body

nolla marginaalit ja piilota ylivuoto

main

• aseta leveys ja korkeus täyttämään koko ruutu (100vw / 100vh)
• aseta tumma taustaväri
• lisää display:flex; ja keskitä flex elementit pysty ja vaakasuunnassa
• aseta position: relative; jotta jäljempänä tulevat elementit ottavat tämän elementin referenssiksi
• lisää seuraava koodi, joka asemoi kaikki kuvat paitsi taulukon sisällä olevat absoluuttisesti

img:not(table img){ position: absolute; }

nyt position: absolute; ei tarvitse kirjoittaa kaikkiin kuviin erikseen

kuusen jalka (.tree_leg)

• elementin pitäisi nyt olla aboluuttisesti asemoitava eli sille voidaan antaa
• bottom: 1em; joka asettaa kuusen jalan ruudun alalaitaan

Alaoksat (.tree_bot)

bottom: 8em; nostaa alaoksia hieman ylemmäs kuin kuusen jalkaa

Keskioksat (.tree_mid)

• käytä samaa bottom käskyä mutta nosta keskioksia ylemmäs kuin alaoksia
• lisää scale ja pienennä keskioskia hieman

Latva (.tree_top)

• käytä bottom käskyä ja nosta latvaa ylemmäs
• lisää scale ja muuta latvaa peinemmäksi

Latvatähti (.star)

nosta latvatähti joulukuusen latvaan

Koristenauhat (tinsel_bot, tinsel_mid, tinsel_top)

• Käytä samaa logiikkaa kuin oksien asemoinnissa
• nosta kukin koristenauha paikalleen ja skaala sitä pienemmäksi

Koriste-taulukko (.decorations)

• lisää position: absolute; ja nosta taulukko sopivalle korkeudelle
• jos lisäät taulukon soluille reunaviivan, pystyt havainnoimaan paremmin, miten suuri taulukko on
• table tr td{border: solid thin white;}

Koriste-taulukon rivit (.decorations tr)

• tee taulukon rivistä flex-elementti display: flex;
• aseta rivin korkeus (height) sopivaksi
• keskitä flex-elementit vaakasuunnassa keskelle
• keskitä flex-elementit pystysuunnassa pohjalle (align-items:flex-end;)
• kynttilät ja pallot (.candle / .ball)
• Säädä kynttilöiden ja pallojen koko sopivaksi (max-width)