Haaste: Luo Moderni Korttikomponentti

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ä.

• 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 background-image-ominaisuudella, 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ämiseen käytä background-position-ominaisuutta. Tässä tapauksessa aseta arvoksi center.

Mitä olet rakentanut

Olet muotoillut verkkosivuja CSS:llä lisäämällä värejä, välistyksiä, asettelua ja visuaalisia komponentteja.

Mitä puuttuu

Sivusi näyttävät hyviltä, mutta ne ovat edelleen staattisia. Käyttäjät eivät voi olla vuorovaikutuksessa niiden kanssa.

Mitä seuraavaksi

Lisätäksesi toiminnallisuutta ja vuorovaikutteisuutta tarvitset JavaScriptiä. Seuraavaksi alat työskennellä JavaScriptin parissa ja teet sivuistasi dynaamisia.