
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iY2FyZCI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtY29udGVudCI+CiAgICAgICAgPGgyPldlYXRoZXI8L2gyPgogICAgICAgIDxwPlRvZGF5J3MgZm9yZWNhc3Q8L3A+CiAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9ImJ0biI+TGVhcm4gbW9yZS4uLjwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogX19fOwogIGJhY2tncm91bmQtaW1hZ2U6IF9fXzsKICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBfX187CiAgLyogQ2hhbmdlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0KCi5jYXJkLWNvbnRlbnQgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDc4LCAxMiwgODcsIDAuOSk7Cn0KCmgyIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAzcmVtOwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCnAgewogIGNvbG9yOiAjZmZmOwogIG1hcmdpbjogMDsKICBmb250LXNpemU6IDJyZW07CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgouYnRuIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDEwcHggMjBweDsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGZvbnQtc2l6ZTogMXJlbTsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKLmJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNjJjYzsKfQ==

- Voor het toevoegen van een schaduw aan een element, gebruik de eigenschap `box-shadow` met de opgegeven waarde. 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")`.
- Voor het bepalen van de positie van de achtergrondafbeelding, gebruik de eigenschap `background-position`. In dit geval de waarde `center` instellen voor de eigenschap.

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogcmdiYSgwLCAwLCAwLCAwLjMpIDBweCAxOXB4IDM4cHgsCiAgICByZ2JhKDAsIDAsIDAsIDAuMjIpIDBweCAxNXB4IDEycHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvY3NzLWZ1bmRhbWVudGFscy9kZWNvcmF0aXZlLWVmZmVjdHMvY2hhbGxlbmdlLWJhY2tncm91bmQucG5nIik7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9CgouY2FyZC1jb250ZW50IHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSg3OCwgMTIsIDg3LCAwLjkpOwp9CgpoMiB7CiAgY29sb3I6ICNmZmY7CiAgbWFyZ2luOiAwOwogIGZvbnQtc2l6ZTogM3JlbTsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpwIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAycmVtOwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKLmJ0biB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwN2JmZjsKICBjb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBmb250LXNpemU6IDFyZW07CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCi5idG46aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDYyY2M7Cn0=

Welke eigenschap voegt een schaduw toe rond de box van een element?

Hoe kun je een afbeelding als achtergrond van een element toevoegen?

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Uitdaging: Maak een Modern Kaartcomponent

1. Welke eigenschap voegt een schaduw toe rond de box van een element?

2. Hoe kun je een afbeelding als achtergrond van een element toevoegen?