Uitdaging: Maak een Modern Kaartcomponent

Oefening in het verbeteren van de visuele aantrekkingskracht van de webpagina. De opdracht omvat:

• Voeg een schaduw toe aan het div-element met de classnaam card. De opgegeven schaduwwaarden zijn

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

• Voeg een achtergrondafbeelding toe aan het div-element met de classnaam card. De afbeeldingslink is opgegeven:

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

• Centreer de achtergrondafbeelding binnen de kaart.

• Gebruik de eigenschap box-shadow met de opgegeven waarde om een schaduw aan een element toe te voegen. In dit geval is de waarde rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Voor het instellen van een afbeelding als achtergrond met de eigenschap background-image, gebruik de syntaxis url("correct path"). Plaats binnen de haakjes aanhalingstekens en geef het pad naar de afbeelding op. In deze opdracht is het juiste pad opgegeven: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Gebruik de eigenschap background-position om de positie van de achtergrondafbeelding te bepalen. Stel in dit geval de waarde in op center voor deze eigenschap.

Wat je hebt gebouwd

Je hebt webpagina's gestyled met CSS door kleuren, afstand, lay-out en visuele componenten toe te voegen.

Wat ontbreekt er

Je pagina's zien er goed uit, maar ze zijn nog steeds statisch. Gebruikers kunnen er niet mee interageren.

Wat volgt

Om gedrag en interactiviteit toe te voegen, heb je JavaScript nodig. Hierna ga je aan de slag met JavaScript en maak je je pagina's dynamisch.