Позиціонування в CSS

Створи картку товару, на якій у верхньому лівому куті розміщений значок "АКЦІЯ". При наведенні миші на картку — повинна з'являтися напівпрозора підказка з описом товару.

• 1
  Картка має фіксований розмір (наприклад, 220×280px), зображення-заглушка (можна кольоровий блок), назва та ціна товару
• 2
  Значок "АКЦІЯ" розміщений у верхньому лівому куті картки через position: absolute
• 3
  Підказка (overlay) при наведенні покриває картку напівпрозорим фоном з описом — також через position: absolute
• 4
  Значок "АКЦІЯ" повинен бути поверх overlay (використай z-index)
• 5
  Перехід overlay — плавний (transition: opacity .3s)

<div class="card">
  <div class="card__image"></div>
  <div class="card__badge">АКЦІЯ</div>
  <div class="card__overlay">
    <p>Опис товару...</p>
  </div>
  <div class="card__info">
    <h3>Назва товару</h3>
    <p class="card__price">₴ 599</p>
  </div>
</div>

Створи односторінковий лендінг з фіксованою навігацією, яка залишається на екрані при прокручуванні. Кнопка "↑ Вгору" з'являється після прокрутки 200px і зникає коли вгорі. Секції мають "липкі" підзаголовки.

• 1
  Навігаційна панель зверху: position: fixed, займає всю ширину, завжди видима при скролі
• 2
  Мінімум 3 секції контенту (достатньо для появи скролу), кожна з підзаголовком position: sticky; top: 60px (60px — висота навбару)
• 3
  Кнопка "↑" у нижньому правому куті: position: fixed. Використовує visibility: hidden коли прихована (не display: none) — для плавної анімації opacity
• 4
  Бічна панель чи блок із overflow-y: auto; max-height: 200px — scrollable список пунктів
• 5
  JavaScript: слухач scroll на window, що перемикає видимість кнопки "↑"

const btn = document.querySelector('.scroll-top');

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    btn.style.visibility = 'visible';
    btn.style.opacity = '1';
  } else {
    btn.style.visibility = 'hidden';
    btn.style.opacity = '0';
  }
});

btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Реалізуй модальне вікно (popup / dialog). Кнопка "Відкрити" відображає напівпрозорий backdrop та вікно по центру екрану. При відкриті модалки — сторінка позаду не прокручується. Клік на backdrop або кнопку ✕ закриває вікно.

• 1
  Backdrop: position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100
• 2
  Модальне вікно: position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 101
• 3
  При відкритті модалки: document.body.style.overflow = 'hidden' (сторінка не скролиться)
• 4
  При закритті: overflow повертається до 'auto'
• 5
  Кнопка ✕ у правому верхньому куті модалки — теж через position: absolute

<!-- Тригер -->
<button id="openModal">Відкрити</button>

<!-- Backdrop -->
<div class="modal-backdrop" id="backdrop">
  <!-- Вікно -->
  <div class="modal">
    <button class="modal__close" id="closeModal">✕</button>
    <h2>Заголовок модалки</h2>
    <p>Вміст...</p>
  </div>
</div>