
Let's practice and enhance the visual appeal of the webpage. The task includes:
- Add a shadow to the `div` element with the class name `card`. The specified shadow values are 

   ```
   rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
   ```
- Add a background image to the `div` element with the class name `card`. The image link is provided: 
   ```
   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
   ```
- Center the background image within the card.

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

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogX19fOwogIGJhY2tncm91bmQtaW1hZ2U6IF9fXzsKICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBfX187CiAgLyogQ2hhbmdlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0KCi5jYXJkLWNvbnRlbnQgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMCBhdXRvOwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDc4LCAxMiwgODcsIDAuOSk7Cn0KCmgyIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAzcmVtOwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCnAgewogIGNvbG9yOiAjZmZmOwogIG1hcmdpbjogMDsKICBmb250LXNpemU6IDJyZW07CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgouYnRuIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDEwcHggMjBweDsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGZvbnQtc2l6ZTogMXJlbTsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKLmJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNjJjYzsKfQ==

- To add a shadow to an element, utilize the `box-shadow` property with the specified value. In this case, the value is `rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px`.
- For setting an image as a background using the `background-image` property, employ the `url("correct path")` syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: `url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png")`.
- To determine the position of the background image, use the `background-position` property. In this scenario, set the value to `center` for the property.

LmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0NjBweDsKICBoZWlnaHQ6IDM2MHB4OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgYm94LXNoYWRvdzogcmdiYSgwLCAwLCAwLCAwLjMpIDBweCAxOXB4IDM4cHgsCiAgICByZ2JhKDAsIDAsIDAsIDAuMjIpIDBweCAxNXB4IDEycHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvY3NzLWZ1bmRhbWVudGFscy9kZWNvcmF0aXZlLWVmZmVjdHMvY2hhbGxlbmdlLWJhY2tncm91bmQucG5nIik7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9CgouY2FyZC1jb250ZW50IHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDAgYXV0bzsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSg3OCwgMTIsIDg3LCAwLjkpOwp9CgpoMiB7CiAgY29sb3I6ICNmZmY7CiAgbWFyZ2luOiAwOwogIGZvbnQtc2l6ZTogM3JlbTsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpwIHsKICBjb2xvcjogI2ZmZjsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAycmVtOwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKLmJ0biB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwN2JmZjsKICBjb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBmb250LXNpemU6IDFyZW07CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCi5idG46aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDYyY2M7Cn0=

Which property adds shadow around an element's box?

How can you add an image as the background of an element?

Apprendi le nozioni fondamentali di CSS, il linguaggio di stile che trasforma l'aspetto delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate.

Comprendere come CSS si collega a HTML e come gli stili vengono applicati tramite i selettori. Applicazione di colori, stili del testo ed effetti hover per controllare la presentazione visiva.

Miglioramento della tipografia tramite altezza della linea, spaziatura, proprietà dei font e font personalizzati. Controllo delle famiglie di font, peso, stile e dimensione per una migliore leggibilità.

Controllo della struttura del layout tramite proprietà di margine, padding, bordi e larghezza. Comprensione del comportamento del dimensionamento del box e dei tipi di visualizzazione degli elementi come block, inline e inline-block.

Controllo dei layout orizzontali e verticali utilizzando le proprietà Flexbox. Regolazione della direzione, dell'allineamento e della spaziatura per strutturare i componenti dell'interfaccia utente.

Migliora i layout utilizzando colori di sfondo, immagini, pseudo-elementi e ombre. Stile dei componenti visivi per profondità e contrasto.

Challenge: Create a Modern Card Component

Task

1. Which property adds shadow around an element's box?

2. How can you add an image as the background of an element?