Завдання: Створення Сучасного Карткового Компонента

Практичне завдання для покращення візуальної привабливості вебсторінки. Завдання включає:

• Додати тінь до елемента div з класом card. Вказані значення тіні:

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

• Додати фонове зображення до елемента div з класом card. Надане посилання на зображення:

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

• Вирівняти фонове зображення по центру всередині картки.

• Для додавання тіні до елемента використовуйте властивість box-shadow із зазначеним значенням. У цьому випадку значення: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
• Для встановлення зображення як фону за допомогою властивості background-image використовуйте синтаксис url("correct path"). У дужках відкрийте лапки та вкажіть шлях до зображення. У цьому завданні правильний шлях: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
• Для визначення позиції фонового зображення використовуйте властивість background-position. У цьому випадку значення властивості — center.

Що ви створили

Ви стилізували веб-сторінки за допомогою CSS, додаючи кольори, відступи, компонування та візуальні елементи.

Чого бракує

Ваші сторінки виглядають добре, але залишаються статичними. Користувачі не можуть взаємодіяти з ними.

Що далі

Щоб додати поведінку та інтерактивність, потрібен JavaScript. Далі ви почнете працювати з JavaScript і зробите свої сторінки динамічними.