Utmaning: Skapa en Modern Kortkomponent

Låt oss öva och förbättra webbplatsens visuella utseende. Uppgiften omfattar:

• Lägg till en skugga på div-elementet med klassnamnet card. De angivna skuggvärdena är

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

• Lägg till en bakgrundsbild på div-elementet med klassnamnet card. Bildlänken är angiven:

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

• Centrera bakgrundsbilden i kortet.

• För att lägga till en skugga på ett element, använd egenskapen box-shadow med det angivna värdet. I detta fall är värdet rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• För att ange en bild som bakgrund med egenskapen background-image, använd syntaxen url("correct path"). Inom parenteserna, öppna citattecken och ange sökvägen till bilden. I denna uppgift är den korrekta sökvägen: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• För att bestämma bakgrundsbildens position, använd egenskapen background-position. I detta fall, ange värdet till center för egenskapen.

Vad du har byggt

Du har stylat webbsidor med CSS genom att lägga till färger, avstånd, layout och visuella komponenter.

Vad som saknas

Dina sidor ser bra ut, men de är fortfarande statiska. Användare kan inte interagera med dem.

Vad som är nästa steg

För att lägga till beteende och interaktivitet behöver du JavaScript. Nästa steg är att börja arbeta med JavaScript och göra dina sidor dynamiska.