Створіть картку з CSS

Умова

Створіть картку товару (зображення, назва, ціна, кнопка) та підключіть до сторінки зовнішній файл styles.css у <head>.

Вимоги

У <head> є <link rel="stylesheet" href="styles.css">
Картка обгорнута в <div class="card">
Всередині картки є img, заголовок, ціна і кнопка
Жодних inline-стилів через атрибут style

Початковий код

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Картка товару</title>
</head>
<body>
</body>
</html>

▶ Відкрити в HTML Editor

Підказки

link у head підключає CSS ще до того, як браузер почне малювати body — це правильне місце для нього.
Клас card потім стилізується у styles.css, а не через style="..." на самому елементі.

Показати рішення

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Картка товару</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <img src="product.jpg" alt="Бездротові навушники">
    <h2>Бездротові навушники</h2>
    <p class="price">1299 грн</p>
    <button>Купити</button>
  </div>
</body>
</html>

Схожі інструменти

HTML Редактор онлайн

Онлайн HTML редактор з підсвіткою синтаксису, нумерацією рядків та живим прев'ю. Без реєстрації, без сервера.

Підключення CSS

Як підключити зовнішній CSS-файл або задати стилі прямо в head.

CSS Мініфікатор

Стисніть CSS файл онлайн, побачте розмір до/після та відсоток економії. Без сервера.