Sfida: Crea un Componente Card Moderno

Esercitazione pratica per migliorare l'aspetto visivo della pagina web. Il compito prevede:

• Aggiunta di un'ombra all'elemento div con il nome classe card. I valori specificati per l'ombra sono:

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

• Aggiunta di un'immagine di sfondo all'elemento div con il nome classe card. Il link dell'immagine è fornito:

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

• Centratura dell'immagine di sfondo all'interno della card.

• Per aggiungere un'ombra a un elemento, utilizzare la proprietà box-shadow con il valore specificato. In questo caso, il valore è rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Per impostare un'immagine come sfondo tramite la proprietà background-image, utilizzare la sintassi url("correct path"). All'interno delle parentesi, aprire le virgolette e specificare il percorso dell'immagine. In questo esercizio, il percorso corretto è fornito: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Per determinare la posizione dell'immagine di sfondo, utilizzare la proprietà background-position. In questo caso, impostare il valore su center per la proprietà.

Risultato ottenuto

Hai stilizzato pagine web utilizzando CSS aggiungendo colori, spaziature, layout e componenti visivi.

Cosa manca

Le tue pagine hanno un aspetto gradevole, ma sono ancora statiche. Gli utenti non possono interagire con esse.

Prossimi passi

Per aggiungere comportamento e interattività, è necessario JavaScript. Successivamente, inizierai a lavorare con JavaScript per rendere le tue pagine dinamiche.