Практика: интернет-магазин — каталог, карточка товара, корзина (HTML+CSS)

Разработка интернет-магазина: от каталога до корзины 🛒

Создадим стильный и функциональный интернет-магазин с нуля, используя только HTML и CSS. Фокус — на карточках товаров, каталоге и корзине. Готовы? Поехали!

🔹 Структура проекта

Сначала определимся с базовой HTML-разметкой:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Магазин электроники</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>Шапка магазина</header>
  <main>
    <!-- Каталог товаров -->
    <section class="catalog"></section>
    <!-- Корзина -->
    <aside class="cart"></aside>
  </main>
  <footer>Подвал</footer>
</body>
</html>

🔥 Совет: Используйте семантические теги (<section>, <aside>) для лучшей читаемости кода и SEO.

🔹 Стилизация карточки товара

Карточка — лицо магазина. Сделаем её привлекательной и информативной:

<!-- Пример карточки товара -->
<div class="product-card">
  <img src="laptop.jpg" alt="Ноутбук игровой">
  <h3>Ноутбук ASUS ROG</h3>
  <p class="price">89 990 ₽</p>
  <button class="add-to-cart">В корзину</button>
</div>

Добавим CSS:

.product-card {
  width: 250px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.price {
  font-weight: bold;
  color: #2a9d8f;
  margin: 10px 0;
}

.add-to-cart {
  background-color: #2a9d8f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

💡 Эффекты: Плавный ховер (transform) и тень создают ощущение интерактивности.

🔹 Каталог товаров

Организуем карточки в сетку с помощью CSS Grid:

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

⚡ Оптимизация: auto-fill автоматически подстраивает количество колонок под ширину экрана.

🔹 Корзина покупок

Корзина должна быть всегда под рукой. Стилизуем её как фиксированный боковой блок:

<aside class="cart">
  <h2>Корзина</h2>
  <div class="cart-items">
    <!-- Товары будут здесь -->
  </div>
  <button class="checkout">Оформить заказ</button>
</aside>

CSS для корзины:

.cart {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  background: #f8f9fa;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

.checkout {
  width: 100%;
  padding: 10px;
  background: #2a9d8f;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 20px;
}

🔹 Адаптивность

Добавим медиа-запросы для мобильных устройств:

@media (max-width: 768px) {
  .catalog {
    grid-template-columns: 1fr;
  }
  .cart {
    width: 100%;
    height: auto;
    position: static;
  }
}

📱 Важно: На мобильных корзина становится частью основного потока.

🔹 Итоговый штрих: анимация добавления в корзину

Создадим простую анимацию для кнопки:

.add-to-cart:active {
  transform: scale(0.95);
}

Что дальше?

Вы только что создали основу интернет-магазина! Дальше можно:
- Добавить фильтры для каталога.
- Реализовать счётчик товаров в корзине.
- Поработать с переключением тем (тёмная/светлая).

Для вдохновения загляните на YouTube-канал Данилы Бежина — там есть отличные примеры сложных анимаций!

Код готов, осталось наполнить его товарами. Вперёд, к продажам! 🚀