Интернет-магазин мебели "Интерьер"

Адаптивный сайт интернет-магазина мебели с каталогом товаров, корзиной и формой оформления заказа.

📋 О проекте

Проект представляет собой многостраничный сайт для мебельного магазина с удобной навигацией, фильтрацией товаров и адаптивным дизайном для всех устройств.

Страницы сайта:

• Главная (index.html) - приветственный экран, категории мебели, специальные предложения
• Каталог (catalog.html) - полный список товаров с фильтрацией
• Корзина (cart.html) - выбранные товары и оформление заказа

🛠 Технологии

• HTML5
• SCSS (разделен на модули)
• CSS3
• Адаптивная верстка (Desktop First)
• БЭМ-методология

🎨 Особенности дизайна

• Современный минималистичный дизайн
• Адаптация под мобильные устройства (320px)
• Планшетная версия (1024px)
• Кастомные элементы форм (радио-кнопки, чекбоксы, селекты)
• Двойные ползунки для фильтрации по цене
• Фильтрация по цветам, типу комнаты, срокам доставки

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

project/ │ ├── index.html # Главная страница ├── catalog.html # Страница каталога ├── cart.html # Страница корзины ├── style.css # Скомпилированный CSS ├── style.scss # Основной SCSS файл │ ├── image/ # Изображения │ ├── header.jpg │ ├── catalog_back.png │ ├── top-cart.png │ └── ... (остальные изображения) │ ├── _catalog.scss # Стили для каталога ├── _cart.scss # Стили для корзины ├── _form.scss # Стили для форм ├── _tablet.scss # Адаптация для планшетов └── _mobile.scss # Адаптация для мобильных

text

🚀 Функциональность

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

• Сетка товаров 3xN на десктопе
• Адаптивная сетка (3 → 2 → 1 колонка)
• Фильтрация товаров по:
  • Срокам доставки
  • Цене (двойной ползунок)
  • Цвету (14 цветов)
  • Типу комнаты (10 категорий)

Корзина

• Список выбранных товаров
• Изменение количества
• Промо-блок "Специальные предложения"
• Форма оформления заказа
• Расчет итоговой суммы

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

• Desktop (>1024px) - полная версия
• Tablet (≤1024px) - оптимизированная верстка
• Mobile (≤767px) - мобильная версия с выпадающим меню

🎯 Особенности верстки

• Flexbox и Grid для построения сеток
• Кастомные стили для форм
• Плавные анимации при наведении
• Оптимизация изображений для мобильных
• Семантическая верстка

🔧 Установка и запуск

Откройте файл index.html в браузере:

📱 Адаптация под устройства Устройство Ширина контента Особенности Desktop 1200px + Полная версия, 3 колонки Tablet 768px - 1024px 2 колонки в каталоге Mobile 320px - 767px 1 колонка, мобильное меню 🎨 Цветовая схема Основной фон: белый

Текст: черный (#000000) / серый (#888888)

Акценты: черный, белый

Футер: светло-серый (#F8F8F8)

Формы: светло-серый (#F7F6F6)

📝 Планы по развитию Добавить JavaScript для интерактивности фильтров

Реализовать функционал "Избранное"

Добавить страницу товара

Интеграция с корзиной через JS

Добавить слайдеры на главную

👥 Автор Разработчик - [Ваше имя]

📄 Лицензия Этот проект находится под свободной лицензией.

⭐️ Если вам понравился проект, поставьте звезду на GitHub!

text

Этот README включает:

• Полное описание проекта
• Список использованных технологий
• Структуру файлов
• Особенности реализации
• Инструкции по установке
• Планы развития
• Информацию об адаптивности