Kitchen Mix

Описание проекта

Проект выполнен методом чистой верстки из дизайн-макета с последующей посадкой на CMS WordPress в виде уникальной кастомной темы.

🎥 Основной стек технологий

• Frontend: HTML5, CSS3 (Flexbox & Grid Layout), native JavaScript (ES6+).
• Backend: CMS WordPress.
• Плагины: Custom Fields Suite (CFS), Contact Form 7 (CF7).

📱 Особенности верстки и адаптивность.

• Адаптивная верстка: Интерфейс корректно отображается на всех типах устройств благодаря 3 контрольным точкам (Break Points) для смартфонов, планшетов и десктопов.
• Современная сетка: Структура страниц построена на комбинации Flexbox (для линейных компонентов и выравнивания) и CSS Grid (для сетки товаров и сложных галерей).

📄 Структура сайта (4 страницы)

• Главная страница — презентация компании, ключевые преимущества и интерактивные элементы.
• Каталог — структурированная сетка товаров с выводом актуальных цен.
• Страница товара — подробная карточка с описанием, характеристиками и формой обратной связи.
• Контакты — контактные данные, интерактивная карта и форма быстрого запроса.

⚙️ Интерактивный JavaScript-функционал

• Мобильное меню — отзывчивое «гамбургер-меню» для удобной навигации на экранах смартфонов.
• Аккордеон (Главная страница) — компактный блок «Вопрос-Ответ» (FAQ) с плавной анимацией раскрытия.
• Табы (Страница товара) — удобное переключение между описанием, техническими характеристиками и условиями доставки.
• Сортировка товаров (Каталог) — клиентский скрипт для быстрой фильтрации/сортировки карточек по цене или алфавиту.

🛠 Интеграция с WordPress (Посадка на CMS)

• Разработана уникальная тема с нуля без использования тяжелых конструкторов (Elementor, Divi и др.), что гарантирует высокую скорость загрузки.
• Custom Fields Suite (CFS): Все характеристики товаров, цены, баннеры и текстовые блоки выведены в кастомные поля. Контент-менеджер может легко редактировать сайт через админ-панель без знания кода.
• Contact Form 7: Настроены и стилизованы формы обратной связи (на странице контактов и в карточке товара для быстрого запроса цены или консультации).