Utfordring: Lag en Moderne Kortkomponent

La oss øve og forbedre det visuelle uttrykket på nettsiden. Oppgaven inkluderer:

• Legg til en skygge på div-elementet med klassenavnet card. De spesifiserte skyggeverdi er

rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px

• Legg til et bakgrunnsbilde på div-elementet med klassenavnet card. Bildelenken er oppgitt:

   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png

• Sentrer bakgrunnsbildet i kortet.

• For å legge til en skygge på et element, bruk box-shadow-egenskapen med den angitte verdien. I dette tilfellet er verdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• For å sette et bilde som bakgrunn ved hjelp av background-image-egenskapen, bruk syntaksen url("correct path"). Inne i parentesene åpnes anførselstegn og stien til bildet spesifiseres. I denne oppgaven er korrekt sti oppgitt: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• For å bestemme posisjonen til bakgrunnsbildet, bruk background-position-egenskapen. I dette tilfellet settes verdien til center for egenskapen.

Hva du har laget

Du har stylet nettsider med CSS ved å legge til farger, mellomrom, oppsett og visuelle komponenter.

Hva som mangler

Sidene dine ser bra ut, men de er fortsatt statiske. Brukere kan ikke samhandle med dem.

Hva er neste steg

For å legge til funksjonalitet og interaktivitet, trenger du JavaScript. Neste steg er å begynne å jobbe med JavaScript og gjøre sidene dine dynamiske.