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

Challenge: Decorative EffectsChallenge: 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.
content
html

index.html

css

index.css

js

index.js

  • 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

js

index.js

Все було зрозуміло?

Секція 5. Розділ 6
course content

Зміст курсу

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Challenge: Decorative EffectsChallenge: 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.
content
html

index.html

css

index.css

js

index.js

  • 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

js

index.js

Все було зрозуміло?

Секція 5. Розділ 6
some-alt