Challenge: Decorative Effects
Task
Let's practice and enhance the visual appeal of the webpage. The task includes:
Add a shadow to the
div
element with the class namecard
. The specified shadow values arergba(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 namecard
. 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.
index.html
index.css
To add a shadow to an element, utilize the
box-shadow
property with the specified value. In this case, the value isrgba(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 theurl("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 tocenter
for the property.
index.html
index.css
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal