
Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävänä on:
- Lisää varjo `div`-elementtiin, jonka luokan nimi on `card`. Määritetyt varjoarvot ovat

```
rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
```
- Lisää taustakuva `div`-elementtiin, jonka luokan nimi on `card`. Kuvan linkki on annettu:
```
   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
```
- Keskitä taustakuva kortin sisällä.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iY2FyZCI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtY29udGVudCI+CiAgICAgICAgPGgyPldlYXRoZXI8L2gyPgogICAgICAgIDxwPlRvZGF5J3MgZm9yZWNhc3Q8L3A+CiAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9ImJ0biI+TGVhcm4gbW9yZS4uLjwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogX19fOwogIGJhY2tncm91bmQtaW1hZ2U6IF9fXzsKICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBfX187CiAgLyogQ2hhbmdlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0KCi5jYXJkLWNvbnRlbnQgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDc4LCAxMiwgODcsIDAuOSk7Cn0KCmgyIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAzcmVtOwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCnAgewogIGNvbG9yOiAjZmZmOwogIG1hcmdpbjogMDsKICBmb250LXNpemU6IDJyZW07CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgouYnRuIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDEwcHggMjBweDsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGZvbnQtc2l6ZTogMXJlbTsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKLmJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNjJjYzsKfQ==

- Lisääksesi varjon elementtiin, käytä `box-shadow`-ominaisuutta määritetyllä arvolla. Tässä tapauksessa arvo on `rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px`.
- Kun asetat kuvan taustaksi käyttämällä `background-image` -ominaisuutta, käytä syntaksia `url("correct path")`. Sulkujen sisällä avaa lainausmerkit ja määritä kuvan polku. Tässä tehtävässä oikea polku on annettu: `url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png")`.
- Taustakuvan sijainnin määrittämiseksi käytä `background-position` -ominaisuutta. Tässä tapauksessa aseta arvoksi `center` tälle ominaisuudelle.

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogcmdiYSgwLCAwLCAwLCAwLjMpIDBweCAxOXB4IDM4cHgsCiAgICByZ2JhKDAsIDAsIDAsIDAuMjIpIDBweCAxNXB4IDEycHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvY3NzLWZ1bmRhbWVudGFscy9kZWNvcmF0aXZlLWVmZmVjdHMvY2hhbGxlbmdlLWJhY2tncm91bmQucG5nIik7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9CgouY2FyZC1jb250ZW50IHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSg3OCwgMTIsIDg3LCAwLjkpOwp9CgpoMiB7CiAgY29sb3I6ICNmZmY7CiAgbWFyZ2luOiAwOwogIGZvbnQtc2l6ZTogM3JlbTsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpwIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAycmVtOwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKLmJ0biB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwN2JmZjsKICBjb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBmb250LXNpemU6IDFyZW07CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCi5idG46aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDYyY2M7Cn0=

Mikä ominaisuus lisää varjon elementin laatikon ympärille?

Miten voit lisätä kuvan elementin taustaksi?

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Haaste: Luo Moderni Korttikomponentti

1. Mikä ominaisuus lisää varjon elementin laatikon ympärille?

2. Miten voit lisätä kuvan elementin taustaksi?