Логотип

Верстка корпоративного сайта на OctoberCMS

Наша работа

Задача: создать тему для корпоративного сайта на OctoberCMS, по дизайн макету.

Тема сделана в адаптивном дизайне с использованием шаблонизатора Twig, за основу css частично взят Bootstrap4, из JavaScript использован Jquery 3.4.1, Slick, anime.js 3.2, часть Bootstrap4.

Демонстрация:

Читать далее >>

Верстка интернет-магазина на OctoberCMS

Наша работа

Задача: создать тему для интернет-магазина, на OctoberCMS по дизайн макету.

Тема сделана в адаптивном дизайне с использованием шаблонизатора Twig, написан свой css микрофреймворк на SCSS, из JavaScript использован Jquery 3.4.1, Select2, Fancybox3, Flickity.

Демонстрация:

Читать далее >>

Landing Page для автосервиса

Наша работа

Задача: создание целевой страницы автосервиса по дизайн-макету.

Целевая страница автосервиса сделана в адаптивном дизайне, на OctoberCMS (Bootstrap 4, jquery-3.3.1). Реализован Telegram бот оповещения, о заявках через форму сайта и динамическая галерея, которая получает фото через Instagram API, из аккаунта автосервиса с кешированием на 2 часа.

Демонстрация сайта:

Читать далее >>

Landing Page партнерской программы для Instagram сервиса

Наша работа

Задача: создание целевой страницы партнерской программы для Instagram сервиса по дизайн-макету.

Верстка сайта партнерской программы выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, слайдер slick, она отлично работает на всех платформах, реализована анимация.

Демонстрация сайта:

Читать далее >>

Front-end веб-приложения для Instagram

Наша работа

Задача: верстка веб-приложения HTML/CSS(SASS)/JS.

Верстка веб-приложения выполнена на основе частично взятого Bootstrap 4, из JS jquery и другие библиотеки. Заказчиком был выбран довольно странный постраничный способ реализации, вместо написания css/js фреймворка и разработка интерфейса на его основе. Часть веб-приложения была выполнена полностью с разработкой скриптов JS(ES6).

Демонстрация сайта:

Читать далее >>

Landing Page вебинара для Instagram сервиса

Наша работа

Задача: создание целевой страницы вебинара для Instagram сервиса по дизайн-макету.

Целевая страница вебинара выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, прекрасно работает на всех платформах, реализован таймер обратного отсчета на JS и анимация.

Демонстрация сайта:

Читать далее >>

Landing Page для Instagram сервиса по дизайн-макету

Наша работа

Задача: создание целевой страницы для Instagram сервиса по дизайн-макету.

Целевая страница выполнена в адаптивном дизайне, на Bootstrap 4.1, слайдере Slick, jquery-3.3.1 и прекрасно работает на всех платформах. Слайды меняются путем замены контента, во время смены проигрывается анимация.

Демонстрация сайта:

Читать далее >>

Landing Page вебинара для Instagram сервиса

Наша работа

Задача: создание целевой страницы вебинара для Instagram сервиса по дизайн-макету.

Целевая страница вебинара выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, прекрасно работает на всех платформах, реализован таймер обратного отсчета на JS.

Демонстрация сайта:

Читать далее >>

Оптимизация и перенос сайта с uCoz конструктора сайтов

Наша работа

Задача: перенести сайт (целевая страница), с uCoz конструктора сайтов на чистый HTML5/CSS3/JS, попутно оптимизировать, для перехода на нормальный хостинг.

Сайт пришлось переверстать с ноля. В качестве базы CSS взят Bootstrap 4.0, при помощи SASS, из него было вырезано все лишнее и оставлен только Flex, Modal и несколько других компонентов. Конечный CSS в несжатом виде имеет размер 22,4кб (после gzip 3,6кб). Основа JavaScript jQuery v3.3.1 и bootstrap.js с удалением лишних компонентов, минимизированный файл имеет размер 108,1кб (после gzip 35,6кб). Изображения были оптимизированы, основной background и favicon также были нарезаны под разные устройства, общий размер изображений удалось сократить с 1.3мб до 55,4кб. Также это коснулось шрифтов и иконок. Убраны неиспользуемые шрифты GoogleFont, а несколько векторных картинок используемых из FontAwesome, были заменены на библиотеку svg, общий размер шрифтов и иконок удалось сократить с 156кб до 26,6кб, а запросы с 8 до 3.

Итог удалось сократить время загрузки целевой страницы на более чем 90%. Для тестов использовался хостинг beget.com.

Демонстрация сайта:

Читать далее >>

1