Створив сайт для популяризації та реклами роупджампінга в Маріуполі.

Сайт: https://ropejump.mrpl.info/

Git-репозиторій https://github.com/chomovva/ropejump.git

Моя роль у проекті:

  • дизайн
  • верстка
  • розробка теми
  • початкове наповнення і настройка сайту

Детальніше про проект

Сайт створено для реклами роупджампінга в Маріуполі. Організацією стрибків займається фірма АльпСіті і її керівник Андрій Шаталін.

Роупджампинг – досить молодий напрямок екстремального спорту і відпочинку, суть якого полягає в стрибках з висотних об’єктів з використанням спеціального спорядження.

На сайті опубліковано інформацію про цей вид відпочинку, фото стрибків і налаштовані форми зворотного зв’язку з адміністрацією, є можливістю записатися на стрибки.

Контент сайту переведений на російську та українську мови.

Детальніше про проект верстки

Проект верстки виконаний на Gulp.js. Стилі написані на препроцесорів SASS (синтаксис SCSS), html-код на препроцесорів PUG (Jade).

Верстка сайту адаптивна, добре відображається на мобільних пристроях і десктопах.

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

Бібліотеки та фреймворки, які я використовував:

  • FlexboxGrid.css – модульна бутстрап подібна сітка на флексбоксах;
  • LazyLoad.js – jQuery плагін для додавання “ледачого” завантаження зображень;
  • justifiedGallery – js бібліотека, яка дозволяє створювати галерею зображень по ширині екрану;
  • Superembed.js – виявляє вбудоване відео популярних відеосервісів і робить його адаптивним;
  • Fancybox.js – jQuery плагін для створення модальних вікон і галереї;
  • jQuery – популярний JavaScript фреймворк.

Інтеграція WordPress теми

Тема інтегрована за всіма правилами кодексу wordpress. При інтеграції не використовувалися сторонні плагіни або білдери. Вся настройка теми здійснюється через WordPress Customizer API. Для деяких блоків головної сторінки написані нестандартні елементи управління. Працює живе превью, тобто при зміні налаштувань автоматично оновлюється область попереднього перегляду сторінки.

Тема підтримує багатомовність за допомогою плагіна Polylang. Все настрйокі Customizer API переказуються стандартними засобами цього плагіна.

Верстка головної сторінки

Скріншоти налаштувань теми

51голос
Рейтинг статті
Підписатися
Сповістити про
guest
0 Коментарі
Вбудовані Відгуки
Переглянути всі коментарі
0
Ми любимо ваші думки, будь ласка, прокоментуйте.x
()
x