Udfordring: Opret en Moderne Kortkomponent

Øv dig og forbedr det visuelle udtryk på websiden. Opgaven omfatter:

• Tilføj en skygge til div-elementet med klassenavnet card. De angivne skyggeværdier er

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

• Tilføj et baggrundsbillede til div-elementet med klassenavnet card. Billedlinket er angivet:

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

• Centrer baggrundsbilledet i kortet.

• For at tilføje en skygge til et element, anvend box-shadow-egenskaben med den angivne værdi. I dette tilfælde er værdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• For at sætte et billede som baggrund ved hjælp af background-image-egenskaben, benyt syntaksen url("correct path"). Indsæt stien til billedet i anførselstegn inde i parentesen. I denne opgave er den korrekte sti angivet: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• For at bestemme placeringen af baggrundsbilledet, brug egenskaben background-position. I dette tilfælde skal værdien sættes til center for egenskaben.

Hvad du har bygget

Du har stylet websider ved hjælp af CSS og tilføjet farver, afstand, layout og visuelle komponenter.

Hvad der mangler

Dine sider ser gode ud, men de er stadig statiske. Brugere kan ikke interagere med dem.

Hvad er det næste

For at tilføje funktionalitet og interaktivitet skal du bruge JavaScript. Næste skridt er at arbejde med JavaScript og gøre dine sider dynamiske.