Frontend-разработка

Представительский сайт компании "Хаберлан Групп"

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js, swiper.js, revealator.jquery.js

Примеры: главная, о компании, поддержка спорта, результаты поиска

Сайт для юриста Петровой В.В. и ее партнеров.

Дизайн создавался в Figma на основе логотипа и основного цвета (золото).

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js, swiper.js

Примеры: главная, завершенные дела, услуги

Полная переверстка главной страницы уже существующего сайта с учетом адаптивности

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js

Пример

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

Был разработан логотип и дизайн-система в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, jquery.validation, swiper.js, imask.js

Примеры: главная, доставка и оплата, отзывы

Лендинг для рекламы и продажи услуг.

Верстка: сетка Bootstrap 4, pug, scss, jQuery

Пример

Интернет-магазина для официального дилера продукции Forbo в России.

Дизайн разрабатывался в Figma, было создано около 20 макетов страниц.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, jquery.validation, slick, imask

Примеры: главная, каталог, товар, поисковая выдача

Медиапродакшн для бизнеса

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки revealator.jquery.js, библиотека для динамической выборки Isotope.js

Примеры: главная, портфолио, блог, карьера

Сайт-каталог для фирменного магазина плинтусов Dollken Profiles. 

Разработка дизайна проводилась в Figma, было создано около 20 макетов страниц.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки jquery.mask.js, slick.js, jQuery валидация, ionRangeSlider.js.

Примеры: главная, каталог, товар, личный кабинет пользователя

Лендинг для онлайн-консультаций в сети детских глазных клиник "Ясный взор".

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки slick.js, jQuery валидация.

Пример

Лендинг для маркетингово агентства. 

На этапе верстки заказчик просил добавить побольше "вырвиглазных эффектов". :)
Лендинг на двух языках.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки slick.js, luxy.js, jQuery валидация.

Пример

Сайт производителя и поставщика модульных памп-треков в России.

Разработка дизайна велась в Figma по бренд-буку заказчика, всего 12 страниц-шаблонов. Так же отрисовывались 2D модели тринадцати памп-треков в Photoshop.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, tempusDominus+moment.js, слайдер slick.js, jQueryValidation для валидации форм.

Примеры: главная, внутренняя страница каталога, страница секции

Сайт-агрегатор организаций и индивидуальных прдепринимателей в сфере красоты.

Был разработан логотип, дизайн-система для пользовательской и администраторской частей сайта, было создано и сверстано более 40 страниц-шаблонов. Разработка дизайна велась в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки ion.RangeSlider, bootstar-select, fullCalendar.js, moment.js

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

Сайт-каталог по услугам и сопутствующим товарам мастерской по изготовлению ключей.

Дизайн сайта создавался в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, Fancybox, слайдер Slick.

Примеры: главная страница, перечень услуг, страница услуги, каталог, страница товара.

Сайт-одностраничник для программно-аппаратного комплекса длительного мониторинга ЭКГ Vitappio.

Дизайн сайта создавался при помощи Figma + Photoshop.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, Fancybox, слайдер Slick.

Пример: основная страница.

https://vitappio.com

Сайт-магазин медицинских тестов на ранее выявление рака.

Разработка дизайна производилась в Figma + Photoshop + Illustrator.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, svg-спрайт, сторонние библиотеки валидации форм.

Примеры страниц: главная, страница продукта.

Интернет-магазин по продаже мобильных устройств, запчастей и аксессуаров к ним.

Дизайн сайта создавался в Figma.

В верстке использовались: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, слайдер Slick, Fancybox3,.

Примеры страниц: главная, каталог, страница товара с уценкой, оформление товара, контакты.

Личный сайт/блог/портфолио Андрея Пянзина.

Использовались: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм.

После верстки сайт собирался на WordPress.

Примеры страниц: главная, страница проекта (портфолио), страница блога.

http://pyanzin.com/

Интернет-магазин строительных материалов.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки: слайдер Slick, валидация форм, FancyBox.

Примеры страниц: главная, каталог, страница товара, оформление заказа (в 4 шага).

https://abk-fasad.ru/

Небольшой сайт и личный кабинет для страхования выставочных экспонатов.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки: Ion.RangeSlider, inputMask, jQuery Validation Plugin, Slick, Tempus Dominus Bootstrap4.

Примеры страниц: главная, страница страхования временных выставок, личный кабинет.

https://artinsure.ru/

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

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм и полей ввода телефонных номеров.

Примеры: главная, кабинет.

Лендинг для склада индивидуального хранения для физических и юридических лиц Prostor.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки слайдер Slick, виджет календаря Tempus Dominus Bootstrap4, inputMask, анимация текста typed.js.

Примеры: главная.

http://prostor-sklad.ru/

Сайт и интернет-магазин магических и мистических товаров.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки Fancybox и Slick. Использовались SVG-маски для изображений сложной формы.

После верстки сайт собирался на WordPress + WooCommerce.

Примеры страниц: главная, список курсов, страница курса.

http://rus-magic.ru/

Разработка лендинга для СТО в небольшом районном центре с нуля: выбивание скудной информации из заказчика, дизайн, согласование, верстка и дальнейшая поддержка.

Использовались: сетка от Bootstrap 4, lazyload.js, sass, pug, gulp.

https://miha123.ru

Лендинг для стартапа.

Использовались HTML5/CSS3 (Scss) — за основу взят минимальный набор модулей Bootstrap v.4, jade, так же в работе использовались jQuery, сторонний js-скрипт валидации полей .validate (все обязательные поля отмечены звездочкой, валидация происходит по нажатию на сабмит) и скрипт маски jQuery Mask Plugin для поля телефона. Весь функционал работает как на десктопах, так и на мобильных устройствах.

Личный сайт дизайнера Дмитрия Филиппова.

Обилие мелких деталей и адаптивный перфект-пиксель. Немного js-интерактивности. На странице "Обо мне" переключение языков для текстового массива. Внутренние страницы кастомизируются с помощью цветов, задаваемых css-переменными в коде страницы.

В работе использовались HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade, jQuery.

Примеры страниц: главная, обо мне, кастомная внутренняя.

Личный сайт практикующего врача М.В. Фаниева.

В разработке использовались HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade. Полный адаптив.

После верстки, сайт собирался на WordPress.

Страницы для ознакомления: главная, внутренняя.

Сайт для мебельной компании.

Адаптивная верстка на HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade, jQuery. Для многочисленных каруселей изображений использовалась сторонняя библиотека Owl Carousel 2, для вывода и выборки работ — связка из Masonry и Isotope.

Примеры страниц: главная, контакты, страница портфолио.