Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Challenge: Decorative Effects | Decorative Effects
CSS Fundamentals

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

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="card">
<div class="card-content">
<h2>Weather</h2>
<p>Today's forecast</p>
<a href="#" class="btn">Learn more...</a>
</div>
</div>
</body>
</html>
  • 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.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="card">
<div class="card-content">
<h2>Weather</h2>
<p>Today's forecast</p>
<a href="#" class="btn">Learn more...</a>
</div>
</div>
</body>
</html>

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

We use cookies to make your experience better!
some-alt