Лендинг: вёрстка сайта для животных по PSD макету - портфолио по верстке и дизайну

Лендинг: вёрстка сайта для животных по PSD макету

Верстка PSD макета с применением Pixel Perfect

Тема: приют для животных

Основная страница сайта:

Данный макет был предоставлен в 3 версиях:

  • Мобильной
  • Планшетной
  • Компьютерной
Мобильная версия сайта Планшетная версия сайта Компьютерная версия сайта

Дополнительная страница с JS элементами

Помимо лендинга, необходимо реализовать открывание модальных окон и рабочий слайдер на JavaScript

В макете для этого была создана дополнительная страница

animals/pets.html

Страница сайта с JavaScript

Дополнительные задачи

Так же с помощью JavaScript был реализован функционал «плавного скрола»

Адаптивная верстка велась вручную, без использования фреймворков

Для реализации слайдера и модальных окон был использован фреймворк bootstrap 4

Сборка проекта

Проект собирался при помощи таск-менеджера Gulp

Стили были написаны на css-препроцессоре less

Оптимизация:

После компиляции less в css, последний проходил минификацию и оптимизацию с помощью gulp плагина csso

Далее были подключены, соединены в один файл и так же оптимизированы необходимые css библиотеки от фреймворков

Так же, специальном gulp плагином autoprefixer, были расставлены префиксы css3 свойств для старых браузеров

Похожая процедура по минификации и конкатенации кода была сделана и с JavaScript файлами

Последним этапом оптимизации стало сжатие изображений при помощи gulp плагина imagemin

__

Макет был предоставлен сайтом ‘htmlAcademy’