Challenge: Create a Modern Card Component

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.

• 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.

Now that you can structure and style webpages with HTML and CSS, it is time to make them interactive.

In the next course, you will learn JavaScript — the programming language that powers dynamic frontend applications, user interactions, and modern frameworks like Svelte.