Cat Energy

Занялся собой? Займись котом!

О проекте

Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету? Необходимо заработать авторитет среди дворовых котов и даже собак? Интернет-магазин Cat Energy поможет подобрать и заказать подходящую систему функционального питания вашему коту для сброса лишнего веса или набора мышечной массы.

Сайт Cat Energy Репозиторий на GitHub

Техническая реализация

Общая информация

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

Стек: HTML5, CSS3, JavaScript, БЭМ, Sass, Gulp.

Адаптивная верстка

Для каждой страницы выполнена фиксированная верстка трёх состояний: мобильная, планшетная и десктопная.

Главная страница Кэт Энерджи на трех устройствах. Смартфон, планшет, компьютер.

Страница каталога Кэт Энерджи на трех устройствах. Смартфон, планшет, компьютер.

Страница подбора программы Кэт Энерджи на трех устройствах. Смартфон, планшет, компьютер.

Разметка и Стилизация

Семантическая разметка страниц выполнена на HTML5 с применением методологии БЭМ, и отвечает критериям валидности и доступности.

Стилизация страниц выполнена на CSS3 c использованием препроцессора Sass (синтаксис SCSS).

Сетки страниц и компонентов

Сетки крупных структурных блоков и мелких компонентов построены при помощи Flexbox и Grid Layout, не боятся переполнения контентом, и перестраиваются в зависимости от разрешения экрана устройства пользователя.

Адаптивная графика

Выполнено кадрирование контентных изображений для загрузки определенных изображений в зависимости от разрешения экрана устройства пользователя.

Растровая графика в проекте подготовлена для двух вариантов экранов: с обычной и двойной плотностью пикселей.

Интерактивные карты

Интерактивные карты в проекте реализованы с использованием Google Maps API.

Интерактивная карта на сайте Кэт Энерджи.

На случай отказа работоспособности JavaScript предусмотрено отображение изображения карты.

Мобильное меню

Мобильное меню реализовано с использованием нативного JavaScript, и работает по класической схеме: по клику на бургер - открывается, на крестик - закрывается.

На случай отказа работоспособности JavaScript предусмотрено статическое отображение мобильного меню в открытом состоянии.

Статичное мобильное меню на сайте Кэт Энерджи в открытом виде.

Оптимизация

Для браузеров, поддерживающих формат WebP, в проекте подготовлены контентные изображения в данном формате.

Векторные изображения на странице объединены в спрайт.

Реализована предзагрузка шрифтов и ленивая загрузка изображений.

Кроссбраузерность

Все страницы и элементы сайта идентично отображаются в последних версиях браузеров Chrome, Firefox, Safari.